CIMSymbol not working correctly in Feature Layer

842
6
Jump to solution
07-14-2023 01:37 AM
PrashantR
New Contributor III

I have a feature layer and I have created a CIMSymbol with two symbol layers. First is the CIMPictureMarker for background image and second is the CIMTextSymbol to show text on top of that background image. 

When there are multiple features on the map and if their symbols overlap on the map then the text symbol layer of the first symbol overlaps the second symbol and you can see the text from one feature on the symbol of another feature. As you can see below.

 

image.png image.png

Any idea how we can fix this?

I have added the code below. 

 

<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>CIMSymbol | Sample | ArcGIS Maps SDK for JavaScript 4.26</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #sampleInstructions {
      padding: 10px;
      background-color: white;
      width: 300px;
    }

    #topbar {
      background: #fff;
      position: absolute;
      top: 15px;
      right: 15px;
      padding: 10px;
      align-items: center;
      display: flex;
      flex-flow: row nowrap;
    }

    .action-button {
      margin-right: 5px;
      font-size: 16px;
      background-color: transparent;
      border: 1px solid #d3d3d3;
      color: #6e6e6e;
      height: 32px;
      width: 32px;
      text-align: center;
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
      font-family: Arial;
    }

    .action-button:hover,
    .action-button:focus {
      background: #0079c1;
      color: #e4e4e4;
    }

    .active {
      background: #0079c1;
      color: #e4e4e4;
    }
  </style>

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

  <script>
    require([
      "esri/views/MapView",
      "esri/Map",
      "esri/widgets/Sketch/SketchViewModel",
      "esri/widgets/Expand",
      "esri/Graphic",
      "esri/layers/GraphicsLayer",
      "esri/layers/FeatureLayer"
    ], (MapView, Map, SketchViewModel, Expand, Graphic, GraphicsLayer, FeatureLayer) => {

      let picture1 = "data&colon;image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9Ijk0cHgiIGhlaWdodD0iOTBweCIgdmlld0JveD0iMCAwIDk0IDkwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDx0aXRsZT4wMDY5QzVENi1GNEFDLTQxRUUtODNBQi02RkQ2MDk1RUQzMzg8L3RpdGxlPg0KICAgIDxnIGlkPSJFeHRlbmRlZC1MYWJlbC1GbGlnaHQtYW5kLUFpcnBvcnRzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPGcgaWQ9IkZsaWdodC0mYW1wOy1BaXJwb3J0LUxhYmVscy1TVkdzLWZvci1FeHRlbmRlZC1MYWJlbHMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01OS4wMDAwMDAsIC01OTIuMDAwMDAwKSIgZmlsbD0iIzc0NiI+DQogICAgICAgICAgICA8cGF0aCBkPSJNNjAsNTkyIEwxNTIsNTkyIEMxNTIuNTUyMjg1LDU5MiAxNTMsNTkyLjQ0NzcxNSAxNTMsNTkzIEwxNTMsNjgxIEMxNTMsNjgxLjU1MjI4NSAxNTIuNTUyMjg1LDY4MiAxNTIsNjgyIEw2MCw2ODIgQzU5LjQ0NzcxNTMsNjgyIDU5LDY4MS41NTIyODUgNTksNjgxIEw1OSw2MTguNDA1NDgxIEw1OSw1OTMgQzU5LDU5Mi40NDc3MTUgNTkuNDQ3NzE1Myw1OTIgNjAsNTkyIFoiIGlkPSJQYXBlci1Db3B5LTEwIj48L3BhdGg+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4=";
      let picture2 = "data&colon;image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9Ijk0cHgiIGhlaWdodD0iOTBweCIgdmlld0JveD0iMCAwIDk0IDkwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDx0aXRsZT4wMDY5QzVENi1GNEFDLTQxRUUtODNBQi02RkQ2MDk1RUQzMzg8L3RpdGxlPg0KICAgIDxnIGlkPSJFeHRlbmRlZC1MYWJlbC1GbGlnaHQtYW5kLUFpcnBvcnRzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPGcgaWQ9IkZsaWdodC0mYW1wOy1BaXJwb3J0LUxhYmVscy1TVkdzLWZvci1FeHRlbmRlZC1MYWJlbHMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC01OS4wMDAwMDAsIC01OTIuMDAwMDAwKSIgZmlsbD0iIzM2NiI+DQogICAgICAgICAgICA8cGF0aCBkPSJNNjAsNTkyIEwxNTIsNTkyIEMxNTIuNTUyMjg1LDU5MiAxNTMsNTkyLjQ0NzcxNSAxNTMsNTkzIEwxNTMsNjgxIEMxNTMsNjgxLjU1MjI4NSAxNTIuNTUyMjg1LDY4MiAxNTIsNjgyIEw2MCw2ODIgQzU5LjQ0NzcxNTMsNjgyIDU5LDY4MS41NTIyODUgNTksNjgxIEw1OSw2MTguNDA1NDgxIEw1OSw1OTMgQzU5LDU5Mi40NDc3MTUgNTkuNDQ3NzE1Myw1OTIgNjAsNTkyIFoiIGlkPSJQYXBlci1Db3B5LTEwIj48L3BhdGg+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4="

      let feature1 = {
        geometry: { type: "point", latitude: 45.29, longitude: 122.12 },
        attributes: { text: 123, type: "A" }
      }
      let feature2 = {
        geometry: { type: "point", latitude: 43.29, longitude: 122.12 },
        attributes: { text: 456, type: "B" }
      }

      const featureLayer = new FeatureLayer({
        source: [feature1, feature2],
        fields: [
          { name: "ObjectID", alias: "ObjectID", type: "oid" },
          { name: "text", type: "string" },
          { name: "type", type: "string" }
        ],
        renderer: {
          type: "unique-value",
          field: "type",
          uniqueValueInfos: [
            { value: "A", symbol: { type: "cim", data: getCIMSymbolData(picture1) } },
            { value: "B", symbol: { type: "cim", data: getCIMSymbolData(picture2) } },
          ]
        },
        objectIdField: "ObjectID",
        geometryType: "point"
      });

      const map = new Map({ basemap: "gray-vector", layers: [featureLayer] });
      const view = new MapView({ container: "viewDiv", map: map, center: [106.79, 38.23], zoom: 3 });

      function getCIMSymbolData(myUrl) {
        return {
          type: "CIMSymbolReference",
          primitiveOverrides: [
            {
              type: "CIMPrimitiveOverride",
              primitiveName: "myText",
              propertyName: "TextString", // Should be in camel case
              valueExpressionInfo: {
                type: "CIMExpressionInfo",
                title: "Pirep elevation text/number to show on pirep symbol",
                expression: "$feature.text", // value of textString will be based on the NAME of the feature
                returnType: "Default"
              }
            }
          ],
          symbol: {
            type: "CIMPointSymbol",
            symbolLayers: [
              {
                type: "CIMPictureMarker",
                enable: true,
                anchorPoint: { x: 0, y: 0 },
                size: 30,
                scaleX: 1,
                tintColor: [255, 255, 255, 255],
                url: myUrl
              },
              {
                type: "CIMVectorMarker",
                enable: true,
                size: 10,
                colorLocked: true,
                anchorPointUnits: "Relative",
                frame: { xmin: -5, ymin: -5, xmax: 5, ymax: 5 },
                markerGraphics: [
                  {
                    type: "CIMMarkerGraphic",
                    primitiveName: "myText",
                    geometry: { "x": 0, "y": 0 },
                    symbol: {
                      type: "CIMTextSymbol",
                      fontFamilyName: "Arial",
                      fontStyleName: "Bold",
                      height: 10,
                      size: 12,
                      horizontalAlignment: "Center",
                      offsetX: 0,
                      offsetY: -10,
                      symbol: {
                        type: "CIMPolygonSymbol",
                        symbolLayers: [
                          {
                            "type": "CIMSolidFill",
                            "enable": true,
                            "color": [255, 255, 255, 255]
                          }
                        ]
                      },
                      verticalAlignment: "Center",
                    },
                    textString: ""
                  }
                ],
                scaleSymbolsProportionally: true,
                respectFrame: true
              }
            ]
          }
        };
      }
    });
  </script>
