Zoom to all features | Esri Leaflet

Fit the map to the boundaries of all features in the feature layer by querying the feature service. To learn more about feature layers, go to the Data hosting guide.

Use dark colors for code blocksCopy
<!DOCTYPE html>
<html lang="en">
  <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.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.34, -76.34], 5);

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