Leaflet Gesture Handling mit LeafletMapMarker verwenden - Versionsgeschichte

37.49.72.8 am 25. März 2019 um 07:45 Uhr

2019-03-25T07:45:21Z

37.49.72.8 am 25. März 2019 um 07:44 Uhr

2019-03-25T07:44:08Z

Steff: /* Initialisierung anpassen */

2019-02-21T16:48:00Z

Initialisierung anpassen

Steff: /* CSS und JavaScript einbinden */

2019-02-21T16:46:46Z

CSS und JavaScript einbinden

Steff: 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…“

2019-02-21T16:45:44Z

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…“

Neue Seite

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 ===
<pre>
<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>
</pre>

=== Initialisierung anpassen ===
gestureHandling: true
in your map initialization script.

Beispiel:
<pre>
var map = L.map("map", {
center: [-25.2702, 134.2798],
zoom: 3,
gestureHandling: true
});
</pre>
In ProcessWire

/site/modules/FieldtypeLeafletMapMarker/MarkupLeafletMap.js

Sieht das dann z.B. so aus:
<syntaxhighlight lang="javascript">
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);
</syntaxhighlight>

@@ Zeile 3: / Zeile 3: @@
 == Modulerweiterung ==
 === Gesture Handling ins Modul kopieren ===
-File:Leaflet.GestureHandling-1.1.8.zip
+[[:File:Leaflet.GestureHandling-1.1.8.zip]]
 dist Ordner als
   modules/FieldtypeLeafletMapMarker/assets/Leaflet.GestureHandling

@@ Zeile 14: / Zeile 14: @@
 </syntaxhighlight>
-=== Initialisierung anpassen ===
+=== Initialisieren ===
   gestureHandling: true
-in your map initialization script.
+'''
+Beispiel:'''
 <pre>
 var map = L.map("map", {
@@ Zeile 26: / Zeile 26: @@
 });
 </pre>
   /site/modules/FieldtypeLeafletMapMarker/MarkupLeafletMap.js
+'''
-Sieht das dann z.B. so aus:
+Sieht das dann z.B. so aus:'''
 <syntaxhighlight lang="javascript">
 this.init = function(mapID, lat, lng, provider) {

@@ Zeile 9: / Zeile 9: @@
 === CSS und JavaScript einbinden ===
-<pre>
+<syntaxhighlight lang="html5">
 <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>
-</pre>
+</syntaxhighlight>
 === Initialisierung anpassen ===