Processwire - Leaflet Map Marker Modul

Siehe auch

https://processwire.com/talk/topic/9745-module-leaflet-map/?page=5 (Forum)
https://github.com/gmclelland/FieldtypeLeafletMapMarker/blob/PW3/InputfieldLeafletMapMarker.module (Fork)
https://leafletjs.com/ (Leaflet Hauptseite)
https://leaflet-extras.github.io/leaflet-providers/preview/index.html (Karten Provider)
https://github.com/Leaflet/Leaflet.markercluster (Doku für Cluster Modul)

Überblick

Wird aus Zeitgründen vom Entwickler nicht sehr aktiv weitergepflegt. Allerdings gibt es ordentlichen Support im Forum und ein paar Forks auf Github.

Man kann für spezielle Anforderungen auch nur das Feld im Backend nutzen und Leaflet im Frontend selbst aufsetzen bzw. eigene Skripte nutzen. Das JavaScript für die Frontendausgabe im Modul findet man in:

MarkupLeafletMap.js (JavaScript für Frontend-Ausgabe)
MarkupLeafletMap.module (Inline JS für Frontend ) 

Quickstart

• Benötigt die Konfiguration von $additionalHeaderData. Das ist einfach ein String der in _init.php angelegt und im Header eingebunden wird. Damit lassen sich Zusätzliche Daten per Template rendern.
• Feldname im Backend ist hier map_leaflet
• Achtung Bug (V2.8.1): Immer den Geocoder auf der Seite benutzen. Die Standarddaten aus der Feldkonfiguration werden nicht richtig übernommen (Adressfeld) und es gibt Ausgabefehler.

Beispiel

$map = wire('modules')->get('MarkupLeafletMap');
$additionalHeaderData = $map->getLeafletMapHeaderLines();
$mapMarkup = $map->render($page, 'map_leaflet ,array('markerColour' => 'green'));

$content .= '
  <div class="content_bottom">
    <!-- Button GM -->
    <div class="gmroute" style="z-index: 30001;position: relative;height: 24px;right: 20px;top: 40px;">
      <a class="gmroute-link" href="https://www.google.de/maps/dir//Lange+Str.+9+D-72829+Engstingen" target="_blank" style="float: right;">Route planen</a>
    </div>
    <!-- Map -->
    <div class="col span_12">'.$mapMarkup.'</div>
  </div>';

Manuell Konfigurieren

Einfaches Beispiel das auch bei AJAX Seiten funktioniert und einen Button zur Google Maps Wegbeschreibung enthält.

// If AJAX put this in _init.php else uncomment next two lines
// $map = wire('modules')->get('MarkupLeafletMap');
// $additionalHeaderData = $map->getLeafletMapHeaderLines();

$myAdress = $page->map_leaflet->address;	// outputs the address you entered
$myLat = $page->map_leaflet->lat; 		// outputs the latitude
$myLng = $page->map_leaflet->lng; 		// outputs the longitude
$myZoom = $page->map_leaflet->zoom;		// outputs the zoom level

$mapMarkup = "
<div id='mleafletmap1'style='height:400px;'></div>
<script>
var mleafletmap1 = new jsMarkupLeafletMap();
 mleafletmap1.setOption('zoom', $myZoom);
  mleafletmap1.init('mleafletmap1', $myLat, $myLng, 'OpenStreetMap.Mapnik');
  var default_marker_icon = L.AwesomeMarkers.icon({ icon: 'home', iconColor: 'white', prefix: 'fa', markerColor: 'darkblue' });
  mleafletmap1.addMarkerIcon(default_marker_icon, $myLat, $myLng, '/kontakt/', 'Kontakt', '');
</script>
";

$content .= '
<div class="row">
  <div class="gmroute" style="z-index: 30001;position: relative;height: 24px;right: 20px;top: 40px;">
    <a class="gmroute-link" href="https://www.google.de/maps/dir//Meine+Str.+9+D-72829+Engstingen" target="_blank" style="float: right;">Route planen</a>
  </div>
  <div class="col-sm-12" style="height:400px;">'
    .$mapMarkup.'
  </div>
</div>

Beispiele

Leaflet Skripte selbst einbinden

Dies sind die benötigten Header Zeilen. leaflet.css und leaflet.js sollte dann entsprechend vorhanden sein. Der Rest kommat aus dem Modul Verzeichnis

$additionalHeaderData .= '

<!-- Styles supporting the use of Leaflet.js -->
<link rel="stylesheet" type="text/css" href="'.urls()->templates.'vendors/leaflet/leaflet.css" />
<link rel="stylesheet" type="text/css" href="'.urls()->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-markercluster/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="'.urls()->templates.'styles/MarkerCluster.Custom.css" />

<!-- Scripts supporting the use of Leaflet.js -->
<script type="text/javascript" src="'.urls()->templates.'vendors/leaflet/leaflet.js"></script>
<script type="text/javascript" src="'.urls()->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-markercluster/leaflet.markercluster.js"></script>
<script type="text/javascript" src="'.urls()->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-providers/leaflet-providers.js"></script>
<script type="text/javascript" src="'.urls()->siteModules.'FieldtypeLeafletMapMarker/MarkupLeafletMap.js"></script>

<!-- Extend Leaflet with Awesome.Markers -->
<link rel="stylesheet" type="text/css" href="'.urls()->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-awesome-markers/leaflet.awesome-markers.css" />
<script type="text/javascript" src="'.urls()->siteModules.'FieldtypeLeafletMapMarker/assets/leaflet-awesome-markers/leaflet.awesome-markers.min.js"></script>
				';

Scroll Zoom abschalten

In MarkupLeafletMap.js die Option hinzufügen.

this.options = {
        zoom: 10,
        center: null,
        scrollWheelZoom: false,
    };

    this._currentURL = '';
    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
        } );
        L.tileLayer.provider(provider).addTo(this.map);
    }

Allgemein

<div id='map'></div>

<script>
	var cities = new L.LayerGroup();

	L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
	L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
	L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
	L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);


	var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
			'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="http://mapbox.com">Mapbox</a>',
		mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

	var grayscale   = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
		streets  = L.tileLayer(mbUrl, {id: 'mapbox.streets',   attribution: mbAttr});

	var map = L.map('map', {
		center: [39.73, -104.99],
		zoom: 10,
		layers: [grayscale, cities]
	});

	var baseLayers = {
		"Grayscale": grayscale,
		"Streets": streets
	};

	var overlays = {
		"Cities": cities
	};

	L.control.layers(baseLayers, overlays).addTo(map);
</script>