Adding HTML markers in map

Question

Hello, I am trying to add below html marker. is there any way we can achieve that ? . I am using "@arcgis/core": "^4.26.5" library and Nextjs. Right now , I can achieve the rendering of the svg using SimpleMarkerSymbol and path property which results in below image but I can add the path of outer bubble and I cannot achieve the above use case. Is there any way to add html code ?

JamesIng · Answer

Hi @KarthikeyanShanmugam

Can you tell me a little more detail about what you're trying to achieve?

You might be able to achieve what you're after by using a uniqueValueRenderer.
https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-UniqueValueRenderer.html

You can specify multiple symbols and then apply them to your data depending on a particular attribute.

KarthikeyanShanmugam · Answer

Thanks @JamesIng It helps. I have a use case where I need to add marker with different symbol inside the bubble. For instance something like this image

I will have to manually to convert this into symbols json, but is there a way to change the inner part of the bubble once I upload the single marker and change the inner part of the bubble.

JamesIng · Answer

Consider using the new CIM symbol instead -

You can also use the CIM Symbol builder to convert a existing SVG into the new CIM symbol format:

Can read more about it here:
https://www.esri.com/arcgis-blog/products/js-api-arcgis/developers/cim-symbol-builder/