Highlight features with FeatureFilter | Sample | ArcGIS Maps SDK for JavaScript

This sample shows how to highlight features by passing a FeatureFilter to a layer view’s highlight() method. With this approach, matching features continue to be highlighted as they become available while you navigate the map.

The street tree data in this sample comes from the 2015 Street Tree Census, available through NYC Open Data.

How it works

Highlight features within a circle

As you move the pointer over the map, a circular buffer with a 250-meter radius is created around it. Trees that intersect the circle are highlighted and corresponding tree statistics are shown in the sidebar. These statistics show the tree count, average trunk diameter, health counts, and top five species for that area. You can change the radius to 150 or 500 meters using the radius drop down. The statistics query returns summary values, but not the object IDs or features needed to highlight individual trees. Highlighting the trees included in the statistics with a feature filter removes the need for a second query to get their object IDs.

      // Update the buffer circle, highlight intersecting trees and run
      // tree statistics when the pointer moves, the map is clicked, or the radius changes
      function moveBuffer(center) {
        bufferGeometry = new Circle({
          center,
          radius: Number(radiusSelect.value),
          radiusUnit: "meters",
          geodesic: true,
          numberOfPoints: 60,
        });

        bufferGraphic.geometry = bufferGeometry;
        areaHighlightHandle?.remove();

        // Highlight trees that intersect the buffer circle
        areaHighlightHandle = layerView.highlight(
          new FeatureFilter({
            geometry: bufferGeometry,
            spatialRelationship: "intersects",
          }),
        );

        // Refresh the criteria highlight to match the current buffer geometry
        // For example, increasing radius to 500m must also highlight trees matching the criteria
        highlightMatchingTrees();

        // Update the tree statistics for the current buffer area
        return updateStatistics(bufferGeometry);
      }

Combine spatial and attribute criteria

You can click the map to keep the buffer at that location, then hover over a health category or species in the sidebar to highlight matching trees. Moving the pointer away from the item clears this preview. Click an item to keep its matching trees highlighted. Click the selected item again to clear the selection, or click another item in either list to highlight its matching trees instead. When you’re ready to explore another area, click the map again to let the buffer follow the pointer.

      // Refresh the health or species highlight for list previews, selections, and buffer changes
      function highlightMatchingTrees(where = selectedWhere) {
        // Do not let a hover preview replace the selected criteria
        if (selectedWhere !== "1=1" && where !== selectedWhere) {
          return;
        }

        criteriaHighlightHandle?.remove();
        criteriaHighlightHandle = null;

        // Highlight a specific health category or species, whether previewed or selected
        if (where !== "1=1") {
          criteriaHighlightHandle = layerView.highlight(
            new FeatureFilter({
              where,
              geometry: bufferGeometry,
              spatialRelationship: "intersects",
            }),
            {
              name: "temporary",
            },
          );
        }
      }