Leaflet Maps Layer setStyle per click statt mouseover
Liebe Community
Layer Style per click wechseln statt mit mouseover/-out. Beispiel: http://opendatalab.de/projects/geojson-utilities/
Ich möchte diese click-Events statt moueseover/mouseout (Layer Style ändern und wieder zurücksetzen) in contao leaflet "onEachFeture expression" umsetzen. Zweiter click auf Element/Layer bzw. Karte = restStyle. Mit Mouseover ist das japroblemlos möglich (ist aber nicht mobile-fähig; click = tap), click bekomme ich nicht hin. Leider kann ich nicht programmieren, sodass ich auch Tipps von Leafletjs (z. B. rund um Choropleth Map) und anderen Foren nicht interpretieren/umschreiben kann. Das Stichwort "resetStyle" taucht auf ...
Mein Versuch dazu kann natürlich nicht funktionieren (erster click zum Wechsel geht, wenn der zweite ein mouseout ist, sonst nicht; mouseover/-out funktioniert natürlich). Wie hier eingetragen passiert gar nichts mit dem Vektorobjekt (GeoJSON File). Verständlich, es müsste wie bei mouseover ein "click-in" und click-out" geben ...(?).
Code:
function forEachFeature(feature, layer) {
if (layer instanceof L.Path) {
//Layer style
layer.setStyle({
weight: 10,
color: '#ff0000',
dashArray: '',
fillColor: 'ff0000',
fillOpacity: 0});
//Change layer style on click
layer.on('click', function() {layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillColor: '#666',
fillOpacity: 0.7});});
//reset layer style on click
layer.on('click', function() {layer.setStyle({
weight: 10,
color: '#ff0000',
dashArray: '',
fillColor: 'ff0000',
fillOpacity: 0});});
//Popup bei Click
layer.bindPopup('Ländername');
}
}
Hat jemand eine Idee dazu?
Ich wäre sehr dankbar.
Grüße, Matt
PS: Entschuldigung für meine programmtechnische Unzulänglichkeit.
Leafletjs (Layer select per click)
Erweiterte Info zu dem Code aus leafletjs.com
Das war in stackoverflow zu finden (click-Wechsel der Ebenen?); dazu noch ein click auf die Karte, um die Auswahl aufzuheben oder erneuter click auf dasselbe Objekt, um es wieder abzuwählen?
Jedoch funktioniert das so nicht in der Contao Version von Leaflet.
Code:
// Variable to store selected
var selected
// Create new geojson layer
new L.GeoJSON(collection, {
// Set default style
'style': function () {
return {
'color': 'yellow',
}
}
}).on('click', function (e) {
// Check for selected
if (selected) {
// Reset selected to default style
e.target.resetStyle(selected)
}
// Assign new selected
selected = e.layer
// Bring selected to front
selected.bringToFront()
// Style selected
selected.setStyle({
'color': 'red'
})
}).addTo(map)
Könnte mir das bitte jemand "übersetzen"?
Wenn ja - vielen Dank im Voraus
Matt