</head>

<body>
  <div id="viewDiv">
    <div id="topbar">
      <button class="action-button" id="pointButtonNumber" type="button" title="Draw point with number">1</button>
      <button class="action-button" id="pointButtonLetter" type="button" title="Draw point with letter">A</button>
      <button class="action-button esri-icon-trash" id="resetBtn" type="button" title="Clear graphics"></button>
    </div>
  </div>
</body>

</html>
 
 
Tags (2)
0 Kudos
1 Solution

Accepted Solutions
PrashantR
New Contributor III

@JoelBennettThanks for the replies. I guess we'll just have to wait for the fix.

One new observation, this issue is not there in the Graphics Layer. So I switched to it for now 🙂

View solution in original post

6 Replies
JoelBennett
MVP Regular Contributor

It seems likely this is the same underlying issue described in this thread.  If that's the case, there may be a fix in the next release.

0 Kudos
PrashantR
New Contributor III

@JoelBennettYes, seems like it's the same issue. Could there be any workaround for this? I just need to create a symbol with a picture marker and text on top of it?

0 Kudos
JoelBennett
MVP Regular Contributor

I haven't attempted a workaround, so can't say for certain, but what you've suggested sounds like a good starting point.

0 Kudos
PrashantR
New Contributor III

@JoelBennettThanks for the replies. I guess we'll just have to wait for the fix.

One new observation, this issue is not there in the Graphics Layer. So I switched to it for now 🙂

AnneFitz
Esri Regular Contributor

Hi @PrashantR - this is currently a limitation with our current FeatureLayer implementation, the symbol text will always render on top. GraphicsLayer is a great alternative, especially if you are only rendering a few manually defined graphics, like in your code example above. 

0 Kudos
PrashantR
New Contributor III

When can we expect this issue to be resolved?

0 Kudos