OGCFeatureLayer | Sample | ArcGIS Maps SDK for JavaScript

This sample shows how to access an OGC API Features service using an OGCFeatureLayer. The Portuguese Hydrographic Institute’s service Aids to Navigation (ATON) collection is used. Since this layer type brings the data in as features, you can perform your own rendering, labeling, and clustering.

Highlight features using featureEffect

The featureEffect property allows one to emphasize different maritime navigational aids (NAVAIDs) by type (e.g., Buoy, WindFloat, Raised Light Structure, Ocean Data Acquisition System).

      // Handle changes to the navigational aid dropdown.
      const applyFeatureEffect = async ({ target: { value } }) => {
        popupElement.open = false;

        if (!value) {
          layerView.featureEffect = null; // Clear the filter.
          return;
        }

        // Lower the opacity on all features that don't match the selected navigational aid.
        layerView.featureEffect = {
          filter: { where: sqlWhereClauses[value] },
          excludedEffect: "opacity(20%)",
        };
      };

The renderer uses a unique WebStyleSymbol for each NAVAID type, and the popup displays key attributes with null-safe Arcade expressions for height and altitude. Note that the url and collectionId properties are required when creating a new OGCFeatureLayer.

      // Create the layer with a renderer and popup configuration.
      const layer = new OGCFeatureLayer({
        url: "https://api-features.hidrografico.pt", // This service hosts Portuguese maritime navigational aid data.
        collectionId: "aton", // Set the unique ID of the desired data set.
        renderer: {
          type: "unique-value", // autocasts as new UniqueValueRenderer()
          valueExpression,
          // Define a unique WebStyleSymbol for each navigational aid type.
          uniqueValueInfos: [
            {
              value: "Buoy",
              symbol: { type: "web-style", styleUrl: shapeStyleUrl, name: "Circle 3_Shapes_3" },
            },
            {
              value: "Ocean Data Acquisition System",
              symbol: { type: "web-style", styleUrl: shapeStyleUrl, name: "Rectangle" },
            },
            {
              value: "Raised Light Structure",
              symbol: { type: "web-style", styleUrl: nauticalStyleUrl, name: "Lighthouse 1" },
            },
            {
              value: "WindFloat",
              symbol: { type: "web-style", styleUrl: shapeStyleUrl, name: "Triangle 3_Shapes_3" },
            },
            {
              value: "Other",
              symbol: { type: "web-style", styleUrl: shapeStyleUrl, name: "asterisk " },
            },
          ],
        },
        popupTemplate: {
          title: "{title}",
          content: [
            // Detail the feature using dynamic Arcade expressions.
            {
              type: "text",
              text: `This structure is {expression/altitude} meters above sea level and {expression/height} meters tall.`,
            },
            // Display key feature attributes in tabular format.
            {
              type: "fields",
              fieldInfos: [
                { fieldName: "no_nac", label: "National Number" },
                { fieldName: "desc", label: "Original Description (Portuguese)" },
                { fieldName: "foto_url", label: "Photo URL" },
              ],
            },
          ],
          // Assign "unknown" to nullish attributes to prevent blank spots in the popup introduction.
          expressionInfos: [
            { name: "altitude", expression: "DefaultValue($feature.alt_m, 'unknown')" },
            { name: "height", expression: "DefaultValue($feature.hgt_m, 'unknown')" },
          ],
        },
        // Provide copyright information for the data source.
        copyright:
          "<a href='https://www.hidrografico.pt/' target='_blank'>Instituto Hidrográfico</a>",
      });