Comment changer la couleur du marqueur Leaflet au survol?

9

J'ai du mal à comprendre pourquoi la méthode Leaflet setstylechangera la couleur d'un polygone mais pas la couleur de mes marqueurs.

Le polygone fonctionne bien:

Polygone

Mais les marqueurs ne changeront pas de couleurs:

Marqueurs

Je veux pouvoir passer la souris sur un marqueur et changer sa couleur. Il semblait que setStyle ferait cela. Mais je continuelayer.setStyle is not a function

J'utilise Angular et Leaflet ensemble pour faire la carte (j'utilise la directive angular-leaflet).

Voici la partie survolée du code:

$scope.$on("leafletDirectiveMap.geojsonMouseover", function (ev, leafletEvent) {
        pointMouseover(leafletEvent);
    });

    function pointMouseover(leafletEvent) {
        var layer = leafletEvent.target;
        layer.setStyle({
            weight: 2,
            color: '#666',
            fillColor: 'white'
        });
    }

Lorsque le marqueur est survolé, il se déclenche pointMouseveret essaie ensuite d'appeler setStyle sur LeafletEvent.target. J'ai console.logged le LeafletEvent et il y a en effet la partie Target:

Cible

Pourquoi setStyle fonctionnerait-il pour le polygone et non pour le marqueur? Comment changer la couleur du marqueur?

geojson markers leaflet

— Kyle Pennell
source

2

Vous devriez consulter Leaflet.StyleEditor sur GitHub. Il m'a fallu un certain temps pour comprendre comment faire fonctionner la démo, mais 1) cliquez sur l'outil Style, 2) cliquez sur le marqueur, 3) le point clé ... changez le réglage de l'icône pour autre chose que par défaut, 4) sélectionnez Couleur. Voila! Assez lisse.

— RyanKDalton

Et le Leaflet StyleEditor fait sa magie en donnant à l'icône une URL Mapbox de ce formulaire: api.tiles.mapbox.com/v3/marker/pin-m-circle+ffc871.png , où ffc871 est la chaîne de couleur hexadécimale. Apparemment, il peut s'agir d'une chaîne hexadécimale à six chiffres! Mais cela est probablement mieux fait en utilisant MakiMarkers, qui semble avoir été conçu à cet effet: github.com/jseppi/Leaflet.MakiMarkers

— LarsH

6

Il semble que vous ne puissiez pas faire cela car un marqueur utilise une image pour le rendu.

entrez la description de l'image ici

Je pense que vous auriez besoin de saisir la classe d'icônes de votre marqueur et de changer l'attribut "iconUrl" en n'importe quelle nouvelle image que vous voulez.

Source: Référence de l'API Leaflet

J'espère que cela pourra aider,

DR

— Duncan Rager
source

8

Compris grâce à une lecture de la documentation.

Le polygone dans la brochure répond setStylemais le marqueur peut être changé en utilisantsetIcon

Documentation pour setIcon

— Kyle Pennell
source

5

Voir la réponse de Kyle Pennell:

Le polygone dans la brochure répond à setStyle mais le marqueur peut être changé en utilisant setIcon

Vous pouvez utiliser les lignes suivantes:

// create custom icon
IconStyleOne = L.icon({
            iconUrl: 'img/image1.png'
        });
IconStyleTwo = L.icon({
            iconUrl: 'img/image2.png'
        });

// ...

//Create empty geojson with mouseover and mouseout events
geojson_feature = L.geoJson(false, {
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {icon: IconStyleOne});
    },
    onEachFeature: function(feature,layer)
            {
            layer.on("mouseover",function(e){
                layer.setIcon(IconStyleOne)
            });
            layer.on("mouseout",function(e){
                layer.setIcon(IconStyleTwo)
            });
            }
}).addTo(this.map);

— Benno
source

1

Kyle Pennell a une excellente question et réponse ici;)

— Kyle Pennell

2

Vous pouvez le faire sans avoir à créer un million d'images d'icônes différentes si vous utilisez CSS.

Ajoutez le marqueur
recherchez l'attribut backgroundcolor pour le css et modifiez-le.

C'est ici:

var marker = L.marker([50,-20], {icon: myIcon}).addTo(map);
marker.valueOf()._icon.style.backgroundColor = 'green'

— Ricky
source

Donc, cela ne change que la couleur d'arrière-plan? Pouvez-vous donner un exemple de ce à quoi cela ressemblerait pour une icône typique?

— LarsH

1

@LarsH, Oui, cela changerait l'arrière-plan (placez un carré vert derrière l'icône en forme de larme bleue). Malheureusement, vous ne pouvez pas simplement changer la couleur de remplissage. Comme d'autres l'ont souligné, l'icône n'a pas de propriété de couleur. Ce n'est qu'une image (jpg ou png) et vous devez échanger l'image entière.

— JMers

1

En combinant la réponse de Ricky avec /programming/7415872/change-color-of-png-image-via-css , nous pouvons faire quelque chose comme:

var marker = L.marker([50,-20], {icon: myIcon}).addTo(map);
marker.valueOf()._icon.style.filter = 'hue-rotate(180deg)';

Vous pouvez également jouer avec saturate()et brightness()pour obtenir plus de couleurs.

Comme mentionné dans la réponse à cette question, il n'est pas pris en charge dans tous les navigateurs: https://caniuse.com/#feat=css-filters

— Evan Battaglia
source