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:
![Diogo-_0-1611662526239.png Diogo-_0-1611662526239.png](https://community.meraki.com/t5/image/serverpage/image-id/16235i3FA15B445489A6D9/image-size/medium?v=v2&px=400)
And here is how it looks in my app usinf the info i get from the Dashboard API:
![Diogo-_1-1611662613821.png Diogo-_1-1611662613821.png](https://community.meraki.com/t5/image/serverpage/image-id/16236i332208FED26221FA/image-size/medium?v=v2&px=400)
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?