9

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);

6
  • 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
    Commented Feb 3, 2020 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. Commented Feb 3, 2020 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.... Commented Feb 3, 2020 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
    Commented Feb 3, 2020 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. Commented Feb 3, 2020 at 15:09

1 Answer 1

12

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://www.rfc-editor.org/rfc/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());
2
  • Oh my dear... I did not realize L.geoJson inherits getBounds() from FeatureGroup as stated in leafletjs.com/reference-1.6.0.html#geojson . Thank you for pointing that out for us confused people out here. Commented Feb 3, 2020 at 20:57
  • On one hand, I've always thought that in hindsight it would be nice if a high quality JavaScript mapping library played nice directly with GeoJSON data. Unfortunately Leaflet does not, but it really isn't that hard to use the GeoJSON layer and get the bounds. Just a painful thing to repeat over and over and over again. As long as Leaflet has the GeoJSON layer, people will argue that it's fine... but wouldn't you rather just hand a Feature directly to the map. fitBounds() function? I would.
    – jhickok
    Commented Jan 10, 2023 at 19:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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