Leaflet map - legend with custom icons

by Mariusz Krukar   Last Updated September 11, 2019 09:22 AM

Continuing the query:

Leaflet GeoJSON legend with custom icons

I am struggling with the implementation of the custom icon to the legend.

I found an another example also here:


which looks simple, but it cannot really fetch the external .geojson or .json data, like it can be done by

function getColor(d) {

I was trying to do sth like this:

var myIcon = L.icon({
 iconUrl: 'icon.png',
 iconSize: [32, 37],
 iconAnchor: [16, 37],
 popupAnchor: [0, -28]


function getColor(d) {
 return d === 'Company'  ? "#ff6600" :
       d === 'Church'  ? "#ffeecc" :
       d === 'Shop' ? "{icon:myIcon}" :
       d === 'Other' ? "#984ea3" :

but this solution doesn't work.

I couldn't find in the web the reference for function getColor(d), but it looks like I can input there the colors only.

Another my try was referred to the example:


var legendObj = {};
            legendObj["myIcon"] = STYLES[spaceToUnderscore("myIcon").toLowerCase() + "_styles"]["styles"]["Default"]["legend"];

attaching the following scripts:

<script src="legend.js"></script>
<script src="styles.js"></script>
<script src="styles_layers.js"></script>

changing the relevant values inside, but it didn't work too.

Is there any another swift option to implement my custom icons int the map legend?

Related Questions

Updated January 17, 2018 01:22 AM

Updated September 18, 2018 17:22 PM

Updated June 11, 2017 14:22 PM

Updated August 07, 2017 13:22 PM

Updated November 13, 2017 18:22 PM