Marker Symbols from HTML String?

ChadKahler — Mon, 19 Mar 2018 16:46:43 GMT

With the Leaflet API there is the L.divIcon that allows you to utilize an HTML DIV as the marker icon/symbol. Is there a similar functionality with the ArcGIS JS 4.6 API? We are trying to make the transition from Leaflet to ArcGIS JS.

The marker icon contains a combination of custom fonts (symbol & text) to generate a weather station plot (see image below).

The following HTML string is built for each marker icon and styled with CSS.

stnPlot = "<div style='position:absolute;width:80px;height:80px;'>";
stnPlot += " <div class='temp'>" + temp + "</div>";
stnPlot += " <div class='dew'>" + td + "</div>";
stnPlot += " <div class='rh'>" + rh + "</div>";
stnPlot += " <div class='gust'>" + Math.round(gust) + "</div>";
stnPlot += " <div class='slp'>" + Math.round(gust) + "</div>";
stnPlot += " <div class='windbarb-container'>";
stnPlot += " <div class='windbarb' style='top:" + top + "px;left:" + left + "px;transform:rotate(" + dir + "deg);font-weight:bold;'>" + windStr + "</div>";
stnPlot += " </div>";
stnPlot += " <div class='wx-center'>+</div>";
stnPlot += "</div>";

return stnPlot;

The above HTML generates the icon below.

Perhaps the ArcGIS JS 4.6 API can replicate this functionality and I just missed it. I would appreciate if someone could point me toward a particular Marker or Symbol layer that could do this.

Appreciate an insights someone may have!

topic Marker Symbols from HTML String? in ArcGIS JavaScript Maps SDK Questions

Marker Symbols from HTML String?