web-dev-qa-db-fra.com

changer d'icône marqueur

J'utilise Leaflet Slider, de Dennis Wilhelm, pour afficher les modifications des données sur une carte Leaflet.

J'essaie de changer le changement d'icône de marqueur mais je ne le fais pas correctement. Alors, comment puis-je changer l'icône du marqueur quand utiliser le curseur Leaflet pour afficher les changements au fil du temps? Quels changements dois-je effectuer dans le fichier SliderControl.js d'origine?

Merci d'avance!

Ci-dessous le lien vers le code du slider de Leaflet de Dennis Wilhelm:

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

javascriptjquerysliderleaflet
7
sowmyaa guptaa

Ce seront les changements exacts dans le fichier slidercontrol.js original

   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;
    }
1
sowmyaa guptaa

Vous pouvez créer une nouvelle classe d'icônes comme ci-dessous:

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

Puis créez un nouvel objet icon comme ci-dessous:

var greenIcon = new LeafIcon({
    iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png',
    shadowUrl: 'http://leafletjs.com/examples/custom-icons/leaf-shadow.png'
})

Maintenant, vous pouvez utiliser l’icône ci-dessus pour le marqueur sur la carte:

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

Vous pouvez vous référer à ce document pour plus d'informations.

Pour slidercontrol, vous devez créer deux images:

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

Après cela, vous pouvez spécifier le chemin d’image par défaut comme ci-dessous:

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";

Ainsi, les URL des icônes seront:

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