LayoutBlock - Leaflet Map

Leaflet (OpenStreetMap) Karte zur Darstellung von einem oder mehrerer Orte. Markerfarbe wählbar.

Version 1.2

Templates / Felder

In der RepeaterMatrix layout_blocks ist das Feld map_leaflet (Karte (OSM)) angelegt. Es enthält folgende Felder:

fieldset_content - Inhalte
template_title - Template Name
title - Titel
text - Text (Textarea)
link - Link (URL)
location - Location (LeafletMapMarker)
fieldset_content_END
fieldset_space_and_layout
...
fieldset

Wenn in Template Name etwas eingegeben wird. Sucht ProcessWire in diesen Seiten nach Orten. In meinem Fall nenne ich das Template 'place'. Es enthält folgende Felder:

title
text - Text (Textarea)
link - Link (URL)
marker_icon - Marker Icon (Options)
marker_color - Marker Farbe (Options)
location - Location (LeafletMapMarker)

Das Feld marker_color enthält alle für das LeafletMapMarker Modul möglichen Farbwerte:

1=red|Rot
2=darkred|Dunkelrot
3=lightred|Hellrot
4=orange|Orange
5=beige|Beige
6=green|Grün
7=darkgreen|Dunkelgrün
8=lightgreen|Hellgrün
9=blue|Blau
10=darkblue|Dunkelblau
11=lightblue|Hellblau
12=purple|Violett
13=darkpurple|Dunkelviolett
14=pink|Pink
15=cadetblue|Kadettblau
16=white|Weiß
17=gray|Grau
18=lightgray|Hellgrau
19=black|Schwarz

Das Feld marker_icon entsprechend die vorgesehenen Icons

1=home|Home
2=pin|Pin
3=location-arrow|Location Arrow
4=music|Music
5=user|User
6=user-circle|User Circle
7=user-circle-o|User Circle O
8=wrench|Wrench
9=flag|Flag
10=flag-o|Flag O

partials/layout-blocks.inc

<?php namespace ProcessWire;
/* Renders layout blocks
 * uses repeater Matrix field 'layout_blocks'
 */
//var_dump($additionalHeaderData);
function renderLayoutBlocks($page,&$additionalHeaderData){
	$out = '';
	foreach($page->layout_blocks as $item) {
		// Hint: $item->type refers to name field
		// Every item will be rendered in templates/fields/layout_blocks/[field_name].php
		switch ($item->type) {
			case 'map_leaflet':
				$map = wire('modules')->get('MarkupLeafletMap');
				//$map->getLeafletMapHeaderLines(false);
				//$additionalHeaderData .= $map->getLeafletMapHeaderLines();

				$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 and Gesture Handling -->
				<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>
				<link rel="stylesheet" href="'.urls()->siteModules.'FieldtypeLeafletMapMarker/assets/Leaflet.GestureHandling/leaflet-gesture-handling.min.css" type="text/css">
				<script type="text/javascript" src="'.urls()->siteModules.'FieldtypeLeafletMapMarker/assets/Leaflet.GestureHandling/leaflet-gesture-handling.min.js"></script>
				';

				// Dont't forget to include font awesome if maanual loading headerlines
				$item->myMap = $map;
				$out .= $item->render();
				break;
			default:
				$out .= $item->render();
				break;
		}
		// todo catch error for not found item->type

		//var_dump($item->type);
		/*
		switch ($item->type) {
			case 'headline':
				$out .= $item->render(); // looks for templates/fields/layout_blocks/headline.php
				break;
			case 'simple_grid':
				$out .= $item->render();
				break;
			default:
				$out .= '<div class="message">Keine Renderdefinition gefunden für den Typ: '.$item->type.'</div>';
				break;
		}*/
	}
	return $out;

}

?>

fields/layout_blocks/map_leaflet.php

<?php namespace ProcessWire;
// Init

$sectionClasses = array('uk-section map-leaflet');
$sectionStyles = array();
$sectionClassesMarkup = '';
$sectionStylesMarkup = '';
$containerClasses = array('uk-container'); // content container not box-container
$containerClassesMarkup = '';
$gridClasses = array();
$gridClassesMarkup = '';
$colClasses = array();
$colClassesMarkup = '';
$prepend = '';
$append = '';
$bodyPrepend = '';
$bodyAppend = '';

// map

$options = array(
	"width" => "100%",
	"height" => "540px",
	"markerColour" => "darkblue",
	"markerLinkField" => "link",
	"markerTitleField" => "title",
	'popupFormatter' => function($page) { // anonymous callback for popup
			$out[] = "<h4>$page->title</h4>";
			$out[] = "<p>$page->text</p>"; // ** NB: Use escaped double quotes if HTML attributes needed **
			if($page->link != "#") $out[] = "<p><a href=\"{$page->link}\">{$page->link}</a></p>";
			return implode(' ', $out);
	},
	'markerFormatter' => function($page, $marker_options) { // callback for markers
		if(!empty($page->marker_icon->value)){
			$marker_options['icon'] = $page->marker_icon->value; // Override the default icon for this marker.
		}
		if(!empty($page->marker_color->value)){
			$marker_options['markerColor'] = $page->marker_color->value; // Override default marker color
		}
		return $marker_options;
	}
);

if( !empty($page->template_title) ){
	$mySelector = 'template='.$page->template_title;
	$places = $pages->find($mySelector);
	$mapMarkup = $page->myMap->render($places, 'location',$options);
}
else{
	$mapMarkup = $page->myMap->render($page,'location',$options);
}

// SECTION
if($page->section_style) $sectionClasses[] = $page->section_style->value;
if($page->section_size) $sectionClasses[] = $page->section_size->value;
if($page->no_space_top) $sectionClasses[] = "uk-padding-remove-top";
if($page->no_space_bottom) $sectionClasses[] = "uk-padding-remove-bottom";

// BOXED SECTION
if($page->section_boxed){
	// Add extra container & Classes
	if($page->uk_container_size) $containerClasses[] = $page->uk_container_size->value;
	$containerClassesMarkup = implode(' ',$containerClasses);
	$prepend .= "<div class=\"$containerClassesMarkup\">";
	$append .= '</div>';
	$gridClasses[] = 'uk-margin-remove';
	$colClasses[] = 'uk-padding';
}

// Fixed Width container
if($page->fixed_width){

	$bodyPrepend = '<div class="'.$page->fixed_width->value.'">';
	$bodyAppend = '</div>';
}

// CREATE MARKUP
$sectionClassesMarkup = implode(' ',$sectionClasses);
$sectionStylesMarkup = implode(' ',$sectionStyles);

// Put things together
$body = $bodyPrepend.$mapMarkup.$bodyAppend;
$out = '';
$out .= '
<div class="'.$sectionClassesMarkup.'" style="'.$sectionStylesMarkup.'">
	'.$body.'
</div>
<script type="text/javascript">

</script>
';

return $prepend.$out.$append;

Probleme beheben

JavaScript Fehler

Generell checken:

• Leaflet ist einmal fürs Backend und einmal fürs Frontend vorhanden. Ist der Ordner /site/templates/vendors/leaflet/ mit allen Dateien vorhanden ?
• Ladereihenfolge richtig ?

L is not defined

Sonstige Fehler

Icons werden nicht angezeigt

Font Awesome Problem ?