Create a FeatureLayer with client-side graphics

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:

1. Set an array of graphics on the FeatureLayer.source property. All graphics must have the same geometry type.
2. Specify an array of field objects, which provide the schema (name, alias, and type) of each attribute field.
3. 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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);