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

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>

Initialisierung anpassen

gestureHandling: true 

in your map initialization script.

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);