Question

12

change leaflet marker icon

rated 0 times [ 14] [ 2] / answers: 1 / hits: 77549 / 8 Years ago, wed, january 11, 2017, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

deving

Add To Favorites

Follow

Total Points: 26

Total Questions: 94

Total Answers: 103

Location: Serbia

Member since Tue, Jul 26, 2022

2 Years ago

answered 8 Years ago patienceannel · 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;

    }