Wie kann ich Polygone in Leaflet beim hovern mit der Maus highlighten?

Hallo, ich versuche seit einer ganzer weile den Highlight effect in js mit Leaflet und kriege es nicht hin.

Kennt sich jmd aus?
Kann ich z.B. auch Polygone einzeln den highlight effect geben ohne sie zu gruppieren?

Habe mega viel gegoogle, verstehe das meiste aber einfach nicht, und selsbt beim copy pasten gehts nicht.
Ich weiß nciht mal wo ich was ändern muss...

wie bekomme ich z.B. hier zu einem highliught effect beim hovern mit der maus

var group = new L.LayerGroup([
  new L.Polygon([
    [-50, -50], [50, -50], [50, -10], [-50, -10]
  ], {'label': 'Polygon 1', 'popup': 'Polygon 1'}),
  new L.Polygon([
    [-50, 10], [50, 10], [50, 50], [-50, 50]
  ], {'label': 'Polygon 2', 'popup': 'Polygon 2'})
]).addTo(map);

wenn ich https://embed.plnkr.co/plunk/LjzFbI hier raus das Beipsiel kopieren funktioniert es bei mir nicht.

Es gibt zu dem Thema in meinen Augen viel zu wenig ausführliche Hilfen.

Ich habe bereits eine Map, und darauf 10 Polygone, die aber auf nichts reagieren.

Answer 1

[regex9]

Ich denke, dass die Dokumentation Hilfe genug sein sollte.

https://leafletjs.com/reference-1.7.1.html#polygon

1) Polygon kreieren und der Karte hinzufügen:

const coordinates = // array with coordinates (latitude/longitude)
const polygon = L.polygon(coordinates, { fill: true });
polygon.addTo(map);

2) Listener an Polygon anhängen:

polygon.on("mouseover", function() {
  polygon.fillColor = "#ff0000";
  polygon.opacity = 1;
});
polygon.on("mouseout", function() {
  polygon.fillColor = "#3388ff";
  polygon.opacity = 0.2;
});

Bei mouseout werden wieder die Standardwerte zugewiesen.

Comments

[QQwertz123]

Ich verstehs noch immer nicht so recht. Ich kann doch ein Polygon auch so kreieren :

var polygon = L.polygon([
              [-50, 10], [50, 10], [50, 50], [-50, 50]]
              ).addTo(map);

Wieso klappt das dann nicht wenn ich den Listener dann drunter schreibe?

[regex9]

@QQwertz123

Diese Methodik unterscheidet sich nicht sonderlich von der, die ich in meiner Antwort zeige. Ich gebe zur Sicherheit nur noch ein style-Property mit, welches sicherstellt, dass das Polygon mit Farbe ausgefüllt werden kann. Denn laut Dokumentation ist dessen Standardwert unbestimmt.

Ach, und was mir gerade auffällt: Der Aufruf von addTo sollte wohl besser separat getätigt werden, damit polygon auf ein Polygon zeigt und nicht undefined. Siehe in meiner Antwort oben.

[QQwertz123]

Okay ich habe es hinbekommen man muss "setStyle" noch dazu schreiben

polygon.on('mouseover', function() {
      polygon.setStyle({Color: 'red'});  
      polygon.setStyle({fillColor: '#F05320A'});
      polygon.setStyle({fillOpacity: 1});
});