Leaflet Gesture Handling mit LeafletMapMarker verwenden: Unterschied zwischen den Versionen
Aus Wikizone
Steff (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „Wir erweitern das LeafletMapMarker Modul direkt. Es wird ohnehin nicht weiterentwickelt. Daher werden wir es früher oder später eh selbst pflegen. == Module…“) |
|||
| (3 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
| Zeile 3: | Zeile 3: | ||
== Modulerweiterung == | == Modulerweiterung == | ||
=== Gesture Handling ins Modul kopieren === | === Gesture Handling ins Modul kopieren === | ||
| + | [[:File:Leaflet.GestureHandling-1.1.8.zip]] | ||
dist Ordner als | dist Ordner als | ||
| Zeile 9: | Zeile 10: | ||
=== CSS und JavaScript einbinden === | === CSS und JavaScript einbinden === | ||
| − | < | + | <syntaxhighlight lang="html5"> |
<link rel="stylesheet" href="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/Leaflet.GestureHandling/leaflet-gesture-handling.min.css" type="text/css"> | <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> | <script src="'.$config->urls->siteModules.'FieldtypeLeafletMapMarker/assets/Leaflet.GestureHandling/leaflet-gesture-handling.min.js"></script> | ||
| − | </ | + | </syntaxhighlight> |
| − | === | + | === Initialisieren === |
| + | Einschalten kann man das Modul in der Initialisierung der Karte mit der Option: | ||
gestureHandling: true | gestureHandling: true | ||
| − | + | ''' | |
| − | + | Beispiel:''' | |
| − | Beispiel: | ||
<pre> | <pre> | ||
var map = L.map("map", { | var map = L.map("map", { | ||
| Zeile 26: | Zeile 27: | ||
}); | }); | ||
</pre> | </pre> | ||
| − | |||
| + | '''In ProcessWire''' | ||
/site/modules/FieldtypeLeafletMapMarker/MarkupLeafletMap.js | /site/modules/FieldtypeLeafletMapMarker/MarkupLeafletMap.js | ||
| − | + | ''' | |
| − | Sieht das dann z.B. so aus: | + | Sieht das dann z.B. so aus:''' |
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
this.init = function(mapID, lat, lng, provider) { | this.init = function(mapID, lat, lng, provider) { | ||
Aktuelle Version vom 25. März 2019, 08:45 Uhr
Wir erweitern das LeafletMapMarker Modul direkt. Es wird ohnehin nicht weiterentwickelt. Daher werden wir es früher oder später eh selbst pflegen.
Modulerweiterung[Bearbeiten]
Gesture Handling ins Modul kopieren[Bearbeiten]
File:Leaflet.GestureHandling-1.1.8.zip
dist Ordner als
modules/FieldtypeLeafletMapMarker/assets/Leaflet.GestureHandling
speichern
CSS und JavaScript einbinden[Bearbeiten]
<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[Bearbeiten]
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);
