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('/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © <a href="/">OpenStreetMap</a> contributors, <a href=".0/">CC-BY-SA</a>, Imagery © <a href="/">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="/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<link rel="stylesheet" href=".awesome-markers/2.0.2/leaflet.awesome-markers.css"
integrity="sha256-EFpFyBbuttUJtoocYzsBnERPWee2JYz4cn5nkUBjW0A="
crossorigin="anonymous" />
<link rel="stylesheet" href=".11.2/css/all.css">
</head>
<body>
<div id="map" style="height:700px;"></div>
<script src="/[email protected]/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin="">
</script>
<script src=".awesome-markers/2.0.2/leaflet.awesome-markers.min.js"
integrity="sha256-IqiRR5X1QtAdcq5lG4vBB1/WxwrRCkkjno4pfvWyag0="
crossorigin="anonymous">
</script>
</body>
</html>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./styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap/">OpenStreetMap</a> contributors, <a href="https://creativemons/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox./">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./[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"
integrity="sha256-EFpFyBbuttUJtoocYzsBnERPWee2JYz4cn5nkUBjW0A="
crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/font-awesome/5.11.2/css/all.css">
</head>
<body>
<div id="map" style="height:700px;"></div>
<script src="https://unpkg./[email protected]/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin="">
</script>
<script src="https://cdnjs.cloudflare./ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.min.js"
integrity="sha256-IqiRR5X1QtAdcq5lG4vBB1/WxwrRCkkjno4pfvWyag0="
crossorigin="anonymous">
</script>
</body>
</html>- I was just doing this in R yesterday - and leaflet was only taking very specific colors. So red, green and blue worked but not white or custom hex colors. Try that? – Michael Tallino Commented Jan 17, 2020 at 15:11
- what about use this plugin isntead ? github./ilyankou/Leaflet.IconMaterial – Nico Commented Jan 17, 2020 at 15:15
2 Answers
Reset to default 6Leaflet.AwesomeMarkers has a limited selection of available colours. Quoting from its readme:
markerColorColor of the marker
DefaultbluePossible vaules:red,darkred,orange,green,darkgreen,blue,purple,darkpurple,cadetblue
This is reinforced by the fact that AwesomeMarkers uses part of a static image for the markers, and that image has only that limited selection of colours:
Compare with the iconColor option, which can take any value. Quoting again, emphasis mine:
iconColorColor of the icon DefaultwhitePossible values:white,blackor css code (hex, rgba etc)
You should consider other marker plugins, keeping the colours inside the selection available for AwesomeMarkers, or providing your own marker images.
Oddly enough I was also just poking around in dev console looking for a way to set the marker color to something other, at the same time I came across this thread, and I uncovered a slightly different "static image" (see below) as the one in the accepted answer, even though the Leaflet.awesome-markers Github notes do only mentions the colors as per the accepted answer.
This made me suspect there are other color names we can utilise and digging a little further I took a peak at leaflet.awesome-markers.css which indeed listed various other color options: lightgrey, pink, white, black etc e.g. markerColor: 'lightgray'
/* Colors */
.awesome-marker-icon-red {
background-position: 0 0;
}
.awesome-marker-icon-darkred {
background-position: -180px 0;
}
.awesome-marker-icon-lightred {
background-position: -360px 0;
}
.awesome-marker-icon-orange {
background-position: -36px 0;
}
.awesome-marker-icon-beige {
background-position: -396px 0;
}
.awesome-marker-icon-green {
background-position: -72px 0;
}
.awesome-marker-icon-darkgreen {
background-position: -252px 0;
}
.awesome-marker-icon-lightgreen {
background-position: -432px 0;
}
.awesome-marker-icon-blue {
background-position: -108px 0;
}
.awesome-marker-icon-darkblue {
background-position: -216px 0;
}
.awesome-marker-icon-lightblue {
background-position: -468px 0;
}
.awesome-marker-icon-purple {
background-position: -144px 0;
}
.awesome-marker-icon-darkpurple {
background-position: -288px 0;
}
.awesome-marker-icon-pink {
background-position: -504px 0;
}
.awesome-marker-icon-cadetblue {
background-position: -324px 0;
}
.awesome-marker-icon-white {
background-position: -574px 0;
}
.awesome-marker-icon-gray {
background-position: -648px 0;
}
.awesome-marker-icon-lightgray {
background-position: -612px 0;
}
.awesome-marker-icon-black {
background-position: -682px 0;
}
So these do appear to be addition default colours we can use with version 2.0.2 or leaflet.awesome-markers even though they do not appear to be documented.
As a side note I've also noticed that there is another awesome-markers option called 'extraClasses' as specified in the documentation as follows:
extraClasses Additional classes in the created tag '' 'fa-rotate90 myclass' eller other custom configuration
So I've tried to create my own .myclass and added some opacity: 0.4; setting but unfortunately using extraClasses: myclass this did not seem to work for me. Not entirely sure what 'extraClasses' is exactly for, unless it's somehow specific to fontawesome styles or something. Perhaps someone else can elaborate on this in case it allows us to tweak the marker colour/appearance even further.
UPDATE:
Further to my provided solution I did some more digging concerning the extraClasses: myclass which wasn't working for me initially, the reason being a bug with the minified version of the included JS file (github/lvoogdt/Leaflet.awesome-markers/issues/92) which I happened to be using. Reverting to the leaflet.awesome-markers.js instead of leaflet.awesome-markers.min.js did manage to get myclass to now show up but unfortunately it was as I suspected on the fontawsome < i > tag and not the marker itself as you can see here:
<div class="awesome-marker-icon-lightgray awesome-marker leaflet-zoom-animated leaflet-interactive" tabindex="0" style="margin-left: -17px; margin-top: -42px; width: 35px; height: 45px; transform: translate3d(84px, -29px, 0px); z-index: -29;">
<i class="myclass fa fa-circle icon-white"></i>
</div>
In my particular case I decided to style the lightgrey marker by adding some styling to class .awesome-marker-icon-lightgray which is targeting the automatically assigned class for markers I styled with the new lightgrey color markerColor: 'lightgray' and adding opacity: 0.4; to .awesome-marker-icon-lightgray did the trick for me as it "greyed out" the lightgrey marker (if that makes sense) which is the effect I was after, indicating an inactive marker on my map.
Hope this helps anyone else who is struggling to style their Leaflet.AwesomeMarkers and doesn't fancy trying the alternative Material icons mention in a ment further up on this thread.
ALTERNATIVES:
Create your own awsome icons using this simple to follow guide: Create custom map marker icon with Leaflet
or use these simple, scalable SVG map markers with any Font Awesome icon by George MacKerron github./jawj/MapMarkerAwesome