CIM Symbol not drawing in JS Maps SDK app

EricErtl

I am having issues getting the CIM Symbol to render in a JS app.  I am using version 4.26 and just copied the json from the CIM  Symbol Builder directly.  There are no errors in the console but nothing renders on the map or in the legend.  Is there something wrong with the symbol json?

Below is the symbol code and below that is the renderer definition within the feature layer.

const mySymbol = new CIMSymbol({
    "data": {
      "type": "CIMSymbolReference",
      "symbol": {
        "type": "CIMPointSymbol",
        "symbolLayers": [
          {
            "type": "CIMVectorMarker",
            "enable": true,
            "anchorPointUnits": "Relative",
            "dominantSizeAxis3D": "Y",
            "size": 14,
            "billboardMode3D": "FaceNearPlane",
            "frame": {
              "xmin": 0,
              "ymin": 0,
              "xmax": 20.64,
              "ymax": 17
            },
            "markerGraphics": [
              {
                "type": "CIMMarkerGraphic",
                "geometry": {
                  "rings": [ [ [ 0, 9.71 ], [ 10.32, 17 ], [ 20.64, 9.71 ], [ 17, 0 ], [ 3.64, 0 ], [ 0, 9.71 ] ] ]
                },
                "symbol": {
                  "type": "CIMPolygonSymbol",
                  "symbolLayers": [
                    {
                      "type": "CIMSolidStroke",
                      "enable": true,
                      "capStyle": "Round",
                      "joinStyle": "Miter",
                      "lineStyle3D": "Strip",
                      "miterLimit": 10,
                      "width": 1,
                      "color": [ 163, 171, 215, 255 ]
                    },
                    {
                      "type": "CIMSolidFill",
                      "enable": true,
                      "color": [ 51, 97, 204, 255 ]
                    }
                  ]
                }
              }
            ],
            "scaleSymbolsProportionally": true,
            "respectFrame": true
          }
        ]
      }
    }
  });

 

const myFeatureLayer = new FeatureLayer({
    url: "urlToFeatureLayer/FeatureServer/0",
    title: "My Layer",
    visible: true,
    renderer: {
      type: 'simple',
      symbol: {
        type: 'cim',
        mySymbol
      }
    },
  });

 

JoelBennett

The symbol definition looks good, but maybe try this instead when creating the FeatureLayer:

const myFeatureLayer = new FeatureLayer({
    url: "urlToFeatureLayer/FeatureServer/0",
    title: "My Layer",
    visible: true,
    renderer: {
      type: 'simple',
      symbol: mySymbol
    },
  });