Create a lat object from the client that contains geometries fetched from a feature service. This is necessary when working with older feature services (prior to ArcGIS Server 10.3.1), which do not support making direct requests to the server for the 'bounds' of features matching a query.
<html>
<head>
<meta charset="utf-8" />
<title>Zoom to to a subset of features</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
<!-- Load Esri Leaflet from CDN -->
<script src="https://unpkg.com/esri-leaflet@3.0.10/dist/esri-leaflet.js"></script>
<!-- Load Esri Leaflet Vector from CDN -->
<script src="https://unpkg.com/esri-leaflet-vector@4.2.3/dist/esri-leaflet-vector.js" crossorigin=""></script>
<style>
html,
body,
#map {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #323232;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const apiKey = "YOUR_API_KEY";
const map = L.map("map").setView([40, -100], 5);
L.esri.Vector.vectorBasemapLayer("arcgis/dark-gray/base", {
apikey: apiKey
}).addTo(map);
// add a graphic layer composed of selected US Counties
const fl = L.esri
.featureLayer({
url: "https://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.once("load", function (evt) {
// create a new empty Leaflet bounds object
const bounds = L.latLngBounds([]);
// loop through the features returned by the server
fl.eachFeature(function (layer) {
// get the bounds of an individual feature
const 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);
});
</script>
</body>
</html>