3

How can I automatically center the map view on the drawn GeoJSON?

My GeoJSON can either contain a polygon or multiPolygon feature. I'm drawing the following GeoJSON onto my Leaflet map:

let parsedJson = JSON.parse(myString.geoJson);

let geoJSON = L.geoJson(parsedJson, {
     ...
}).addTo(myMap)

I tried fitBounds on the map object, but both center the map out of bounds. Zoom: I'd like to set the view to the bounds of my polygons.

Edit: I realized, the coordinates returned by getCenter() are for example LatLng(175.836357, -36.649876). When I switch them to LatLng(-36.649876, 175.836357) the center point is correctly drawn.

If I'm not mistaken, LatLong ranges are:

             North (+90)
               |
(-180) West ———+——— East (+180)
               |
             South (-90)

So the point returned by Leaflet should be correct and mine should not make any sense - I don't understand why it's correctly drawn when flipped. Could be the reason why the polygon.getBounds() LatLong's are also flipped.

Workaround: I found this working when switching the latLng coordinates of the bounds calculated by Leaflet. Sadly this turn the topics question to "Why are my coordinates flipped?" and leaves me with the workaround of just flipping them;

let coordinates = parsedJson.geometry.coordinates;
let polygon = L.polygon(coordinates);
let bounds = polygon.getBounds();
let southWest = bounds.getSouthWest();
let northEast = bounds.getNorthEast();
let cSouthWest = L.latLng(southWest.lng, southWest.lat);
let cNortEast = L.latLng(northEast.lng, northEast.lat);
let newBounds = L.latLngBounds(cSouthWest, cNortEast);

myMap.fitBounds(newBounds);

  • Is the code above what you have tried? Can you describe more about "very unpromising results"? What about zoom? Do you want just to center or show whole GeoJSON? – TomazicM Feb 3 at 6:43
  • I edited my question. The GeoJSON is shown/drawn into the map and colored. After that I want to center the view on this drawn shape, so you don't have to find it somewhere on the map, as these can range from super large to super small. – nonNumericalFloat Feb 3 at 10:36
  • After more evaluation I found it working, when I switch the latLngs of the bounds-coordinates. This does not make any sense to me.... – nonNumericalFloat Feb 3 at 11:09
  • 2
    I'd guess the issue centres on Leaflet expecting EPSG:4326 (lat/long) coordinates and GeoJSON being in CRS:84 (long/lat). – nmtoken Feb 3 at 13:47
  • @nmtoken so you would suggest changing from EPSG to CRS:84 ? How can I check which coordinate-system my geoJson is using ? Still this is no Solution for centering the view to the geoJson input. – nonNumericalFloat Feb 3 at 15:09
1

As @nmtoken wrote in his comment, Leaflet uses [lat, lng] order for coordinate input, which is obvious even from method names, for example L.latLng.

On the other side, standard GeoJSON has [lng, lat] order for coordinates (see https://tools.ietf.org/html/rfc7946#section-3.1.1).

When you use Leaflet methods that are aware of GeoJSON input, Leaflet treats them OK. One such method for example is creation of GeoJSON layer: L.geoJSON. If you separate coordinates from GeoJSON environment, like in your case parsedJson.geometry.coordinates, Leaflet cannot know they come from GeoJSON and as consequence coordinates are swapped.

The simplest solution in your case would be to create GeoJSON layer and then get it's bounds:

let parsedJson = JSON.parse(myString.geoJson);
let geoJSON = L.geoJson(parsedJson, {
     ...
}).addTo(myMap);
myMap.fitBounds(geoJSON.getBounds());

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.