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?
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It only takes a minute to sign up.
Sign up to join this communityI 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?
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);