Contao-Camp 2024
Ergebnis 1 bis 2 von 2

Thema: Leaflet Maps Layer setStyle per click statt mouseover

  1. #1
    Contao-Nutzer
    Registriert seit
    10.06.2015.
    Beiträge
    70

    Standard 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.

  2. #2
    Contao-Nutzer
    Registriert seit
    10.06.2015.
    Beiträge
    70

    Standard 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

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •