I've been racking my brain trying to figure out how to dynamically add color to Mapbox's maki icons using plain Javascript. The documentation offers solutions using deprecated tools like tilemill or CSS, but my icons are generated on-the-fly from an array of objects containing Lat/Lon coordinates. What I really need is a way to color them based on other data within the objects - for example, I want the size and color of a transit station icon to reflect the amount of daily traffic it receives. Unfortunately, Mapbox's default icons offer limited size options (large, medium, small) but not much flexibility for color control.
Here's the code snippet I've been working with:
featureArray = []
// stationData is an array of objects
stationData.forEach(function(station) {
var markerObj = {
type: 'Feature',
properties: {
title: station.StationName,
"icon": {
"iconUrl": "public/maki/renders/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1dcd0c3daf9c1dfd6">[email protected]</a>",
"iconSize": [40, 40],
"icon-fill": "#DF0101",
"popupAnchor": [0, -15],
"className": "dot",
"iconColor": '#fa0' // does not work
}
},
geometry: {
type: 'Point',
coordinates: [parseFloat(station.Lng), parseFloat(station.Lat)]
}
}
featureArray.push(markerObj);
});
var geojson = {
type: 'FeatureCollection',
features: featureArray
};
stationLayer.on('layeradd', function(e) {
var marker = e.layer,
feature = marker.feature;
marker.setIcon(L.icon(feature.properties.icon));
});
stationLayer.setGeoJSON(geojson);
stationLayer.on('mouseover', function(e) {
e.layer.openPopup();
});
stationLayer.on('mouseout', function(e) {
e.layer.closePopup();
});
After hours of searching and experimenting, I'm still coming up short on a solution. Any advice or guidance would be greatly appreciated.
Thanks,
William