width/height defaults with class

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)

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.

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:

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 &copy; <a href="www.thunderforest.com/">Thunderforest</a> Data &copy; <a href="www.opensteetmap.org/copyright">OpenStreetMap</a> 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 &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, Imagery &copy; <a href="https://www.mapbox.com/">Mapbox</a>';
                     $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
                 ]);

templates/partials/mapleaflet.html.twig

@@ -1,4 +1,4 @@
-<div id="{{mapname}}" style="width: {{ width }}; height: {{ height }};" class="{{classes}}"></div>
+<div id="{{mapname}}" {% if classes %}class="{{classes}}"{% else %}style="width: {{ width }}; height: {{ height }};" {%endif %}></div>
 <script>
 jQuery(document).ready(function () {
     var map = L.map('{{mapname}}').setView([{{ lat }}, {{ lng }}],{{ zoom }});