Zoom to all features
This sample creates a latLngBounds object clientside which contains the geometries fetched from the server. An approach like this is necessary when working with older Feature Services (prior to ArcGIS Server 10.3.1) that don't support making direct requests to the server for the 'bounds' of features matching a query.
<html>
<head>
<meta charset=utf-8 />
<title>Zoom to all features</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css" />
<script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="//cdn.jsdelivr.net/leaflet.esri/1.0.3/esri-leaflet.js"></script>
<style>
body { margin:0; padding:0; }
#map { position: absolute; top:0; bottom:0; right:0; left:0; }
</style>
</head>
<body>
<div id="map"></div>
<script>
// create a map and add Esri's Dark Gray basemap
var map = L.map('map').setView([40, -100], 5);
L.esri.basemapLayer('DarkGray').addTo(map);
// add a graphic layer composed of selected US Counties
var fl = L.esri.featureLayer({
url: 'http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2',
where: "NAME='Los Angeles' OR NAME='San Bernardino'"
}).addTo(map);
// listen for when all features have been retrieved from the server
fl.on("load", function(evt) {
// create a new empty Leaflet bounds object
var bounds = L.latLngBounds([]);
// loop through the features returned by the server
fl.eachFeature(function(layer) {
// get the bounds of an individual feature
var layerBounds = layer.getBounds();
// extend the bounds of the collection to fit the bounds of the new feature
bounds.extend(layerBounds);
});
// once we've looped through all the features, zoom the map to the extent of the collection
map.fitBounds(bounds);
// unwire the event listener so that it only fires once when the page is loaded
fl.off('load');
});
</script>
</body>
</html>
Esri Leaflet is a project from the Esri PDX R&D Center and the Esri Community