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?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.