Leaflet zoom to polygon

Question

I receive a polygon layer in Leaflet via ESRI REST. (similar to here ) I want to have a menu where I can zoom to specific polygons. (one button per polygon)

How can I do that?

Answer 1

It should be quite easy by using the onEachFeature option of the L.esri.featureLayer, combined with shapes getBounds() and map fitBounds().

HTML:

<div id="map"></div>
<p>List of features:</p>
<ul id="list"></ul>

JavaScript:

var list = document.getElementById("list");

function myOnEachFeature(feature, layer) {
    var li = document.createElement("li"),
        a = document.createElement("a");

    // Create the "button".
    a.innerHTML = "some text, possibly using feature.properties";
    a.href = "#";
    a.myLayer = layer; // Store a reference to the actual layer.
    a.addEventListener("click", function (event) {
        event.preventDefault(); // Prevent the link from scrolling the page.
        map.fitBounds(this.myLayer.getBounds()); // Move to the shape!
    });
    li.appendChild(a);
    list.appendChild(li);
}

L.esri.featureLayer({
    url: 'someUrl',
    onEachFeature: myOnEachFeature
}).addTo(map);

Demo: http://jsfiddle.net/ve2huzxw/47/