Editor widget only display defaultSymbol from UniqueValueRenderer

[msyazreen]

Hi, I am new to community.

I'm reaching out to the ArcGIS community for support regarding an issue I'm experiencing with the Editor widget (JS API 4.25) and FeatureLayer. I'm trying to use the Editor widget to display military symbols, which I have created using a third-party library, on FeatureLayer.

The problem is that while the symbols I created from a JSON file are displayed correctly on the layer but on Editor widget, only defaultSymbol is being displayed. I'm uncertain about how to interpret and resolve this issue. To provide some context, I have included a snippet of the relevant code below:

Thanks in advance.

ps: please ignore lineLayerMilitary. 

var situation = {"name":"Layer","type":"FeatureCollection",
    "crs": {"type": "name","properties": {"name": "EPSG:4326"}},
    "features":[
      {"type":"Feature","geometry":{"type":"Point","coordinates":[13.9264527063343,56.2888907165595]},"properties":{"SIDC":"SFGPU------E***","name":"1.C2 komp","fullname":"1.C2 komp/FTS/INSS","command":"FTS"}}
      ,{"type":"Feature","geometry":{"type":"Point","coordinates":[19.1604869967705,65.5966818958909]},"properties":{"SIDC":"SFGPUCRV---F***","name":"1.Jbat","fullname":"1.Jbat/INSS","command":"INSS"}}
      ,{"type":"Feature","geometry":{"type":"Point","coordinates":[17.0825282191617,59.6410393541284]},"properties":{"SIDC":"SFGPUUMSE--F***","name":"1.TKbat","fullname":"1.TKbat/INSS","command":"INSS"}}]}

var unknown = new ms.Symbol("SFGPUUMSE--F***", { size: 15, square: true });
    var unknownUnit = new PictureMarkerSymbol({
      url: unknown.asCanvas(3).toDataURL(),
      width: Math.max(unknown.getSize().width),
      height: Math.max(unknown.getSize().height)
    });

    let uvrenderer = new UniqueValueRenderer({
      field: "name",
      defaultSymbol: unknownUnit
    });

var graphics = situation.features.map((feature, i) => {
      var unit = new ms.Symbol(feature.properties.SIDC, { size: 15, square: true });
      var unitSymbol = new PictureMarkerSymbol({
        url: unit.asCanvas(3).toDataURL(),
        width: Math.max(unit.getSize().width),
        height: Math.max(unit.getSize().height)
      });
      uvrenderer.addUniqueValueInfo(feature.properties.name,unitSymbol)
      return {
        geometry: new Point({
          x: feature.geometry.coordinates[0],
          y: feature.geometry.coordinates[1]
        }),
        symbol: unitSymbol,
        attributes: {
          ObjectID: i,
          name: feature.properties.name,
          SIDC: feature.properties.SIDC,
        }
      };
    });

const pointLayerMilitary = new FeatureLayer({
      id:'pointLayerMilId',
      outFields: ["*"],
      templates : [{
        "name" : "Military",
        "prototype" : {
          "attributes" : {
            title:null
          }
      }}],
      source:graphics,
      visible:true,
      geometryType: "point",
      fields: [{name: "ObjectID",alias: "ObjectID",type: "oid"}
        ,{name: "name",alias: "Name",type: "string"}
        ,{name: "SIDC",alias: "SIDC",type: "string"}
        ,{name: "command",alias: "Command",type: "string"}],
      objectIdField: "ObjectID",
      renderer: uvrenderer
    });
this._view.map.add(pointLayerMilitary);

const layerInfos = [{layer: lineLayerMilitary,pointLayerMilitary}];

    const editorMil = new Editor({
      label:'Military Symbology',
      headingLevel:2,
      visibleElements: {snappingControls: false},
      viewModel: new EditorVM({
        layerInfos:layerInfos,
        featureTemplatesViewModel: new FeatureTemplatesVM({
          layers: [lineLayerMilitary,pointLayerMilitary],
        }),
        view: this._view
      }),
    });
    this._view.ui.add(editorMil, "bottom-right");

[msyazreen]

here is my code in codepen. change to simple one using SimpleLineSymbol but still only defaultSymbol shown. i know im missing something...

https://codepen.io/msyazreen/pen/gOQPRVa?editors=100

[JoelBennett · Accepted solution]

By making the following changes to your codepen, it appears to work as you would expect:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!--
     ArcGIS Maps SDK for JavaScript, https://js.arcgis.com
     For more information about the widgets-editor-basic sample,
     read the original sample description at developers.arcgis.com.
     https://developers.arcgis.com/javascript/latest/sample-code/widgets-editor-basic/
     -->
    <title>
      Edit features with the Editor widget | Sample | ArcGIS Maps SDK for
      JavaScript 4.27
    </title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.27/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require([
        "esri/WebMap",
        "esri/views/MapView",
        "esri/widgets/Editor",
        "esri/renderers/UniqueValueRenderer",
        "esri/symbols/SimpleLineSymbol",
        "esri/layers/FeatureLayer",
        "esri/geometry/Point",
        "esri/Map"
      ], (
        WebMap,
        MapView,
        Editor,
        UniqueValueRenderer,
        SimpleLineSymbol,
        FeatureLayer,
        Point,
        Map
      ) => {
        var map = new Map({
          basemap: "topo-vector",
          ground: "world-elevation"
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [109.167953, 4.038615],
          zoom: 7,
        });

        let testrenderer = new UniqueValueRenderer({
          field: "msname",
          defaultSymbol: new SimpleLineSymbol({
            color: [236, 71, 71, 255],
            width: 2.25,
            style: "solid"
          }),
          uniqueValueInfos: [
            {
              label: "Full closure",
              value: "abc",
              symbol: new SimpleLineSymbol({
                color: [247, 81, 81, 255],
                width: 2.25,
                style: "solid"
              })
            },
            {
              label: "Partial closure",
              value: "def",
              symbol: new SimpleLineSymbol({
                color: [255, 170, 0, 255],
                width: 2.25,
                style: "solid"
              })
            }
          ]
        });

        let lineLayerMilitary = new FeatureLayer({
          templates: [
            {
              name: "Full Closure",
              prototype: {
                attributes: {
                  msname: "abc"
                }
              }
            },
            {
              name: "Partial Closure",
              prototype: {
                attributes: {
                  msname: "def"
                }
              }
            }
          ],
          source: [],
          visible: true,
          geometryType: "polyline",
          objectIdField: "ObjectID",
          renderer: testrenderer,
          fields: [
            {
              name: "ObjectID",
              alias: "ObjectID",
              type: "oid"
            },
            {
              name: "msname",
              alias: "msname",
              type: "string",
              domain: {
                type: "coded-value",
                name: "d_closure",
                codedValues: [
                  {
                    name: "Full Closure",
                    code: "abc"
                  },
                  {
                    name: "Partial Closure",
                    code: "def"
                  }
                ]
              }
            }
          ]
        });
        view.map.add(lineLayerMilitary);

        view.when(() => {
          const editor = new Editor({
            view: view,
            layerInfos: [
              {
                layer: lineLayerMilitary // pass in the feature layer,
              }
            ]
          });

          // Add the widget to the view
          view.ui.add(editor, "top-right");
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

[msyazreen]

Thank you! its appear! u really save my time!