I am trying to give a class to the markers on a Leaflet map based on geoJSON properties using Leaflet 0.7.3. I want to be able to change the color of the marker based on the crop it represents using CSS. This seems quite straight forward but everything I tried failed.
I've tried to use :
L.DomUtil.addClass(marker._icon, 'className');
and
addClass(marker, 'I use a variable here');
but it's not working. So far here is the code I'm using:
L.geoJson(geoDataF,{
pointToLayer: function(feature,latlng){
var className = feature.properties.crop;
console.log(className);
var marker = L.marker(latlng);
marker.bindPopup(feature.properties.name
+ '<br/>' + feature.properties.location
+ '<br/>' + "Crops: " + feature.properties.crop);
console.log(marker);
return marker;
}
}).addTo(map);
I am not sure where to add some the extra code to add the class and what syntax to use. every time I use addclass, I get a message I cannot use it because it is not a function. I though about using D3 to try adding a class, but I don't fully understand leaflet and have a hard time manipulating the DOM.