1

In Leaflet I would like to assign different icons to my Point of Interests based on attribute "tipo" in geojson file:

{ "type": "Feature", "properties": { "Name": "Fontana dei Colli", "tipo": "fontana", "img_id": "colli", "description": "Via Campasso", "image_url": "img/fontane/FontanaDeiColli.jpg", "timestamp": null, "begin": null, "end": null, "altitudeMode": null, "tessellate": -1, "extrude": 0, "visibility": -1, "drawOrder": null, "icon": null }, "geometry": { "type": "Point", "coordinates": [ 10.48693469784657, 45.39481875814014, 0.0 ] } },

This is my js code:

function PoIstile(feature, layer) {
switch(feature.properties["tipo"].toString()) {
        case "fontana":
            return {
            icon : L.icon({
                iconUrl: 'icons/fontana-small.png',
                iconSize:     [22, 30], // size of the icon
                iconAnchor:   [22, 22], // point of the icon which will correspond to marker's location
                popupAnchor:  [-3, -26] // point from which the popup should open relative to the iconAnchor    
            }),
            }
            break;
        case "chiesa":
            return {
            icon : L.icon({
                iconUrl: 'icons/chiesa-small.png',
                iconSize:     [22, 30], // size of the icon
                iconAnchor:   [22, 22], // point of the icon which will correspond to marker's location
                popupAnchor:  [-3, -26] // point from which the popup should open relative to the iconAnchor    
            }),
            }
            break;              
            }       
layer.bindPopup("<h4 class='custom-popup'>"+feature.properties.Name+"</h4><br><img src="+feature.properties.image_url+" width=100%/>");
};
var PoI = L.geoJson(PoI, {
onEachFeature: PoIstile
});

It doesn't work but it doesn't return any errors in console, but I can't find the problem

2

You should pass a pointToLayer function in the GeoJSON options object to create your custom markers. It should be something like (not tested but it should work)

var PoIjson = "...";

function PoIstile(feature, latlng) {
    switch(feature.properties["tipo"]) {
        case "fontana":
            var fontanaIcon = new L.icon({
                iconUrl: 'icons/fontana-small.png',
                iconSize:     [22, 30], // size of the icon
                iconAnchor:   [22, 22], // point of the icon which will correspond to marker's location
                popupAnchor:  [-3, -26] // point from which the popup should open relative to the iconAnchor    
            });
            return L.marker(latlng, {icon: fontanaIcon});
        case "chiesa":
            var chiesaIcon = new L.icon({
                iconUrl: 'icons/chiesa-small.png',
                iconSize:     [22, 30], // size of the icon
                iconAnchor:   [22, 22], // point of the icon which will correspond to marker's location
                popupAnchor:  [-3, -26] // point from which the popup should open relative to the iconAnchor    
            });
            return L.marker(latlng, {icon: chiesaIcon});              
        }       
};

var PoI = L.geoJson(PoIjson, {
    pointToLayer: PoIstile,
    onEachFeature: function (feature, layer) {
        layer.bindPopup("<h4 class='custom-popup'>" + feature.properties.Name + "</h4><br><img src=" + feature.properties.image_url + " width=100%/>");
    }
});

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.