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.

<!DOCTYPE html>
<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="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@3.0.8/dist/esri-leaflet.js"
    integrity="sha512-E0DKVahIg0p1UHR2Kf9NX7x7TUewJb30mxkxEm2qOYTVJObgsAGpEol9F6iK6oefCbkJiA4/i6fnTHzM6H1kEA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet Vector from CDN -->
  <script src="https://unpkg.com/esri-leaflet-vector@4.0.0/dist/esri-leaflet-vector.js"
    integrity="sha512-EMt/tpooNkBOxxQy2SOE1HgzWbg9u1gI6mT23Wl0eBWTwN9nuaPtLAaX9irNocMrHf0XhRzT8B0vXQ/bzD0I0w=="
    crossorigin=""></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.Vector.vectorBasemapLayer('ArcGIS:DarkGray:Base', {
    apikey: apiKey // Replace with your API key - https://developers.arcgis.com
  }).addTo(map);

  // add a graphic layer composed of selected US Counties
  var 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
    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);
  });
</script>

</body>
</html>

Edit this sample on GitHub

Terms