Need help with passing values to CIM symbols
I'm making an application that needs to display a feature layer with some complex symbols. The symbol needs to display an icon, a colored border, and some text. Here's an example:
I've written a function that creates the symbol. It takes three variables, color, symbol, and text. Feature layer I'm working with has values for those three variables. The problem I have is: how do I get those values from the feature layer to the CIMsymbol? I'm currently using a Unique Value Renderer, but that only allows me to send one value, which I'm currently using for the symbol. I looked into using a Dictionary Renderer but that seems to use key value pairs to select symbol parts, which means that I would have to make a colored border symbol for every color in the rainbow, and a text symbol for every text value in the layer. That's definitely unworkable as the text values and colors are input by users and change frequently.
What is the best way to hook my CIMSymbol up to my feature layer and pass the values it needs?
Here is the code for my function.
function getSymbol(color, symbol, text) {
return {
type: "CIMPointSymbol",
symbolLayers: [
{
type: "CIMVectorMarker",
enable: true,
anchorPointUnits: "Relative",
dominantSizeAxis3D: "Y",
size: 30,
billboardMode3D: "FaceNearPlane",
frame: {
xmin: 0,
ymin: 0,
xmax: 15,
ymax: 15
},
markerGraphics: [
{
type: "CIMMarkerGraphic",
geometry: {
rings: [[[0, 15], [15, 15], [15, 0], [0, 0], [0, 15]]]
},
symbol: {
type: "CIMPolygonSymbol",
symbolLayers: [
{
type: "CIMSolidStroke",
enable: true,
capStyle: "Round",
joinStyle: "Round",
lineStyle3D: "Strip",
miterLimit: 10,
width: 1,
color: color
},
]
}
}
],
scaleSymbolsProportionally: true,
respectFrame: true
},
{
type: "CIMPictureMarker",
enable: true,
anchorPoint: {"x": 0, "y": 0, "z": 0},
anchorPointUnits: "Relative",
dominantSizeAxis3D: "Y",
size: 30,
billboardMode3D: "FaceNearPlane",
invertBackfaceTexture: true,
scaleX: 1,
textureFilter: "Text",
tintColor: [255, 255, 255, 255],
url: symbol
},
{
type: "CIMVectorMarker",
enable: true,
size: 12,
colorLocked: true,
anchorPointUnits: "Relative",
frame: {
xmin: 0,
ymin: 0,
xmax: 15,
ymax: 15
},
markerGraphics: [
{
type: "CIMMarkerGraphic",
geometry: {
x: 0,
y: 0
},
symbol: {
type: "CIMTextSymbol",
fontFamilyName: "Arial",
fontStyleName: "Bold",
height: 10,
horizontalAlignment: "Center",
offsetX: 8,
offsetY: 37.5,
symbol: {
type: "CIMPolygonSymbol",
symbolLayers: [
{
type: "CIMSolidFill",
enable: true,
color: [
255,
255,
255,
255
]
}
]
},
verticalAlignment: "Center",
font: {
family: "Arial",
decoration: "none",
style: "normal",
weight: "bold"
}
},
textString: text
}
],
scaleSymbolsProportionally: true,
respectFrame: true
},
{
type: "CIMVectorMarker",
enable: true,
anchorPointUnits: "Relative",
dominantSizeAxis3D: "Y",
size: 30,
billboardMode3D: "FaceNearPlane",
frame: {
xmin: 0,
ymin: 0,
xmax: 15,
ymax: 15
},
markerGraphics: [
{
type: "CIMMarkerGraphic",
geometry: {
rings: [[[0, 5], [15, 5], [15, 0], [0, 0], [0, 5]]]
},
symbol: {
type: "CIMPolygonSymbol",
symbolLayers: [
{
type: "CIMSolidStroke",
enable: true,
capStyle: "Round",
joinStyle: "Round",
lineStyle3D: "Strip",
miterLimit: 10,
width: 1,
color: color
},
{
type: "CIMSolidFill",
enable: true,
color: [
0,
0,
0,
255
]
}
]
}
}
],
scaleSymbolsProportionally: true,
respectFrame: true,
"offsetX": 0,
"offsetY": 34
},
]
};
}
