Create a FeatureLayer with client-side graphics | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

This sample shows how to create a FeatureLayer from client-side graphics. The graphics are created from GPS data extracted from the EXIF data of a set of images.

Creating a FeatureLayer with client-side graphics requires the following steps:

Set an array of graphics on the FeatureLayer.source property. All graphics must have the same geometry type.
Specify an array of field objects, which provide the schema (name, alias, and type) of each attribute field.
Set the objectID field property to a field containing unique IDs for each feature in the source property.

Once the requirements outlined above are set on the layer, other layer properties (e.g. renderer and popupTemplate) may be set allowing you to leverage the benefits of a FeatureLayer, such as client-side querying and fast visual updates.

const layer = new FeatureLayer({
  source: graphics, // array of graphics objects
  objectIdField: "OBJECTID",
  fields: [
    {
      name: "OBJECTID",
      type: "oid",
    },
    {
      name: "url",
      type: "string",
    },
  ],
  popupTemplate: {
    content: "<img src='{url}'>",
  },
  renderer: {
    // overrides the layer's default renderer
    type: "simple",
    symbol: {
      type: "text",
      color: "#7A003C",
      text: "\ue661",
      font: {
        size: 20,
        family: "CalciteWebCoreIcons",
      },
    },
  },
});

map.add(layer);

<!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>Create a FeatureLayer with client-side graphics | 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>

    <!-- Library for for reading EXIF data from image files
    See https://github.com/exif-js/exif-js for more information -->
    <script src="https://cdn.jsdelivr.net/npm/exif-js"></script>

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

  <body>
    <arcgis-map basemap="gray-vector">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-popup slot="popup"></arcgis-popup>
    </arcgis-map>

    <script type="module">
      const [FeatureLayer, promiseUtils, Graphic, Point, locator] = await $arcgis.import([
        "@arcgis/core/layers/FeatureLayer.js",
        "@arcgis/core/core/promiseUtils.js",
        "@arcgis/core/Graphic.js",
        "@arcgis/core/geometry/Point.js",
        "@arcgis/core/rest/locator.js",
      ]);

      const viewElement = document.querySelector("arcgis-map");
      await viewElement.viewOnReady();

      // set the view extent to show the area where photos were taken
      viewElement.extent = {
        spatialReference: {
          wkid: 102100,
        },
        xmin: -14488954,
        ymin: 3457304,
        xmax: -10656095,
        ymax: 5250211,
      };

      // Configure the popup to dock so it doesn't cover points
      const popupComponent = document.querySelector("arcgis-popup");
      popupComponent.dockEnabled = true;
      popupComponent.dockOptions = {
        position: "top-right",
        breakpoint: false,
      };
      // Main async function to fetch images, create graphics,
      // create the FeatureLayer and add it to the map
      try {
        const images = await fetchImages();
        const features = getFeaturesFromPromises(images);
        const layer = createLayer(features);
        viewElement.map.add(layer);
      } catch (e) {
        console.error("Creating FeatureLayer from photos failed", e);
      }

      /**
       * Fetches a list of images and returns a list of promises
       */
      function fetchImages() {
        const numPhotos = 18;
        const graphicPromises = [];
        const baseUrl =
          "https://arcgis.github.io/arcgis-samples-javascript/sample-data/featurelayer-collection/photo-";

        for (let i = 1; i <= numPhotos; i++) {
          const url = baseUrl + i.toString() + ".jpg";
          const graphicPromise = exifToGraphic(url, i);
          graphicPromises.push(graphicPromise);
        }

        return promiseUtils.eachAlways(graphicPromises);
      }

      // Filters only promises that resolve with valid values (a graphic
      // in this case) and resolves them as an array of graphics.
      // In other words, each attempt at fetching an image returns a promise.
      // Images that fail to fetch will be filtered out of the response array
      // so the images that successfully load can be added to the layer.
      function getFeaturesFromPromises(eachAlwaysResponses) {
        return eachAlwaysResponses
          .filter((graphicPromise) => {
            return graphicPromise.value;
          })
          .map((graphicPromise) => {
            return graphicPromise.value;
          });
      }

      //  Creates a client-side FeatureLayer from an array of graphics
      function createLayer(graphics) {
        return new FeatureLayer({
          source: graphics,
          objectIdField: "OBJECTID",
          fields: [
            {
              name: "OBJECTID",
              type: "oid",
            },
            {
              name: "url",
              type: "string",
            },
          ],
          popupTemplate: {
            title: (event) => {
              return locator
                .locationToAddress({
                  location: event.graphic.geometry,
                })
                .then((response) => {
                  return response.address;
                })
                .catch((error) => {
                  return "The middle of nowhere";
                });
            },
            content: "<img src='{url}'>",
          },
          renderer: {
            type: "simple",
            symbol: {
              type: "text",
              color: "#7A003C",
              text: "\ue661",
              font: {
                size: 20,
                family: "CalciteWebCoreIcons",
              },
            },
          },
        });
      }

      /**
       * Fetches and loads an image from a url and gets the latitude/longitude
       * GPS data from the EXIF data of the image. Returns a promise that
       * resolves to a Graphic with a point geometry representing the location
       * where the photo was taken.
       */
      function exifToGraphic(url, id) {
        return new Promise((resolve, reject) => {
          const image = document.createElement("img");
          image.src = url;
          image.onload = () => {
            image.load = image.onerror = null;
            EXIF.getData(image, function () {
              const latitude = EXIF.getTag(this, "GPSLatitude");
              const latitudeDirection = EXIF.getTag(this, "GPSLatitudeRef");
              const longitude = EXIF.getTag(this, "GPSLongitude");
              const longitudeDirection = EXIF.getTag(this, "GPSLongitudeRef");

              if (!latitude || !longitude) {
                reject(new Error("Photo doesn't contain GPS information: ", this.src));
                return;
              }

              const location = new Point({
                latitude: dmsDD(latitude, latitudeDirection),
                longitude: dmsDD(longitude, longitudeDirection),
              });

              resolve(
                new Graphic({
                  geometry: location,
                  attributes: {
                    url: url,
                    OBJECTID: id,
                  },
                }),
              );
            });
          };

          image.onerror = () => {
            image.load = image.onerror = null;
            reject(new Error("Error while loading the image"));
          };
        });
      }

      // Converts a DMS coordinate to decimal degrees
      function dmsDD([degrees, minutes, seconds], direction) {
        let dd = degrees + minutes / 60 + seconds / 3600;
        if (direction === "S" || direction === "W") {
          dd *= -1;
        }
        return dd;
      }
    </script>
  </body>
</html>