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:
4 Answers
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:
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;
}
var century21icon = L.icon({
iconUrl: '
iconSize: [20, 20]
});
var maker = L.marker([25.045403,121.526088],{icon: century21icon}).addTo(map);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]
});
