v2.19.0 - Adds [leaflet-scale] shortcode; closes bozdoz#57

README.md

@@ -32,6 +32,7 @@ Add a map generated with [LeafletJS](http://leafletjs.com/): an open-source Java
       - [[leaflet-geojson] Options](#leaflet-geojson-options)
     - [[leaflet-kml]](#leaflet-kml)
     - [[leaflet-gpx]](#leaflet-gpx)
+    - [[leaflet-scale]](#leaflet-scale)
   - [Frequently Asked Questions](#frequently-asked-questions)
     - [How Can I Add another Leaflet Plugin?](#how-can-i-add-another-leaflet-plugin)
   - [Contributing](#contributing)
@@ -274,6 +275,18 @@ Same idea as geojson (above), but takes KML files and loads [Mapbox's togeojson
 
 Same idea as geojson and KML (above), but takes GPX files and also loads [Mapbox's togeojson library](https://github.com/mapbox/togeojson)
 
+### [leaflet-scale]
+
+Can be added after any map, or enabled for all maps in the admin. If you want to extend it, you can extend window.WPLeafletMapPlugin.createScale with custom JavaScript.
+
+| Option           | Default   |
+| ---------------- | --------- |
+| `maxWidth`       | 100       |
+| `metric`         | 1 (true)  |
+| `imperial`       | 1 (true)  |
+| `updateWhenIdle` | 0 (false) |
+| `position`       | topright  |
+
 ## Frequently Asked Questions
 
 ### How Can I Add another Leaflet Plugin?

class.leaflet-map.php

@@ -67,7 +67,11 @@ class Leaflet_Map
         'leaflet-marker' => array(
             'file' => 'class.marker-shortcode.php',
             'class' => 'Leaflet_Marker_Shortcode'
-        )
+        ),
+        'leaflet-scale' => array(
+            'file' => 'class.scale-shortcode.php',
+            'class' => 'Leaflet_Scale_Shortcode'
+        ),
     );
 
     /**

class.plugin-settings.php

@@ -128,7 +128,7 @@ private function __construct()
                 )
             ),
             'fit_markers' => array(
-                'display_name'=>__('Fit Markers', 'leaflet-map'),
+                'display_name'=>__('Fit Bounds', 'leaflet-map'),
                 'default' => '0',
                 'type' => 'checkbox',
                 'helptext' => sprintf(
@@ -267,6 +267,15 @@ private function __construct()
                 'type' => 'textarea',
                 'helptext' => __('Attribution to a custom tile url.  Use semi-colons (;) to separate multiple.', 'leaflet-map')
             ),
+            'show_scale' => array(
+                'display_name' => __('Show Scale', 'leaflet-map'),
+                'default' => '0',
+                'type' => 'checkbox',
+                'helptext' => __(
+                    'Add a scale to each map. Can also be added via shortcode <br /> <code>[leaflet-scale]</code>', 
+                    'leaflet-map'
+                )
+            ),
             'geocoder' => array(
                 'display_name'=>__('Geocoder', 'leaflet-map'),
                 'default' => 'osm',

leaflet-map.php

@@ -8,7 +8,7 @@
  * Author URI: https://bozdoz.com/
  * Text Domain: leaflet-map
  * Domain Path: /languages/
- * Version: 2.18.0
+ * Version: 2.19.0
  * License: GPL2
  * Leaflet Map is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -29,7 +29,7 @@
     exit; 
 }
 
-define('LEAFLET_MAP__PLUGIN_VERSION', '2.18.0');
+define('LEAFLET_MAP__PLUGIN_VERSION', '2.19.0');
 define('LEAFLET_MAP__PLUGIN_FILE', __FILE__);
 define('LEAFLET_MAP__PLUGIN_DIR', plugin_dir_path(__FILE__));
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "wp-plugin-leaflet-map",
   "private": true,
-  "version": "2.18.0",
+  "version": "2.19.0",
   "description": "Leaflet Map WordPress Plugin",
   "scripts": {
     "start": "docker-compose up && exit 0",

readme.txt

@@ -7,8 +7,8 @@ Donate link: https://www.paypal.me/bozdoz
 Tags: leaflet, map, mobile, javascript, openstreetmap, mapquest, interactive
 Requires at least: 4.6
 Tested up to: 5.4.2
-Version: 2.18.0
-Stable tag: 2.18.0
+Version: 2.19.0
+Stable tag: 2.19.0
 License: GPLv2
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 
@@ -66,11 +66,11 @@ Add a line to the map by adding `[leaflet-line]`. You can specify the postions w
 
 Add a circle to the map by adding `[leaflet-circle]`. You can specify the position using `lat` and `lng` and the radius in meters using `radius`. You can also customize the style using [Leaflet's Path options](https://leafletjs.com/reference-1.3.4.html#path-option). Example: `[leaflet-circle message="max distance" lng=5.117909610271454 lat=52.097914814706094 radius=17500 color="#0DC143" fillOpacity=0.1]`.
 
-Or you can add a geojson shape via a url (make sure you are allowed to access it if it's not hosted on your own server): `[leaflet-geojson src="https://example.com/path/to.geojson"]`.  Add custom popups with field names; try out the default src file and fields like so (note fitbounds needs to be on leaflet-geojson (for now)): 
+Or you can add a geojson shape via a url (make sure you are allowed to access it if it's not hosted on your own server): `[leaflet-geojson src="https://example.com/path/to.geojson"]`.  Add custom popups with field names; try out the default src file and fields like so: 
 
 `
-[leaflet-map]
-[leaflet-geojson fitbounds]{name}[/leaflet-geojson]
+[leaflet-map fitbounds]
+[leaflet-geojson]{name}[/leaflet-geojson]
 `
 
 `name` is a property on that GeoJSON, and it can be accessed with curly brackets and the property name.
@@ -104,10 +104,6 @@ Pass the style attributes to the respective shortcodes (see all options on [Leaf
 
 `[leaflet-line color="red" weight=10 dasharray="2,15" addresses="Halifax, NS; Tanzania" classname=marching-ants]`
 
-= My map now says direct tile access has been discontinued (July 11, 2016); can you fix it? =
-
-Yes. Update to the newest plugin version, and reset defaults in settings.  You can choose to use MapQuest by signing up and supplying an app key, or use the default OpenStreetMap tiles (with attribution).  See Screenshot 8.
-
 = Can I add geojson? =
 
 Yes, just give it a source URL: `[leaflet-geojson src="https://example.com/path/to.geojson"]` It will also support leaflet geojson styles or geojson.io styles. Add a popup message with `[leaflet-geojson popup_text="hello!"]`, or add HTML by adding it to the content of the shortcode: `[leaflet-geojson]<a href="#">Link here, or use text from a feature property, like {title}</a>[/leaflet-geojson]` or identify a geojson property with `popup_property`, and each shape will use its own popup text if available.
@@ -118,28 +114,20 @@ Sure!? Use the same attributes as leaflet-geojson (above), but use the `[leaflet
 
 = Can I add a message to a marker? =
 
-Yes: `[leaflet-marker message="Hello there!" visible]`, where visible designates if it is visible on page load. Otherwise it is only visible when clicked.
+Yes: `[leaflet-marker visible]Hello there![/leaflet-marker]`, where visible designates if it is visible on page load. Otherwise it is only visible when clicked.
 
 = Can I use your plugin with a picture instead of a map? =
 
-Yes: Use `[leaflet-image src="path/to/image/file.jpg"]`.  See screenshots 3 - 5 for help setting that up. 
+Yes: Use `[leaflet-image src="path/to/image/file.jpg"]`.  See screenshots 3 - 5 for help setting that up.
 
 = Can I use my own self-hosted Leaflet files? =
 
-Yes: It's been added to the dashboard options! 
+Yes: Add your custom URL to the options in the admin page.
 
 = How can I add a link to a marker? =
 
 Use the marker format `[leaflet-marker]Click here![/leaflet-marker]` and add a hyperlink like you normally would with the WordPress editor.
 
-= Can I add a line to the map? =
-
-Use the line format `[leaflet-line]` with attributes `latlngs` or `addresses` separated by semi-colons to draw a line: `[leaflet-line addresses="Sayulita; Puerto Vallarta"]`.
-
-= Can I add my own attributions to custom tile layers? =
-
-Yes: use the keyword `attribution` in your shortcode (semi-colon separated list of attributions): `[leaflet-map attribution="Tiles courtesy of MapBox; Locations contributed by viewers"]`
-
 == Screenshots ==
 
 1. Put the shortcode into the post.
@@ -153,6 +141,10 @@ Yes: use the keyword `attribution` in your shortcode (semi-colon separated list
 
 == Changelog ==
 
+= 2.19.0 =
+* Adds [leaflet-scale] and global option in admin
+* Removes unnecessary console.log
+
 = 2.18.0 =
 * Adds table-view to leaflet-geojson: [leaflet-geojson table-view]
 * Creates maps in order their containers are rendered (no unique ids)

scripts/construct-leaflet-map.js

@@ -294,6 +294,10 @@
       waitFor('AjaxGeoJSON', cb);
     };
 
+    this.createScale = function (options) {
+      L.control.scale(options).addTo(this.getCurrentMap());
+    };
+
     // these accessible properties hold map objects
     this.maps = [];
     this.images = [];

shortcodes/class.map-shortcode.php

@@ -123,7 +123,7 @@ protected function getAtts($atts='')
         }
 
         /* allow a bunch of other options */
-        // http://leafletjs.com/reference-1.0.3.html#map-closepopuponclick
+        // http://leafletjs.com/reference.html#map
         $more_options = array(
             'closePopupOnClick' => isset($closepopuponclick) ? 
                 $closepopuponclick : null,
@@ -235,6 +235,12 @@ protected function getHTML($atts='', $content=null)
                 ?>);
         });</script><?php
 
+        $show_scale = isset($show_scale) ? $show_scale : $settings->get('show_scale');
+
+        if ($show_scale) {
+            echo do_shortcode('[leaflet-scale]');
+        }
+
         return ob_get_clean();
     }
 }

shortcodes/class.scale-shortcode.php

@@ -0,0 +1,72 @@
+<?php
+/**
+ * Scale Shortcode
+ *
+ * Use with [leaflet-scale ...]
+ * 
+ * @category Shortcode
+ * @author   Benjamin J DeLong <[email protected]>
+ */
+
+// Exit if accessed directly
+if (!defined('ABSPATH')) {
+    exit;
+}
+
+require_once LEAFLET_MAP__PLUGIN_DIR . 'shortcodes/class.shortcode.php';
+
+/**
+ * Leaflet Scale Shortcode Class
+ */
+class Leaflet_Scale_Shortcode extends Leaflet_Shortcode
+{
+    /**
+     * Get Script for Shortcode
+     * 
+     * @param string $atts    shortcode attributes
+     * @param string $content optional
+     * 
+     * @return string HTML
+     */
+    protected function getHTML($atts='', $content=null)
+    {
+        if (!empty($atts)) {
+            extract($atts);
+        }
+
+        /**
+         * Options:
+         * https://leafletjs.com/reference.html#control-scale
+        */
+
+        $options = array(
+          'maxWidth' => isset($maxwidth) ? $maxwidth : null,
+          'metric' => isset($metric) ? $metric : null,
+          'imperial' => isset($imperial) ? $imperial : null,
+          'updateWhenIdle' => isset($updateWhenIdle) ? $updateWhenIdle : null,
+          'position' => isset($position) ? $position : null,
+        );
+
+        $filters = array(
+          'maxWidth' => FILTER_VALIDATE_INT,
+          'metric' => FILTER_VALIDATE_BOOLEAN,
+          'imperial' => FILTER_VALIDATE_BOOLEAN,
+          'updateWhenIdle' => FILTER_VALIDATE_BOOLEAN,
+          'position' => FILTER_SANITIZE_STRING,
+        );
+
+        $options = $this->LM->json_sanitize($options, $filters);
+
+        ob_start();
+        ?>
+        <script>
+        // push deferred function
+        window.WPLeafletMapPlugin = window.WPLeafletMapPlugin || [];
+        window.WPLeafletMapPlugin.push(function () {
+            window.WPLeafletMapPlugin.createScale(<?php echo $options; ?>);
+        });
+        </script>
+        <?php
+        return ob_get_clean();
+    }
+}

templates/shortcode-helper.php

@@ -56,7 +56,7 @@
                     '[leaflet-marker draggable]',
                     ),
                 __("Marker Icon", 'leaflet-map') => array(
-                    '[leaflet-map zoom=14 address="Ha Ling, canmore" scrollwheel !detect-retina]',
+                    '[leaflet-map zoom=14 address="Ha Ling, canmore" scrollwheel !detect-retina show_scale]',
                     '[leaflet-marker iconUrl="https://i.imgur.com/Q54ueuO.png" iconSize="80,50" iconAnchor="40,60"]'
                     ),
                 __("SVG Marker Icon", 'leaflet-map') => array(
@@ -86,8 +86,9 @@
                     '[leaflet-polygon addresses="Miami; San Juan; Bermuda" color="green" fillColor="yellow"]<a href="https://en.wikipedia.org/wiki/Bermuda_Triangle" target="_blank">Bermuda Triangle</a>[/leaflet-polygon]'
                     ),
                 __("Basic Circle", 'leaflet-map') => array(
-                    '[leaflet-map lat=52 lng=5 zoom=9]',
-                    '[leaflet-circle lat=52 lng=5 radius=17500]'
+                    '[leaflet-map lat=52 lng=5 zoom=8.2 zoomcontrol !show_scale]',
+                    '[leaflet-circle lat=52 lng=5 radius=17500]',
+                    '[leaflet-scale position=topright]'
                     ),
                 __("Fitted Colored Line on Addresses", 'leaflet-map') => array(
                     '[leaflet-map fitbounds]',
@@ -98,7 +99,7 @@
                     '[leaflet-line color="red" weight=10 dasharray="2,15" addresses="Halifax, Nova Scotia; Tanzania" classname=marching-ants]'
                     ),
                 __("Disable all Interaction", 'leaflet-map') => array(
-                    '[leaflet-map address="las vegas" !boxZoom !doubleClickZoom !dragging !keyboard !scrollwheel !attribution !touchZoom]',
+                    '[leaflet-map address="las vegas" !boxZoom !doubleClickZoom !dragging !keyboard !scrollwheel !attribution !touchZoom !show_scale]',
                     ),
                 __("Add GeoJSON by URL", 'leaflet-map') => array(
                     '[leaflet-map fitbounds scrollwheel]',