0

I want it to auto zoom / zoom to center when any GeoJSON file is loaded on a Leaflet map. Help please.

$.getJSON("{{asset("storage/upload/shapefiles/districts/atd_district_level.geojson")}}",function(data){
                // add GeoJSON layer to the map once the file is loaded
                L.geoJson(data, {

                    style: {color: "#999", weight: 2, fillColor: "#00ad79", fillOpacity: .6},

                    onEachFeature: function (feature, layer) {
                        layer.bindPopup("<strong>" + feature.properties['DISTRICT'])
                    }

                }).addTo(map);
            });

I am new with Leaflet maps.

  • There's no such thing as a GeoJSON shapefile, they are both data formats. – nmtoken Jul 19 '17 at 19:16
1

If you keep a reference to the geojson layer you can get its bounds, and then fit the map to it.

$.getJSON("{{asset("storage/upload/shapefiles/districts/atd_district_level.geojson")}}",function(data){
                // add GeoJSON layer to the map once the file is loaded
                jsonLayer = L.geoJson(data, {

                    style: {color: "#999", weight: 2, fillColor: "#00ad79", fillOpacity: .6},

                    onEachFeature: function (feature, layer) {
                        layer.bindPopup("<strong>" + feature.properties['DISTRICT'])
                    }

                })
               jsonLayer.addTo(map);
               map.fitBounds(jsonLayer.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.