I am trying to style individual markers, or clusters of size 1, based on some feature property.
var markers = L.markerClusterGroup();
function onEachFeature(feature, layer) {
if (feature.properties.EncounterType && feature.properties.Year) {
layer.bindPopup(feature.properties.EncounterType + " in " +
feature.properties.Year);
}
}
function style(feature) {
switch (feature.properties.EncounterType) {
case 'Shooting':
return {
color: "ff0000"
};
case 'Sighting':
return {
color: "0000ff"
};
case 'Hunting':
return {
color: "ff0000"
};
}
}
var geoJsonLayer = L.geoJSON(storer, {
onEachFeature: onEachFeature
}, {
style: style
});
markers.addLayer(geoJsonLayer);
map.addLayer(markers);
The onEachFeature
function successfully creates the popups. However, the style function does not change the color of the clusters of size 1. I've tried using the iconCreateFunction
when initializing the markerclustergroup, however, that did not work either.
Your
style
option is separated in a 3rd argument of your call toL.geoJSON
factory, whereas it should have been placed within the 2nd argument, alongsideonEachFeature
option.But that is probably not the only reason for your issue.
style
option will apply to vector shapes (polylines, polygons, etc.), i.e. to non-point data. It may also apply to Circle Markers, which can be used forPoint
type geometries, but you have to explicitly create them (typically through thepointToLayer
option).Those non-point data cannot be handled by Leaflet.markercluster.
Therefore if you see "clusters of size 1" (I guess you mean markers), they come from unstyled
Point
type geometries in yourstorer
GeoJSON data.This is a normal marker:
It is a PNG image that cannot be styled.
If you want to customize the appearance of your
Point
geometries, use custom icons, a plugin that provide such custom icons, or Circle Markers which you can modify the colour easily (including through thestyle
option).For example, if you were to choose that last option, you could do something like: