0

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?

4

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/

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.