Bearbeiten von „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:
<pre>
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
</pre>
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:
<pre>
title
text - Text (Textarea)
link - Link (URL)
marker_icon - Marker Icon (Options)
marker_color - Marker Farbe (Options)
location - Location (LeafletMapMarker)
</pre>

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

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

Das '''Feld marker_icon''' entsprechend die vorgesehenen Icons

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

partials/layout-blocks.inc
<syntaxhighlight lang="php">
<?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;

}

?>
</syntaxhighlight>
fields/layout_blocks/map_leaflet.php
<syntaxhighlight lang="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;

/* Notes for reference...

Lets assume that your field is called 'map'. Here is how you would access the components of it from the API:

echo $page->map->address;	// outputs the address you entered
echo $page->map->lat; 		// outputs the latitude
echo $page->map->lng; 		// outputs the longitude
echo $page->map->zoom;		// outputs the zoom level
`````````

### Options

Option | Notes
------ | -----
`width` | Width of the map (type: string; default: 100%)
`height` | Height of the map (type: string; default: 300px)
`zoom` | Zoom level 1-25 (type: integer; default: from your field settings)
`id` | Map ID attribute (type: string; default: mgmap)
`class` | Map class attribute (type: string; default: MarkupLeafletMap)
`lat` | Map center latitude (type: string/float; default: from your field settings)
`lng` | Map center longitude (type: string/float; default: from your field settings)
`useStyles` | Whether to populate inline styles to the map div for width/height (type: boolean; default: true). Set to false only if you will style the map div yourself
`useMarkerSettings` | Makes single-marker map use marker settings rather than map settings (type: boolean; default: true)
`markerLinkField` | Page field to use for the marker link, or blank to not link (type: string; default: url)
`markerTitleField` | Page field to use for the marker title, or blank not to use a marker title (type: string; default: title)
`fitToMarkers` | When multiple markers are present, set map to automatically adjust to fit to the given markers (type: boolean; default: true)
`popupFormatter` | A PHP callback function, taking a `$page` as an argument, for generating additional content of a marker's popup box
`markerIcon` | The default name of the FontAwesome icon to use in the marker - without the prefix 'fa-'. (type: string; default: 'home')
`markerIconColour` | The default colour the of the FontAwesome icon (type: string; default 'white')
`markerColour` | The default colour of the marker body that surrounds the icon. (type: string; default 'darkblue'.) See Leaflet.AwesomeMarker's [markerColor](https://github.com/lvoogdt/Leaflet.awesome-markers#properties) entry for the available colours - they are limited.
`markerFormatter` | A PHP callback function (taking a PW `$page` and AwesomeMarker `$marker_options` as arguments) for customising the look of any marker on the map. This is called once for each marker being placed on the map and allows the defaults to be overridden for each marker.
`provider` | Defines which tile layer provider to use. (type: string; default: OpenStreetMap.Mapnik)
`scrollWheelZoom` | Whether to allow zooming with the mouse wheel. (type: boolean; default: true)

----------

## Tile Providers
You can use the `provider` option to tell the map which tile layer to use. Available layers can be previewed [here](https://leaflet-extras.github.io/leaflet-providers/preview/index.html).


## Customising A Marker's Visuals and Popup Contents

[Leaflet.AwesomeMarkers](https://github.com/lvoogdt/Leaflet.awesome-markers) and [FontAwesome](http://http://fontawesome.io/) are included in the module's assets and allow you to customise the look
of your markers very nicely.

### Changing the Default Marker Appearance

You can change the default appearance of your map markers by supplying values for any or all of the `markerIcon`,
`markerIconColour` and `markerColour` options that you pass into the `$map->render()` method. For instance, to make all
the markers Red, with a white flag icon, use this code...
```
<?php
$options = array('markerIcon' => 'flag', 'markerColour' => 'red');
echo $map->render($items, 'YOUR MARKER FIELD', $options);
?>
```

### Changing Per-Marker Appearance

As part of the options array, you can specify a callback that can override the values used to generate each marker's
appearance. The callback function takes a PW `$page` and some `$marker_options` as arguments and can use any fields from
the page to customise the visuals for the marker generated for that page.

If you are using a PHP5.4 or above, anonymous functions make this very easy. If you are stuck with an older version of
PHP, you can use a named function or method.

To support this, let's add a new field called 'marker_icon', of type text, to the template of the pages that hold the LeafletMapMarker
field.

```
<?php
$options = array(
    'markerFormatter' => function($page, $marker_options) {
        $marker_options['icon'] = $page->marker_icon; // Override the default icon for this marker.
        return $marker_options;
    }
);
echo $map->render($items, 'YOUR MARKER FIELD', $options);
?>

possible vals:
'icon'        => $options['markerIcon'],
'markerColor' => $options['markerColour'],
'iconColor'   => $options['markerIconColour'],

```
`$marker_options` is the array of [Leaflet.AwesomeMarker properties](https://github.com/lvoogdt/Leaflet.awesome-markers#properties) that will be used to generate this marker.

In this way, you can let the pages holding your LeafletMarkers also define their visuals.

### Customising Popup Content

You can similarly use a callback method to customise the content that appears within a marker's popup box. The return
value from this method should be an HTML snippet that will be placed into the popup box _by Javascript_.

```
<?php
$options = array(
    'popupFormatter' => function($page) {
        $out[] = "<strong>Contact: $page->phone_number</strong>";
        $out[] = "<img src=\"{$page->image->url}\" width=\"100\" height=\"100\" />"; // ** NB: Use escaped double quotes if HTML attributes needed **
        return implode('<br/>', $out);
    }
);

echo $map->render($items, 'YOUR MARKER FIELD', $options);
?>
```

_NB._ The example above uses a PW image field called 'image' that is configured as a single instance field.
*/

</syntaxhighlight>