diff --git a/CHANGELOG.md b/CHANGELOG.md index 16a7d6c..1512524 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ +# v1.0.3 +## 27 Sep 2018 +1.[](#update) + * Change width/height option defaults in the presence of a class for the map (to allow for responsive map size). + +# v1.0.2 +## 19 Sep 2018 +1.[](#update) + * Twig process 'style' option so that it can be set with Twig in page. + # v1.0.1 ## 18 Sep 2018 1.[](#update) diff --git a/README.md b/README.md index d1c65de..5279d3d 100644 --- a/README.md +++ b/README.md @@ -70,9 +70,10 @@ The plugin provides two shortcodes: - lat -- the latitude of the centre of the map, defaults to 51.505 (London). - lng -- the longitude of the centre of the map defaults to -0.09 - zoom -- an integer from 1-24, see MapLeaflet documentation. Defaults to 13. - - width -- the width in browser coordinates for the map, defaults to 100% - - height -- the height in browser coordinates, defaults to 530px + - width -- the width in browser coordinates for the map, without a class defaults to 100% (see below). + - height -- the height in browser coordinates, without a class defaults to 530px (see below). - classes -- adds value of `classes` to the **class** attribute of the **div** containing the map. Defaults to ''. + - If `classes` is defined, then it is assumed one of the classes sets the *width* and *height* of the div (to allow for responsive map sizing). *width* and *height* must be set by a class in order for the map to be generated. - contents: - Empty, in which case only a map is generated. - A set of `marker` codes. @@ -129,7 +130,7 @@ iconColor="white" [/map-leaflet] # San Fransisco Transport -[map-leaflet lat=37.7749 lng=-122.4194 zoom=13 mapname=transd style=transport-dark] +[map-leaflet lat=37.7749 lng=-122.4194 zoom=13 mapname=transd style=transport-dark ] [a-markers markerColor="lightblue" iconColor="white" ] @@ -155,6 +156,8 @@ Next look at the maps in the example to see how styling can dramatically improve Since the `style` can be changed inside the shortcode, different map styles can be given to the user to choose (for the two 3-party providers here). For example, a drop down box can be created in a form, and when the user responds with a map style change, it is included via Twig in the shortcode. +In the example, the map style is taken from the page header. + ### Comments - cache_enable should be set to false as there has to be a call to the tile provider to get the data. - Any of the fontawesome icons can be included as markers. diff --git a/blueprints.yaml b/blueprints.yaml index 82b858d..2b875ce 100644 --- a/blueprints.yaml +++ b/blueprints.yaml @@ -1,5 +1,5 @@ name: Map Marker Leaflet -version: 1.0.1 +version: 1.0.3 description: Short codes to embed a map and markers using Leaflet, Awesome-markers and OpenStreetMap (optionally other providers) icon: map author: diff --git a/shortcodes/MapLeafletShortcode.php b/shortcodes/MapLeafletShortcode.php index b5a22b6..b8fffc0 100644 --- a/shortcodes/MapLeafletShortcode.php +++ b/shortcodes/MapLeafletShortcode.php @@ -16,6 +16,9 @@ public function init() { $assets->addCss('plugin://map-marker-leaflet/assets/leaflet.awesome-markers.css'); $twig = $this->twig; $config = $this->config->get('plugins.map-marker-leaflet'); + if (isset($params['style'])) { + $style = $this->grav['twig']->processString($params['style']); + } else $style = ''; switch ($config['provider']) { case 'openstreetmap': $tilestanza = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'; @@ -29,38 +32,32 @@ public function init() { $attribution = 'Maps © Thunderforest Data © OpenStreetMap contributors'; $maxzoom = 18; $apikey = $config['apikey']; - $style = $config['t-style']; - if (isset($params['style'])) { - $opts = [ - 'cycle' , - 'transport' , - 'landscape' , - 'outdoors' , - 'transport-dark' , - 'spinal-map' , - 'pioneer' , - 'mobile-atlas' , - 'neighbourhood' - ]; // this should be taken from a yaml config. Hard code for the time being. - if ( in_array( $params['style'], $opts) ) $style = $params['style']; - } + $opts = [ + 'cycle' , + 'transport' , + 'landscape' , + 'outdoors' , + 'transport-dark' , + 'spinal-map' , + 'pioneer' , + 'mobile-atlas' , + 'neighbourhood' + ]; // this should be taken from a yaml config. Hard code for the time being. + if ( ! $style || ! in_array( $style, $opts) ) $style = $config['t-style']; break; case 'mapbox': $tilestanza = "https://api.tiles.mapbox.com/v4/{style}/{z}/{x}/{y}.png?access_token={apikey}"; $attribution = 'Map data © OpenStreetMap contributors, Imagery © Mapbox'; $maxzoom = 24; $apikey = $config['apikey']; - $style = $config['m-style']; - if (isset($params['style'])) { - $opts = [ - 'mapbox.streets' , - 'mapbox.outdoors' , - 'mapbox.light' , - 'mapbox.dark' , - 'mapbox.satellite' - ]; - if ( in_array( $params['style'], $opts) ) $style = $params['style']; - } + $opts = [ + 'mapbox.streets' , + 'mapbox.outdoors' , + 'mapbox.light' , + 'mapbox.dark' , + 'mapbox.satellite' + ]; + if ( ! $style || ! in_array( $style, $opts) ) $style = $config['m-style']; } $markercode = ''; if (is_string($s) ) { @@ -71,6 +68,12 @@ public function init() { foreach ($params as $k => $v) { if (is_string($v)) $params[$k] = $twig->processString($v); } + if (isset( $params['classes'] ) ) { + $width = $height = ''; + } else { + $height = isset( $params['height'])? $params['height'] : '530px'; + $width = isset( $params['width'])? $params['width'] : '100%'; + } $output = $twig->processTemplate('partials/mapleaflet.html.twig', [ 'tilestanza' => $tilestanza, @@ -82,8 +85,8 @@ public function init() { 'lat' => isset( $params['lat'] )? $params['lat'] : '51.505', 'lng' => isset( $params['lng'] )? $params['lng'] : '-0.09', 'zoom' => isset( $params['zoom'] )? $params['zoom'] : '13', - 'width' => isset( $params['width'])? $params['width'] : '100%', - 'height' => isset( $params['height'])? $params['height'] : '530px', + 'width' => $width, + 'height' => $height, 'classes' => isset( $params['classes'])? $params['classes'] : '', 'markercode' => $markercode ]); diff --git a/templates/partials/mapleaflet.html.twig b/templates/partials/mapleaflet.html.twig index 8ee5819..388855f 100644 --- a/templates/partials/mapleaflet.html.twig +++ b/templates/partials/mapleaflet.html.twig @@ -1,4 +1,4 @@ -
+