CODEWITHSUNDEEP
leaflet
Regentix
Regentix

Reputation: 412

Leaflet map United States and fitBounds

I've created a function which adds a few layers to my Leaflet map on page load.
Afterwards, I want it to center the view based up on these layers.

let layerGroup = L.featureGroup();
... 
    // add multiple layers
    layerGroup.addLayer(L.geoJson(feature))
...
leafletMap.addLayer(layerGroup);
leafletMap.fitBounds(layerGroup.getBounds());

It currently works as intended, and the map zooms in in order to fit the bounds.

However, when the United States is one of these layers, the map completely zooms out, because of the Near islands.

enter image description here

Is there a way to fix this issue, and thus zoom in on the United States without the map zooming out?

Thanks in advance

Upvotes: 0

Views: 866

Answers (2)

Regentix
Regentix

Reputation: 412

I've "fixed" the issue by simply removing the Near islands coordinates from my geoJson file.

The corresponding coordinates in my case were: [[[172.9041,53.0012],[173.3013,52.9256],[173.1886,52.7957],[172.9443,52.7498],[172.6404,52.8688],[172.6604,53.0086],[172.9041,53.0012]]]

If anyone finds a better solution, please let me know.

Upvotes: 0

Falke Design
Falke Design

Reputation: 11338

This is not so easy to fix, I don't know how your data looks like.

A fix would be to check if the lng coord is negative and then add 360 to it:

L.geoJson(feature,{
  coordsToLatLng: function coordsToLatLng(coords) {
    // the coords came into the function as //lng,lat,alt
    if(coords[0] < 0){
      coords[0] = coords[0]+360;
    }
    // the coords goes out as //lat,lng,alt
    return new L.LatLng(coords[1], coords[0], coords[2]);
  }
})

Upvotes: 2

Related Questions