CIMSymbol - Z-order not working correctly

PrashantR — Mon, 05 Feb 2024 20:52:59 GMT

In SymbolLayers array of the CIMSymbol, the z order of of the symbol layers is in the order in which they are situated in the array. The symbol at index 0 will be drawn on top of others but this does not apply when it comes to Text or the Text along with background callout.

As shown in below example, though the tree symbol is at index 0 in the layers still it is drawn below the text and the text background. There is no option to draw anything on top of the text background.

Code:

=====================================================

<head>

<title>CIMSymbol | Sample | ArcGIS Maps SDK for JavaScript 4.28</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 feature = { geometry: { type: "point", latitude: 29.29, longitude: 142.12 } }

const featureLayer = new FeatureLayer({

source: [feature],

fields: [

{ name: "ObjectID", alias: "ObjectID", type: "oid" }

renderer: {

type: "simple",

symbol: { type: "cim", data: getCIMSymbolData() }

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() {

return {

type: "CIMSymbolReference",

symbol: {

"type": "CIMPointSymbol",

"symbolLayers": [

{

"type": "CIMVectorMarker",

"enable": true,

"anchorPointUnits": "Relative",

"dominantSizeAxis3D": "Y",

"size": 70,

"billboardMode3D": "FaceNearPlane",

"frame": {

"xmin": 0,

"ymin": 0,

"xmax": 21,

"ymax": 21

"markerGraphics": [

{

"type": "CIMMarkerGraphic",

"geometry": {

"rings": [

[

15,

[

12,

[

16,

[

13,

[

17,

[

11,

[

11,

[

10,

[

10,

[

10.5,

[

15,

]

"symbol": {

"type": "CIMPolygonSymbol",

"symbolLayers": [

{

"type": "CIMSolidStroke",

"enable": true,

"capStyle": "Round",

"joinStyle": "Round",

"lineStyle3D": "Strip",

"miterLimit": 10,

"width": 0,

"color": [

255

]

{

"type": "CIMSolidFill",

"enable": true,

"color": [

255,

255

]

}

]

}

"scaleSymbolsProportionally": true,

"respectFrame": true

{

"type": "CIMVectorMarker",

"enable": true,

"size": 9,

"colorLocked": true,

"anchorPointUnits": "Relative",

"frame": {

"xmin": -5,

"ymin": -5,

"xmax": 5,

"ymax": 5

"markerGraphics": [

{

"type": "CIMMarkerGraphic",

"geometry": {

"x": 0,

"y": 0

"symbol": {

"type": "CIMTextSymbol",

"fontFamilyName": "Arial",

"fontStyleName": "Regular",

"height": 9,

"horizontalAlignment": "Left",

"offsetX": 0,

"offsetY": 0,

"symbol": {

"type": "CIMPolygonSymbol",

"symbolLayers": [

{

"type": "CIMSolidFill",

"enable": true,

"color": [255, 255, 255, 255]

}

]

"verticalAlignment": "Center",

"callout": {

"type": "CIMBackgroundCallout",

"backgroundSymbol": {

"type": "CIMPolygonSymbol",

"symbolLayers": [

{

"type": "CIMSolidFill",

"enable": true,

"color": [37, 15, 20, 255]

}

]

}

"textString": "THIS IS A TEST \nSYMBOL"

}

"scaleSymbolsProportionally": true,

"respectFrame": true,

"offsetX": 0,

"offsetY": 0

]

}

};

}

});

</script>

</head>

<body>

</div>

</body>

</html>

Re: CIMSymbol - Z-order not working correctly

AnneFitz — Tue, 06 Feb 2024 00:21:16 GMT

Unfortunately, this is a limitation of FeatureLayer. CIMSymbols within a FeatureLayer will render the symbol layers in the following order from top to bottom for performance reasons, regardless of the order they are defined within the symbol.

CIMTextSymbol embedded within a CIMVectorMarker symbol layer
Marker symbols - CIMVectorMarker and CIMPictureMarker
Stroke symbols - CIMSolidStroke and CIMPictureStroke
Fill symbols - CIMSolidFill, CIMHatchFill, and CIMPictureFill

It should render as expected in a GraphicsLayer in our `/next` version of the API which is planned for release later this month.

Re: CIMSymbol - Z-order not working correctly

Amir-Sarrafzadeh-Arasi — Tue, 06 Feb 2024 08:35:55 GMT

Dear Vicky,

I hope you are doing well,

I have attached a sample json file in zip format in the attachment.

Hope it helps.

topic Re: CIMSymbol - Z-order not working correctly in ArcGIS JavaScript Maps SDK Questions

CIMSymbol - Z-order not working correctly

Re: CIMSymbol - Z-order not working correctly

Re: CIMSymbol - Z-order not working correctly