3

I have a leaflet map with a lot of polygons (borders). I would like to zoom to the bounds on the polygon, when the user click.

Until now its only possible for me to zoom to the the bounds of all the polygons in the GeoJSON file.

var map = L.map('map')
    .addLayer(mapboxTiles)
    .setView([50.444508, -80.499491], 10);

var markers = new L.geoJson(null, {
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {})
    }
});

markers.on('click', function() {
    map.fitBounds(markers.getBounds());
});

markers.addTo(map);

$.getJSON('contry.php', function (data) {
     markers.addData(data)
});

what to change here?

markers.on('click', function() {
    map.fitBounds(markers.getBounds());
});
8

Probably:

markers.on("click", function (event) {
    // Assuming the clicked feature is a shape, not a point marker.
    map.fitBounds(event.layer.getBounds());
});

You may want to detect if the clicked feature is a marker (point feature), and act accordingly, as it will not have the getBounds() method.

References:

Note: in the case of attaching a listener onto a Feature Group (like your GeoJSON group layer), event.target gives the entire group, not the specific single feature.

  • 1
    Spot on! thanks. You just miss a c in "function" – student Feb 28 '16 at 18:15

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.