Marker Symbols from HTML String?
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!
