Change Leaflet Marker Icon

Question

I am using Leaflet Slider, of Dennis Wilhelm, to show changes in data on a Leaflet map.

I am trying to change the change the marker icon but not getting it right. So,How can I change marker icon when use Leaflet Slider to show changes over time? What changes I have to do in the original SliderControl.js?

Thanks in advance!

Below is the link to Dennis Wilhelm's Leaflet Slider code:

Accepted Answer

You can create new icon class as below:

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

Then create a new icon object like below:

var greenIcon = new LeafIcon({
    iconUrl: '
    shadowUrl: '
})

Now you can above icon for the marker in the map as below:

L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);

You can refer this document for further information.

For slidercontrol you need to create two images:

(1) Marker Icon [ Use name: marker-icon.png ]
(2) Marker Icon Shadow [ Use name: marker-shadow.png ]

After that you can specify the default image path like below:

L.Icon.Default.imagePath = "Url to the image folder"; // This specifies image path for marker icon. 
e.x L.Icon.Default.imagePath = "";

So the icon URLs will be:

Icon URL  :  
Shadow URL:

Accepted Answer

This will be the exact changes in the original slidercontrol.js file

   if (this._layer) {
        var index_temp = 0;
        this._layer.eachLayer(function (layer) {

             var greenIcon = L.icon({ //add this new icon
                iconUrl: i+'.png',
                shadowUrl: 'leaf-shadow.png',

                iconSize:     [38, 95], // size of the icon
                shadowSize:   [50, 64], // size of the shadow
                iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                shadowAnchor: [4, 62],  // the same for the shadow
                popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
            });

            options.markers[index_temp] = layer;
            options.markers[index_temp].setIcon(greenIcon); //Here set the icon to indiviual markers

            ++index_temp;
        });
        options.maxValue = index_temp - 1;
        this.options = options;
    }

Answer 3

var century21icon = L.icon({
    iconUrl: '
    iconSize: [20, 20]
    });
var maker = L.marker([25.045403,121.526088],{icon: century21icon}).addTo(map);

Answer 4

Just in case if anyone is wondering how to do it in Typescript with vue2-leaflet, below is one sample code. You can even use v-for on l-marker to plot multiple markers in one go:

// inside template
<l-marker :lat-lng="position"
            :icon="defaultIcon" :key="index">
            <l-icon
                :icon-size=[20,40]
                :popupAnchor= [0,0]
                :iconUrl= "'assets/logo.png'"
                :shadowUrl= "'assets/logo.png'" >
                  <v-icon medium >
                    mdi-target
                  </v-icon>
            </l-icon>
</l-marker>

// default icon in script
defaultIcon = L.icon({
      iconUrl: "",
      shadowUrl: require('../static/marker.png'),
      iconSize: [20, 30],
      iconAnchor: [18, 18],
      popupAnchor: [0, -10],
      shadowSize: [0, 0],
      shadowAnchor: [10, 10]
    });

Change Leaflet Marker Icon

4 Answers

Must Read

Your Answer

Robert Thorne

Change Leaflet Marker Icon

4 Answers

Must Read

Your Answer

Sign up or log in

Post as a guest

Robert Thorne