Fit the map to the boundaries of all features in the feature layer by querying the feature service. To learn more about feature layers, visit the Data hosting chapter in the Mapping APIs and services guide.
<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" />
<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.12/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.34, -76.34], 5);
L.esri.Vector.vectorBasemapLayer("arcgis/dark-gray/base", {
apikey: apiKey
}).addTo(map);
const trails = L.esri
.featureLayer({
url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer/0"
})
.addTo(map);
trails.query().bounds(function (error, latlngbounds) {
if (error) {
console.log('Error running "Query" operation: ' + error);
}
map.fitBounds(latlngbounds);
});
</script>
</body>
</html>