I'm trying to show a floorPlan i'm getting from the meraki dashboard API but using the gps coordinates i get from the API for the corners the floorPlan gets distorted and doesnt look right.
This one is the floorPlan in the meraki dashboard:
And here is how it looks in my app usinf the info i get from the Dashboard API:
This is the code i use to add the image to the map:
useEffect(() => {
if (floorPlanFiltered && map) {
currentFloorPlan && map.leafletElement.removeLayer(currentFloorPlan);
let overlay = new Leaflet.imageOverlay.rotated(
floorPlanFiltered.imageUrl,
floorPlanFiltered.topLeftCorner,
floorPlanFiltered.topRightCorner,
floorPlanFiltered.bottomLeftCorner,
{
opacity: 1,
interactive: true
}
).addTo(map.leafletElement)
Leaflet.marker([floorPlanFiltered.topLeftCorner.lat, floorPlanFiltered.topLeftCorner.lng]).addTo(map.leafletElement)
Leaflet.marker([floorPlanFiltered.topRightCorner.lat, floorPlanFiltered.topRightCorner.lng]).addTo(map.leafletElement)
Leaflet.marker([floorPlanFiltered.bottomRightCorner.lat, floorPlanFiltered.bottomRightCorner.lng]).addTo(map.leafletElement)
Leaflet.marker([floorPlanFiltered.bottomLeftCorner.lat, floorPlanFiltered.bottomLeftCorner.lng]).addTo(map.leafletElement)
}
}, [floorPlanFiltered, map])
It looks like the gpsCoords I get from the API are wrong or maybe I'm using them for the wrong thing. Does anyone know why this is happening?
