Leaflet Gesture Handling mit LeafletMapMarker verwenden

Wir erweitern das LeafletMapMarker Modul direkt. Es wird ohnehin nicht weiterentwickelt. Daher werden wir es früher oder später eh selbst pflegen.

Modulerweiterung

Gesture Handling ins Modul kopieren

File:Leaflet.GestureHandling-1.1.8.zip

dist Ordner als

modules/FieldtypeLeafletMapMarker/assets/Leaflet.GestureHandling 

speichern

CSS und JavaScript einbinden

<link rel="stylesheet" href="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/Leaflet.GestureHandling/leaflet-gesture-handling.min.css" type="text/css">
<script src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/Leaflet.GestureHandling/leaflet-gesture-handling.min.js"></script>

Initialisieren

Einschalten kann man das Modul in der Initialisierung der Karte mit der Option:

gestureHandling: true 

Beispiel:

var map = L.map("map", {
    center: [-25.2702, 134.2798],
    zoom: 3,
    gestureHandling: true
});

In ProcessWire

/site/modules/FieldtypeLeafletMapMarker/MarkupLeafletMap.js

Sieht das dann z.B. so aus:

this.init = function(mapID, lat, lng, provider) {
        if(lat != 0) this.map = L.map(mapID, {
          center: [lat, lng],
          zoom: this.options.zoom,
          scrollWheelZoom: this.options.scrollWheelZoom,
          gestureHandling: true
        } );
        L.tileLayer.provider(provider).addTo(this.map);