I have a JS script in which I recursively add markers on a Map using leaflet library. For doing this I use the following function:
function showMarker(key){
markerGroup = L.layerGroup().addTo(map);
for (var i = 0; i < N_staz; i++){
var value = data[key][i];
var myIcon = L.divIcon({
iconSize: [30, 20],
className: 'MarkerClass',
html:'<b>'+value+'</b>'
});
L.marker([data["latitude"][i],data["longitude"][i]], {icon: myIcon}).addTo(markerGroup);
}
} I just pass the key (which could be for example "temperature") and it adds N_staz markers with the temperature values stored in the data array.
The problem is that with L.divIcon I can pass a css class for the marker and cannot pass directly the properties such as the background color. Anyway, I would assign a different color to each marker by the temperature value. So I wrote a function (Temp2Color) which takes the temperature value and returns a color in hex format (e.g. Temp2Color(30) returns #f6ff00). So I have the color I want for each marker, but I don't know how to assign it to them, because I can just pass a css class.
Because the color scale I am using in the function Temp2Color is continuous, I can't create a css class for each color!
What can I do so? Can I modify dynamically the css class MarkerClass, or in some way pass to L.divIcon directly the color I want?
