LayoutBlock - Leaflet Map
Aus Wikizone
Version vom 13. April 2019, 12:55 Uhr von 37.49.72.8 (Diskussion) (Die Seite wurde neu angelegt: „Leaflet (OpenStreetMap) Karte zur Darstellung von einem oder mehrerer Orte. Markerfarbe wählbar. == Version 1.2 == === Templates / Felder === In der Repeater…“)
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;
/* 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.
*/
