Cartographic Information Model (CIMS)
CIMSymbols are used to display multi-layer vector symbols for features and graphics. They allow the user to add more customizations to their symbols, using one or more symbol layers to create the desired effect on the symbol. CIMSymbols can be created from CIMSymbolReference JSON that complies with the CIM specification by passing the JSON to the data property. CIMSymbols can also be created from WebStyleSymbols, using WebStyleSymbol.fetchCIMSymbol().
References
- https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-CIMSymbol.html
- https://developers.arcgis.com/javascript/latest/sample-code/cim-symbols/
- https://esri.github.io/cim-symbol-builder-js/
- https://github.com/Esri/cim-spec/blob/master/docs/v2/CIMRenderers.md
- https://github.com/Esri/cim-spec/blob/master/docs/v2/Types.md
Examples
Unique value renderer with colored pins
The following example will add in-memory point data to the map with CIMS marker pins with different colors based on the unique values of the type field.
function toVectorPin(color) {
return {
type: 'cim',
data: {
type: 'CIMSymbolReference',
symbol: {
type: 'CIMPointSymbol',
symbolLayers: [
{
type: 'CIMVectorMarker',
enable: true,
anchorPoint: { x: 0, y: -0.5 },
anchorPointUnits: 'Relative',
dominantSizeAxis3D: 'Z',
size: 20.41,
billboardMode3D: 'FaceNearPlane',
frame: {
xmin: 0,
ymin: 0,
xmax: 45.9,
ymax: 61.6
},
markerGraphics: [
{
type: 'CIMMarkerGraphic',
geometry: {
rings: [
[
[22.9, 22.1],
[20, 22.3],
[17.3, 23.1],
[14.7, 24.2],
[12.3, 25.9],
[10.2, 27.8],
[8.5, 30.1],
[7.2, 32.7],
[6.4, 35.5],
[6, 38.3],
[6, 39],
[6.2, 41.7],
[6.8, 44.2],
[7.8, 46.7],
[9.2, 49],
[10.9, 51],
[12.9, 52.7],
[15.2, 54.1],
[17.7, 55.2],
[20.2, 55.8],
[22.9, 56],
[25.8, 55.7],
[28.7, 55],
[31.4, 53.7],
[33.8, 52],
[35.9, 50],
[37.6, 47.5],
[38.8, 44.9],
[39.6, 42],
[39.9, 39.1],
[39.6, 36.2],
[38.9, 33.3],
[37.6, 30.6],
[35.9, 28.2],
[33.8, 26.1],
[31.4, 24.4],
[28.7, 23.1],
[25.8, 22.4],
[22.9, 22.1]
],
[
[21.9, 0],
[27, 3.9],
[31.9, 8.5],
[36.2, 13.4],
[39.7, 18.4],
[42.4, 23.4],
[44.3, 28.5],
[45.5, 33.6],
[45.9, 38.7],
[45.5, 42.7],
[44.5, 46.5],
[42.8, 50.1],
[40.5, 53.4],
[37.6, 56.2],
[34.4, 58.5],
[30.7, 60.2],
[26.9, 61.2],
[22.9, 61.6],
[19.3, 61.3],
[15.8, 60.5],
[12.5, 59.1],
[9.4, 57.2],
[6.7, 54.9],
[4.4, 52.2],
[2.5, 49.1],
[1.1, 45.8],
[0.3, 42.3],
[0, 38.7],
[0.4, 33.5],
[1.4, 28.4],
[3.2, 23.3],
[5.7, 18.3],
[8.9, 13.3],
[12.8, 8.4],
[17.3, 3.8],
[21.9, 0]
]
]
},
symbol: {
type: 'CIMPolygonSymbol',
symbolLayers: [
{
type: 'CIMSolidFill',
enable: true,
color: color
}
]
}
}
],
scaleSymbolsProportionally: true,
respectFrame: true,
clippingPath: {
type: 'CIMClippingPath',
clippingType: 'Intersect',
path: {
rings: [
[
[0, 0],
[45.9, 0],
[45.9, 61.6],
[0, 61.6],
[0, 0]
]
]
}
},
offsetX: null,
offsetY: null,
rotation: 0
}
],
haloSize: 1,
scaleX: 1,
angleAlignment: 'Display',
angle: 0
}
}
};
}
postMessage(
{
source: 'SAM',
eventName: 'add-data',
data: {
zoomToExtent: true,
replaceExisting: true,
layer: {
id: 'sample-points',
title: 'Sample Point Data',
geometryType: 'point',
objectIdField: 'id',
renderer: {
type: 'unique-value',
field: 'type',
defaultSymbol: toVectorPin([255, 64, 64, 255]),
uniqueValueInfos: [
{
value: 'WorkOrder',
symbol: toVectorPin([255, 64, 64, 255])
},
{
value: 'Notification',
symbol: toVectorPin([215, 181, 16, 255])
},
{
value: 'Equipment',
symbol: toVectorPin([184, 54, 227, 255])
},
{
value: 'floc',
symbol: toVectorPin([54, 114, 223, 255])
}
]
},
fields: [
{
name: 'id',
type: 'string',
alias: 'ID',
length: 12
},
{
name: 'type',
type: 'string',
alias: 'Type',
length: 40
}
]
},
source: [
{
attributes: {
id: '1',
type: 'WorkOrder'
},
geometry: { x: -72, y: 42 }
},
{
attributes: {
id: '2',
type: 'WorkOrder'
},
geometry: { x: -72.001, y: 42.001 }
},
{
attributes: {
id: '3',
type: 'Notification'
},
geometry: { x: -72.002, y: 42.002 }
},
{
attributes: {
id: '4',
type: 'floc'
},
geometry: { x: -72.02, y: 42.02 }
},
{
attributes: {
id: '5',
type: 'Equipment'
},
geometry: { x: -72.01, y: 42.01 }
}
]
}
},
'*'
);