Processwire - Leaflet Map Marker Modul

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.

$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>