CIM Symbol not drawing in JS Maps SDK app

382
2
Jump to solution
04-26-2023 09:30 AM
EricErtl
New Contributor III

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
      }
    },
  });

 

0 Kudos
1 Solution

Accepted Solutions
JoelBennett
MVP Regular Contributor

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
    },
  });

 

View solution in original post

2 Replies
JoelBennett
MVP Regular Contributor

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
    },
  });

 

EricErtl
New Contributor III

@JoelBennett - Thanks a ton!  I really appreciate the response - it worked.

0 Kudos