Insert custom marker icons in a leaflet map

[sckott]

Hey @ramnathv - Curious how to use custom icons in a leaflet map. I think I got it except for I don't know where to define the new icon:

var LeafIcon = L.Icon.extend({
    options: {
        shadowUrl: 'leaf-shadow.png',
        iconSize:     [38, 95],
        shadowSize:   [50, 64],
        iconAnchor:   [22, 94],
        shadowAnchor: [4, 62],
        popupAnchor:  [-3, -76]
    }
});

Which I can then use e.g., by

var points = L.geoJson(labels, {
        pointToLayer: function (feature, latlng) {
            return L.marker(latlng, {icon: LeafIcon });
        }
});

Where can I define in a new icon var?

[ramnathv]

Here is how you can do it now. Unfortunately, it is a little messy as there is no mechanism currently to define a separate icon variable and then use it.

L1$geoJson(toGeoJSON(data_), 
  pointToLayer =  "#! function(feature, latlng){
    return L.marker(latlng, {icon: L.Icon.extend({
      options: {
        shadowUrl: 'leaf-shadow.png',
        iconSize:     [38, 95],
        shadowSize:   [50, 64],
        iconAnchor:   [22, 94],
        shadowAnchor: [4, 62],
        popupAnchor:  [-3, -76]
      }})
    })
  } !#"
)

[sckott]

Thanks!

[miguelfg]

Hi Ramnathv,

And how would it be for two type of icons?, I have two data frames with the coordinates points i want to add, each represent different items, so i want to place different markers, at least about color.

Should be something like this? (i'm affraid that no, because i'm not sure that calling twice to $geoJson it'd append both set of points to the map)

set markers type 1

L1$geoJson(toGeoJSON(df1),
onEachFeature = '#! function(feature, layer){
layer.bindPopup(feature.properties.popup)
} !#',
pointToLayer = "#! function(feature, latlng){
return L.circleMarker(latlng, {
radius: 4,
fillColor: feature.properties.fillColor || 'red',
color: '#000',
weight: 1,
fillOpacity: 0.8
})
} !#")

set markers type 2

L1$geoJson(toGeoJSON(df2),
onEachFeature = '#! function(feature, layer){
layer.bindPopup(feature.properties.popup)
} !#',
pointToLayer = "#! function(feature, latlng){
return L.circleMarker(latlng, {
radius: 4,
fillColor: feature.properties.fillColor || 'blue',
color: '#2b32ac',
weight: 1,
fillOpacity: 0.8
})
} !#")

[pfuhlert]

Any help with multiple icons? The code above does not work for me. $geoJson does not append the new icons, but overwrites the old ones.

[miguelfg]

Sorry, I've never managed :-(