I'm trying to have the icon colour using awesome markers change depending on individual properties within each marker details, however they all are red instead of some being red and some being green.
Is anyone able to see the issue here? is it possible to have the same type have a different colour?
Ive added the sample below, the geojson I have set the icon colour in there, but all icons are red as you should be able to see?
Thanks
var map = L.map('map').setView([54.0, -3.4], 6);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery ©<a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox/streets-v11',
accessToken: 'x'
}).addTo(map);
var geo_data = [
{'type': 'Feature', 'properties': {'name': 'A', 'popupContent': 'A', 'type': 'Showroom', 'icon': 'fa-home', 'color': '#d53f3a'
}, 'geometry': {'type': 'Point', 'coordinates': [
-2.2671,
57.139383
]
}
},
{'type': 'Feature', 'properties': {'name': 'B', 'popupContent': 'B', 'type': 'Showroom', 'icon': 'fa-home', 'color': '#d53f3a'
}, 'geometry': {'type': 'Point', 'coordinates': [
0.4549,
51.611151
]
}
},
{'type': 'Feature', 'properties': {'name': 'C', 'popupContent': 'C', 'type': 'Showroom', 'icon': 'fa-home', 'color': '#47a447'
}, 'geometry': {'type': 'Point', 'coordinates': [
0.060676,
51.531023
]
}
},
]
var Showroom = L.geoJSON(geo_data, {
filter: function(feature, layer) {
if (feature.geometry.coordinates != "None") {
return feature.properties.type === "Showroom";
}
},
pointToLayer: function (feature, latlng) {
return L.marker(latlng, {
icon: L.AwesomeMarkers.icon({
icon: feature.properties.icon,
markerColor: feature.properties.color,
prefix: 'fa',
iconColor: 'white'
}
)}
);
},
onEachFeature: function (feature, layer) {
layer.bindPopup('<h3>'+feature.properties.popupContent+'</h3>');
}
});
var overlayLayers= {
"Showroom": Showroom,
};
map.addLayer(Showroom)
L.control.layers(null,overlayLayers).addTo(map);<html><head><link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"
integrity="sha256-EFpFyBbuttUJtoocYzsBnERPWee2JYz4cn5nkUBjW0A="
crossorigin="anonymous" /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"></head><body><div id="map" style="height:700px;"></div><script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script><script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.min.js"
integrity="sha256-IqiRR5X1QtAdcq5lG4vBB1/WxwrRCkkjno4pfvWyag0="
crossorigin="anonymous"></script></body></html>