Adding HTML markers in map

[KarthikeyanShanmugam]

Hello, 

I am trying to add below html marker. 

<span>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="30px" height="44px" viewBox="0 0 30 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs></defs>
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="map-marker" fill="red">
            <ellipse id="Oval-1" fill-opacity="0.167006341" fill="#000000" cx="15" cy="39" rx="10" ry="5"></ellipse>
            <path d="M14.9603111,0.0389586363 C6.69825573,0.0389586363 0,6.73721437 0,14.9992698 C0,23.2608382 12.4667636,39.932797 14.9603111,39.932797 C17.4533717,39.932797 29.9201353,23.2608382 29.9201353,14.9992698 C29.9201353,6.73721437 23.2218795,0.0389586363 14.9603111,0.0389586363 L14.9603111,0.0389586363 Z" id="Fill-1"></path>
        </g>
    </g>
</svg>
</span>

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]

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/

[KarthikeyanShanmugam]

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]

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

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