Zoom to a subset of features | Esri Leaflet

Create a latLngBounds object from the client that contains geometries fetched from a feature serviceA feature service is a data service that provides access to spatial and non-spatial data in feature layers, feature layer views, and tables.Learn more. 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.

Use dark colors for code blocksCopy
<!DOCTYPE html>
<html lang="en">
  <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.19/dist/esri-leaflet.js"></script>

    <!-- Load Esri Leaflet Vector from CDN -->
    <script src="https://unpkg.com/esri-leaflet-vector@4.3.2/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 accessToken = "YOUR_ACCESS_TOKEN";

      const map = L.map("map").setView([40, -100], 5);

      L.esri.Vector.vectorBasemapLayer("arcgis/dark-gray/base", {
        token: accessToken
      }).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>