AnsweredAssumed Answered

Marker Symbols from HTML String?

Question asked by chad.kahler_noaa on Mar 19, 2018

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!