Zoom to extent of all features | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

It can be convenient and useful for users to zoom to the extent of all features in a FeatureLayer once an app loads, when a layer is added to the map, or when a layer’s definitionExpression is updated.

The FeatureLayer API provides a method called queryExtent(), which allows you to calculate the full extent of features at runtime that satisfy a given query. If no query parameters are set, then the method queries for the extent of all features in the layer according to its definitionExpression.

// When the layer is loaded, query for the extent
// of all features in the layer. Then set the viewElement's
// extent to the returned extent of all features.

layer
  .when(() => {
    return layer.queryExtent();
  })
  .then((response) => {
    viewElement.goTo(response.extent);
  });

The FeatureLayer has a fullExtent property that contains an extent object saved to the feature service. Since some FeatureLayers are created from client-side features, other services, or feature services that don’t contain an accurate fullExtent of the data, using the fullExtent to zoom to all features in the layer can be unreliable in some cases. The queryExtent() method is more reliable when working with layers that either don’t have a fullExtent, or the fullExtent doesn’t accurately reflect the extent of the data.

// using the fullExtent can be unreliable and inconsistent across layers
// depending on the service and how the data was created
layer.when(() => {
  viewElement.goTo(layer.fullExtent);
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Zoom to extent of all features | Sample | ArcGIS Maps SDK for JavaScript</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <style>
      html,
      body {
        margin: 0;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <arcgis-scene basemap="dark-gray-vector">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
      <arcgis-compass slot="top-left"> </arcgis-compass>
      <arcgis-layer-list slot="top-right"></arcgis-layer-list>
    </arcgis-scene>
    <script type="module">
      const [FeatureLayer, Collection] = await $arcgis.import([
        "@arcgis/core/layers/FeatureLayer.js",
        "@arcgis/core/core/Collection.js",
      ]);

      const featureLayer = new FeatureLayer({
        outFields: ["STATION_NAME", "COUNTRY", "TEMP"],
        portalItem: {
          // autocasts as new PortalItem()
          id: "3a177da3f6524d61980fb41125b2349c",
        },
        title: "Temperature on Jan, 4, 2017",
      });

      // When the layer is loaded, query for the extent
      // of all features in the layer that satisfy the
      // definitionExpression. Then set the viewElement's
      // extent to the returned extent of all features.

      featureLayer.when(() => {
        featureLayer.definitionExpression = createDefinitionExpression("");
        zoomToLayer(featureLayer);
      });

      /*****************************************************************
       * Setup the Scene component and add the feature layer
       *****************************************************************/
      const viewElement = document.querySelector("arcgis-scene");
      await viewElement.viewOnReady();
      viewElement.map.add(featureLayer);

      // setup the Layer List component
      const layerList = document.querySelector("arcgis-layer-list");
      await layerList.componentOnReady();
      layerList.listItemCreatedFunction = createActions;

      // definitionExpressions used by each action
      // listed in the LayerList

      const expressions = new Collection([
        {
          id: "75+",
          expression: "TEMP > 75",
        },
        {
          id: "50-75",
          expression: "TEMP > 50 AND TEMP <=75",
        },
        {
          id: "25-50",
          expression: "TEMP > 25 AND TEMP <=50",
        },
        {
          id: "25-",
          expression: "TEMP <= 25",
        },
        {
          id: "arctic-circle",
          expression: "LATITUDE >= 66.5",
        },
        {
          id: "north-temperate-zone",
          expression: "LATITUDE < 66.5 AND LATITUDE >= 23.5",
        },
        {
          id: "torrid-zone",
          expression: "LATITUDE < 23.5 AND LATITUDE >= -23.5",
        },
      ]);

      // When an action is triggered, the definitionExpression
      // is set on the layer and the viewElement's extent updates
      // to match the features visible in the layer

      layerList.addEventListener("arcgisTriggerAction", async (event) => {
        const { action, item } = event.detail;
        const layer = item.layer;

        const subExpression = expressions.find((item) => {
          return item.id === action.id;
        }).expression;

        layer.definitionExpression = createDefinitionExpression(subExpression);

        zoomToLayer(layer);
      });

      function createActions(event) {
        const item = event.item;

        item.actionsOpen = true;
        item.actionsSections = [
          [
            {
              title: "> 75°F",
              className: "esri-icon-zoom-out-fixed",
              id: "75+",
            },
            {
              title: "50°-75°F",
              className: "esri-icon-zoom-out-fixed",
              id: "50-75",
            },
            {
              title: "25°-50°F",
              className: "esri-icon-zoom-out-fixed",
              id: "25-50",
            },
            {
              title: "< 25°F",
              className: "esri-icon-zoom-out-fixed",
              id: "25-",
            },
          ],
          [
            {
              title: "Above Arctic Circle",
              className: "esri-icon-zoom-out-fixed",
              id: "arctic-circle",
            },
            {
              title: "North Temperate Zone",
              className: "esri-icon-zoom-out-fixed",
              id: "north-temperate-zone",
            },
            {
              title: "Torrid Zone",
              className: "esri-icon-zoom-out-fixed",
              id: "torrid-zone",
            },
          ],
        ];
      }

      // Appends a definitionExpression to a base expression
      // the base expression only returns features in
      // Canada, USA, and Mexico. It excludes some US territories
      // located on the other side of the dateline

      function createDefinitionExpression(subExpression) {
        const baseExpression =
          "( COUNTRY LIKE '%United States Of America%' OR " +
          "COUNTRY LIKE '%Canada%' OR " +
          "COUNTRY LIKE '%Mexico%') AND NOT" +
          "(COUNTRY LIKE '%Johnston/Wake/Xmas%' OR " +
          "COUNTRY LIKE '%Hawaii%' OR " +
          "COUNTRY LIKE '%Marshall Islands%' OR " +
          "STATION_NAME = 'Eareckson/Shemya' OR " +
          "COUNTRY LIKE '%Guam%' )";

        return subExpression ? baseExpression + " AND (" + subExpression + ")" : baseExpression;
      }

      // Zooms to the extent of the layer as defined by
      // its definitionExpression
      // This method will work for all FeatureLayers, even
      // those without a saved `fullExtent` on the service.

      function zoomToLayer(layer) {
        return layer.queryExtent().then((response) => {
          viewElement.goTo(response.extent).catch((error) => {
            console.error(error);
          });
        });
      }
    </script>
  </body>
</html>