CIMSymbol not working correctly in Feature Layer

PrashantR — Fri, 14 Jul 2023 08:37:48 GMT

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.

Any idea how we can fix this?

I have added the code below.

<head>

<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>

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>

</body>

</html>

Re: CIMSymbol not working correctly in Feature Layer

JoelBennett — Fri, 14 Jul 2023 23:46:56 GMT

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.

Re: CIMSymbol not working correctly in Feature Layer

PrashantR — Sun, 16 Jul 2023 20:47:37 GMT

@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?

Re: CIMSymbol not working correctly in Feature Layer

JoelBennett — Mon, 17 Jul 2023 17:18:54 GMT

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

Re: CIMSymbol not working correctly in Feature Layer

PrashantR — Tue, 18 Jul 2023 07:59:40 GMT

@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 🙂

Re: CIMSymbol not working correctly in Feature Layer

AnneFitz — Thu, 20 Jul 2023 21:16:52 GMT

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.

Re: CIMSymbol not working correctly in Feature Layer

PrashantR — Mon, 05 Feb 2024 19:37:09 GMT

When can we expect this issue to be resolved?

topic Re: CIMSymbol not working correctly in Feature Layer in ArcGIS JavaScript Maps SDK Questions

CIMSymbol not working correctly in Feature Layer

Re: CIMSymbol not working correctly in Feature Layer

Re: CIMSymbol not working correctly in Feature Layer

Re: CIMSymbol not working correctly in Feature Layer

Re: CIMSymbol not working correctly in Feature Layer

Re: CIMSymbol not working correctly in Feature Layer

Re: CIMSymbol not working correctly in Feature Layer