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:

https://github.com/dwilhelm89/LeafletSlider/blob/master/SliderControl.js

Answer 1

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: 'http://leafletjs.com/examples/custom-icons/leaf-green.png',
    shadowUrl: 'http://leafletjs.com/examples/custom-icons/leaf-shadow.png'
})

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 = "http://leafletjs.com/examples/custom-icons";

So the icon URLs will be:

Icon URL  :  http://leafletjs.com/examples/custom-icons/marker-icon.png
Shadow URL:  http://leafletjs.com/examples/custom-icons/marker-shadow.png