Plugin Directory

Changeset 1980356 for leaflet-map


Ignore:
Timestamp:
11/26/2018 04:15:02 AM (7 years ago)
Author:
bozdoz
Message:

v2.11.5 assumed booleans and maxbounds

Location:
leaflet-map
Files:
2 deleted
12 edited
30 copied

Legend:

Unmodified
Added
Removed
  • leaflet-map/tags/2.11.5/README.md

    r1946454 r1980356  
    1 Leaflet Map WordPress Plugin
    2 ========
     1# Leaflet Map WordPress Plugin
    32
    43![Leaflet](https://img.shields.io/badge/leaflet-1.3.4-green.svg?style=flat)
    5 ![WordPress](https://img.shields.io/badge/wordpress-4.9.8-green.svg?style=flat)
     4![WordPress](https://img.shields.io/badge/wordpress-5.0-green.svg?style=flat)
    65
    76![Header Image](https://ps.w.org/leaflet-map/assets/banner-1544x500.png?rev=1693083)
    87
    9 Add a map generated with [LeafletJS](http://leafletjs.com/): an open-source JavaScript library for mobile-friendly interactive maps. Map tiles are provided by default through [OpenStreetMap](http://www.openstreetmap.org/), or [MapQuest](https://www.mapquest.ca/) (with an app key).  Can be set per map with shortcode attributes or through the dashboard settings.
     8Add a map generated with [LeafletJS](http://leafletjs.com/): an open-source JavaScript library for mobile-friendly interactive maps. Map tiles are provided by default through [OpenStreetMap](http://www.openstreetmap.org/), or [MapQuest](https://www.mapquest.ca/) (with an app key). Can be set per map with shortcode attributes or through the dashboard settings.
    109
    1110![Admin Screenshot](https://imgur.com/W4BGTif.jpg)
    1211
    13 Installation
    14 ------------
    15 
    16 * (simple) Install via the WordPress plugins page on your WordPress site: `/wp-admin/plugin-install.php` (search Leaflet)
    17 
    18 * (needlessly complicated) Copy this repo (or download a release of it) into your WordPress plugins directory: `/wp-content/plugins/`. You might also need to name the directory 'leaflet-map', like so: `git clone https://github.com/bozdoz/wp-plugin-leaflet-map.git leaflet-map`
    19 
    20 General Usage
    21 -------------
     12## Installation
     13
     14- (simple) Install via the WordPress plugins page on your WordPress site: `/wp-admin/plugin-install.php` (search Leaflet)
     15
     16- (needlessly complicated) Copy this repo (or download a release of it) into your WordPress plugins directory: `/wp-content/plugins/`. You might also need to name the directory 'leaflet-map', like so: `git clone https://github.com/bozdoz/wp-plugin-leaflet-map.git leaflet-map`
     17
     18## General Usage
    2219
    2320```
     
    3532```
    3633
    37 You can have SVG markers, add shapes, geojson, kml, images, and more!  See available shortcodes below.
    38 
    39 Developing
    40 ----------
    41 
    42 This plugin uses Docker for development.  Simply 1. [install Docker](https://www.docker.com/get-started), 2. fork/clone the repo, and 3. execute this command from the repo's root directory in your terminal:
     34You can have SVG markers, add shapes, geojson, kml, images, and more! See available shortcodes below.
     35
     36## Developing
     37
     38This plugin uses Docker for development. Simply 1. [install Docker](https://www.docker.com/get-started), 2. fork/clone the repo, and 3. execute this command from the repo's root directory in your terminal:
    4339
    4440```bash
     
    5551You can also use these NPM scripts to interact with Docker, if you make changes to Docker-related files:
    5652
    57 To start: 
     53To start:
    5854
    5955```bash
     
    6965That's all for now! Thanks!
    7066
    71 Available Shortcodes
    72 --------------------
     67## Available Shortcodes
    7368
    7469### [leaflet-map]
     
    7671![Alternate map tiles](https://imgur.com/oURcNiX.jpg)
    7772
    78 Height, width, latitude, longitude and zoom are the basic attributes: 
     73Height, width, latitude, longitude and zoom are the basic attributes:
    7974
    8075```
     
    9085#### [leaflet-map] Options:
    9186
    92 Option | Default
    93 --- | ---
    94 `lat` and `lng` or `address` | lat: 44.67, lng: -63.61
    95 `zoom` | 12
    96 `height` | 250
    97 `width` | 100%
    98 `fit_markers` | 0 (false)
    99 `zoomcontrol` | 0 (false)
    100 `scrollwheel` | 0 (false)
    101 `doubleclickzoom` | 0 (false)
    102 `min_zoom` | 0
    103 `max_zoom` | 20
    104 `subdomains` | abc
    105 `attribution` | ©Leaflet ©OpenStreetMap
    106 `closepopuponclick` | false
    107 `trackresize` | false
    108 `boxzoom` | true
    109 `dragging` | true
    110 `keyboard` | true
     87| Option                       | Default                 |
     88| ---------------------------- | ----------------------- |
     89| `lat` and `lng` or `address` | lat: 44.67, lng: -63.61 |
     90| `zoom`                       | 12                      |
     91| `height`                     | 250                     |
     92| `width`                      | 100%                    |
     93| `fit_markers`                | 0 (false)               |
     94| `zoomcontrol`                | 0 (false)               |
     95| `scrollwheel`                | 0 (false)               |
     96| `doubleclickzoom`            | 0 (false)               |
     97| `min_zoom`                   | 0                       |
     98| `max_zoom`                   | 20                      |
     99| `subdomains`                 | abc                     |
     100| `attribution`                | ©Leaflet ©OpenStreetMap |
     101| `closepopuponclick`          | false                   |
     102| `trackresize`                | false                   |
     103| `boxzoom`                    | true                    |
     104| `dragging`                   | true                    |
     105| `keyboard`                   | true                    |
    111106
    112107---
     
    116111Much the same as leaflet-map above, but uses `src` for the source image.
    117112
    118 TBH, it's a huge mess, and probably shouldn't be used.  It might make a good image viewer with optional marker highlight points.  It requires far too much manual work at the moment. Recommended usage:
     113TBH, it's a huge mess, and probably shouldn't be used. It might make a good image viewer with optional marker highlight points. It requires far too much manual work at the moment. Recommended usage:
    119114
    120115```
    121116[leaflet-image src="path/to/img.jpg" zoom=1]
    122 [leaflet-marker draggable=1]
     117[leaflet-marker draggable]
    123118```
    124119
     
    127122#### [leaflet-image] Options:
    128123
    129 Option | Default
    130 --- | ---
    131 `src` | https://lorempixel.com/1000/1000/
    132 `zoom` | 12
    133 `height` | 250
    134 `width` | 100%
    135 `fit_markers` | 0 (false)
    136 `zoomcontrol` | 0 (false)
    137 `scrollwheel` | 0 (false)
    138 `doubleclickzoom` | 0 (false)
    139 `min_zoom` | 0
    140 `max_zoom` | 20
    141 `attribution` | ©Leaflet ©OpenStreetMap
     124| Option            | Default                          |
     125| ----------------- | -------------------------------- |
     126| `src`             | https://picsum.photos/1000/1000/ |
     127| `zoom`            | 12                               |
     128| `height`          | 250                              |
     129| `width`           | 100%                             |
     130| `fit_markers`     | 0 (false)                        |
     131| `zoomcontrol`     | 0 (false)                        |
     132| `scrollwheel`     | 0 (false)                        |
     133| `doubleclickzoom` | 0 (false)                        |
     134| `min_zoom`        | 0                                |
     135| `max_zoom`        | 20                               |
     136| `attribution`     | ©Leaflet ©OpenStreetMap          |
    142137
    143138---
     
    147142![Markers with HTML within a popup](https://imgur.com/ap38lwe.jpg)
    148143
    149 Add a marker to any map by adding `[leaflet-marker]` after any `[leaflet-map]` shortcode.  You can adjust the lat/lng in the same way, as well as some other basic functionality (popup message, draggable, visible on load). Also, if you want to add a link to a marker popup, use `[leaflet-marker]Message here: click here[/leaflet-marker]` and add a link like you normally would with the WordPress editor.
     144Add a marker to any map by adding `[leaflet-marker]` after any `[leaflet-map]` shortcode. You can adjust the lat/lng in the same way, as well as some other basic functionality (popup message, draggable, visible on load). Also, if you want to add a link to a marker popup, use `[leaflet-marker]Message here: click here[/leaflet-marker]` and add a link like you normally would with the WordPress editor.
    150145
    151146#### [leaflet-marker] Options:
    152147
    153 Option | Usage
    154 --- | ---
    155 `lat` and `lng` or `address` | Location on the map; defaults to map center; `lat`/`lng` are floats, `address` is a string
    156 `draggable` | Make a marker draggable (`boolean`); default `false`
    157 `title` | Add a hover-over message to your marker (different than popup)
    158 `alt` | Add an alt text to the marker image
    159 `zindexoffset` | Define the z-index for the marker image
    160 `opacity` | Define the css opacity for the marker image
    161 `iconurl` | Give a url for the marker image file
    162 `iconsize` | Set the size of the icon: e.g. "80,50" for 80px width 50px height
    163 `iconanchor` | Set the anchor position of the icon: e.g. "40,60" for 40px left 60px top
    164 `shadowurl` | Give a url for the marker shadow image file
    165 `shadowsize` | Set the size of the shadow: e.g. "80,50" for 80px width 50px height
    166 `shadowanchor` | Set the anchor position of the shadow: e.g. "40,60" for 40px left 60px top
    167 `popupanchor` | Set the anchor position of the popup: e.g. "40,60" for 40px left 60px top
    168 `svg` | Boolean for whether the marker should be created as an svg: default `false`
    169 `background` | Background color for an SVG marker (above)
    170 `color` | color of the SVG marker (above)
    171 `iconclass` | className for the marker image
     148| Option                       | Usage                                                                                      |
     149| ---------------------------- | ------------------------------------------------------------------------------------------ |
     150| `lat` and `lng` or `address` | Location on the map; defaults to map center; `lat`/`lng` are floats, `address` is a string |
     151| `draggable`                  | Make a marker draggable (`boolean`); default `false`                                       |
     152| `title`                      | Add a hover-over message to your marker (different than popup)                             |
     153| `alt`                        | Add an alt text to the marker image                                                        |
     154| `zindexoffset`               | Define the z-index for the marker image                                                    |
     155| `opacity`                    | Define the css opacity for the marker image                                                |
     156| `iconurl`                    | Give a url for the marker image file                                                       |
     157| `iconsize`                   | Set the size of the icon: e.g. "80,50" for 80px width 50px height                          |
     158| `iconanchor`                 | Set the anchor position of the icon: e.g. "40,60" for 40px left 60px top                   |
     159| `shadowurl`                  | Give a url for the marker shadow image file                                                |
     160| `shadowsize`                 | Set the size of the shadow: e.g. "80,50" for 80px width 50px height                        |
     161| `shadowanchor`               | Set the anchor position of the shadow: e.g. "40,60" for 40px left 60px top                 |
     162| `popupanchor`                | Set the anchor position of the popup: e.g. "40,60" for 40px left 60px top                  |
     163| `svg`                        | Boolean for whether the marker should be created as an svg: default `false`                |
     164| `background`                 | Background color for an SVG marker (above)                                                 |
     165| `color`                      | color of the SVG marker (above)                                                            |
     166| `iconclass`                  | className for the marker image                                                             |
    172167
    173168---
     
    179174Add a line to the map by adding `[leaflet-line]`. You can specify the postions with a list separated by semi-colon `;` or bar `|` using lat/lng: `[leaflet-line latlngs="41, 29; 44, 18"]` or addresses: `[leaflet-line addresses="Istanbul; Sarajevo"]`, or x/y coordinates for image maps.
    180175
    181 Add a popup to the line by adding text to the content of the shortcode: 
     176Add a popup to the line by adding text to the content of the shortcode:
    182177
    183178`[leaflet-line addresses="new york; chicago"]New York to Chicago[/leaflet-line]`
     
    185180#### [leaflet-line] Options
    186181
    187 Option | Usage
    188 --- | ---
    189 `addresses`, `latlngs`, or `coordinates` | For geocoded addresses, latitude/longitude, or x/y coordinates for Image Maps (see [leaflet-image]); ex: `[leaflet-line latlngs="41, 29; 44, 18"]` or addresses: `[leaflet-line addresses="Istanbul; Sarajevo"]`
    190 `fitbounds` | Fit the map to the bounds of the line (instead of whatever center you gave the map originally)
     182| Option                                   | Usage                                                                                                                                                                                      |
     183| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
     184| `addresses`, `latlngs`, or `coordinates` | For geocoded addresses, latitude/longitude, or x/y coordinates for Image Maps; ex: `[leaflet-line latlngs="41, 29; 44, 18"]` or addresses: `[leaflet-line addresses="Istanbul; Sarajevo"]` |
     185| `fitbounds`                              | Fit the map to the bounds of the line (instead of whatever center you gave the map originally)                                                                                             |
    191186
    192187And the following Shape Options. See https://leafletjs.com/reference-1.3.4.html#path for details.
     
    196191
    197192---
     193
    198194### [leaflet-circle]
    199195
     
    204200#### [leaflet-circle] Options
    205201
    206 Options | Usage
    207 --- | ---
    208 `address`, `lat/lng`, or `x/y` | For geocoded addresses, latitude/longitude, or x/y coordinates for Image Maps (see [leaflet-image]); ex: `[leaflet-circle lat=52 lng=5]` or addresses: `[leaflet-circle address="Amsterdam"]`
    209 `fitbounds` | Fit the map to the bounds of the circle (instead of whatever center you gave the map originally)
    210 radius | Radius of the circle in meters
    211 
    212 Includes all style options: See https://leafletjs.com/reference-1.3.4.html#path 
     202| Options                        | Usage                                                                                                                                                                                         |
     203| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
     204| `address`, `lat/lng`, or `x/y` | For geocoded addresses, latitude/longitude, or x/y coordinates for Image Maps (see [leaflet-image]); ex: `[leaflet-circle lat=52 lng=5]` or addresses: `[leaflet-circle address="Amsterdam"]` |
     205| `fitbounds`                    | Fit the map to the bounds of the circle (instead of whatever center you gave the map originally)                                                                                              |
     206| radius                         | Radius of the circle in meters                                                                                                                                                                |
     207
     208Includes all style options: See https://leafletjs.com/reference-1.3.4.html#path
    213209
    214210### [leaflet-geojson]
     
    216212[![Random GeoJSON created by me](https://imgur.com/fJktgtI.jpg)](https://gist.github.com/bozdoz/064a7101b95a324e8852fe9381ab9a18)
    217213
    218 Or you can add a geojson shape via a url: 
     214Or you can add a geojson shape via a url:
    219215
    220216```
     
    224220#### [leaflet-geojson] Options
    225221
    226 Option | Usage
    227 --- | ---
    228 `src` | Source of the geojson file
     222| Option | Usage                      |
     223| ------ | -------------------------- |
     224| `src`  | Source of the geojson file |
    229225
    230226### [leaflet-kml]
     
    232228Same idea as geojson (above), but takes KML files and loads [Mapbox's togeojson library](https://github.com/mapbox/togeojson)
    233229
    234 Contributing
    235 -------------
     230## Contributing
    236231
    237232[View Contribution guidelines](https://github.com/bozdoz/wp-plugin-leaflet-map/blob/master/CONTRIBUTING.md)
    238233
    239 Wish List
    240 ---------
    241 
    242 * A map editor/shortcode generator (so users can see what they're adding to the page)
     234## Wish List
     235
     236- A map editor/shortcode generator (so users can see what they're adding to the page)
  • leaflet-map/tags/2.11.5/leaflet-map.php

    r1946454 r1980356  
    99 * Text Domain: leaflet-map
    1010 * Domain Path: /languages/
    11  * Version: 2.11.4
     11 * Version: 2.11.5
    1212 * License: GPL2
    1313 * Leaflet Map is free software: you can redistribute it and/or modify
     
    3030}
    3131
    32 define('LEAFLET_MAP__PLUGIN_VERSION', '2.11.4');
     32define('LEAFLET_MAP__PLUGIN_VERSION', '2.11.5');
    3333define('LEAFLET_MAP__PLUGIN_FILE', __FILE__);
    3434define('LEAFLET_MAP__PLUGIN_DIR', plugin_dir_path(__FILE__));
  • leaflet-map/tags/2.11.5/readme.txt

    r1946454 r1980356  
    77Tags: leaflet, map, mobile, javascript, openstreetmap, mapquest, interactive
    88Requires at least: 3.0.1
    9 Tested up to: 4.9.8
    10 Version: 2.11.4
    11 Stable tag: 2.11.4
     9Tested up to: 5.0
     10Version: 2.11.5
     11Stable tag: 2.11.5
    1212License: GPLv2
    1313License URI: https://www.gnu.org/licenses/gpl-2.0.html
     
    7070= Can I have an SVG Marker? =
    7171
    72 Yes! Convert the default marker into an svg with a shortcode like this: `[leaflet-marker svg="true" color="white" iconClass="fab fa-wordpress-simple" background="red"]` The `iconClass` is perfect for adding a [font-awesome](https://fontawesome.com/icons?d=gallery) icon.
     72Yes! Convert the default marker into an svg with a shortcode like this: `[leaflet-marker svg color="white" iconClass="fab fa-wordpress-simple" background="red"]` The `iconClass` is perfect for adding a [font-awesome](https://fontawesome.com/icons?d=gallery) icon.
    7373
    7474= How do I change the style for lines/geojson? =
     
    9292= Can I add a message to a marker? =
    9393
    94 Yes: `[leaflet-marker message="Hello there!" visible="true"]`, where visible designates if it is visible on page load. Otherwise it is only visible when clicked.
     94Yes: `[leaflet-marker message="Hello there!" visible]`, where visible designates if it is visible on page load. Otherwise it is only visible when clicked.
    9595
    9696= Can I use your plugin with a picture instead of a map? =
     
    1191192. See the shortcode play out on the front end.
    1201203. For `[leaflet-image]` upload an image, and copy the URL from the right-hand side
    121 4. For `[leaflet-image]` paste that image URL into an attribute titled `source`: example: `src="http://lorempixel.com/1000/1000/"`.
     1214. For `[leaflet-image]` paste that image URL into an attribute titled `source`: example: `src="https://picsum.photos/1000/1000/"`.
    1221225. See the `[leaflet-image]` on the front end.
    123 6. If you use `[leaflet-marker draggable=true]`, then you can drag the marker where you want it, open a developers console, and see the specific shortcode to use.
     1236. If you use `[leaflet-marker draggable]`, then you can drag the marker where you want it, open a developers console, and see the specific shortcode to use.
    1241247. Add geojson via URL: `[leaflet-geojson src="https://example.com/path/to.geojson"]`
    1251258. MapQuest requires an app key, get it from their website; alternatively, you can use OpenStreetMap as a free tile service (remember to add an attribution where necessary).
    126126
    127127== Changelog ==
     128
     129= 2.11.5 =
     130* Added assumed-boolean attributes to all shortcodes; ex: `[leaflet-marker draggable svg]` would be the same as `[leaflet-marker draggable=1 svg=1]`
    128131
    129132= 2.11.4 =
  • leaflet-map/tags/2.11.5/scripts/leaflet-svg-icon.js

    r1851128 r1980356  
    11L.SVGIcon = L.Icon.extend({
    2     options: {
    3         iconSize: [26, 42],
    4         popupAnchor: [1, -42],
    5         tooltipAnchor: [16, -28],
    6         iconClass: '',
    7         background: '#2b82cb',
    8         color: 'white'
    9     },
    10     createIcon: function (oldIcon) {
    11         var div = (oldIcon && oldIcon.tagName === 'DIV') ?
    12             oldIcon : document.createElement('div');
    13         var options = this.options;
    14         var size = options.iconSize;
    15         var x = size[0];
    16         var y = size[1];
     2  options: {
     3    iconSize: [26, 42],
     4    popupAnchor: [1, -42],
     5    tooltipAnchor: [16, -28],
     6    iconClass: '',
     7    background: '#2b82cb',
     8    color: 'white'
     9  },
     10  createIcon: function(oldIcon) {
     11    var div =
     12      oldIcon && oldIcon.tagName === 'DIV'
     13        ? oldIcon
     14        : document.createElement('div')
     15    var options = this.options
     16    var size = options.iconSize
     17    var x = size[0]
     18    var y = size[1]
    1719
    18         var svgCreate = function svgCreate (tag, attrs) {
    19             var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
    20             for (var k in attrs) {
    21                 el.setAttribute(k, attrs[k]);
    22             }
    23             return el;
    24         };
     20    var svgCreate = function svgCreate(tag, attrs) {
     21      var el = document.createElementNS('http://www.w3.org/2000/svg', tag)
     22      for (var k in attrs) {
     23        el.setAttribute(k, attrs[k])
     24      }
     25      return el
     26    }
    2527
    26         var svg = svgCreate('svg', {
    27             viewBox: '0 0 365 560'
    28         });
    29        
    30         var path = svgCreate('path', {
    31             fill: this.options.background,
    32             d: 'M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,' +
    33                 '283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9' +
    34                 'C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,' +
    35                 '175.3,357.4S182.9,551.7,182.9,551.7z'
    36         });
    37        
    38         svg.appendChild(path);
    39         div.appendChild(svg);
    40        
    41         div.setAttribute('style', 'margin-left: ' + (-x/2) + 'px;' +
    42             'margin-top: ' + -y + 'px;' +
    43             'width: ' + x + 'px;' +
    44             'height: ' + y + 'px;'
    45         );
     28    var svg = svgCreate('svg', {
     29      viewBox: '0 0 365 560'
     30    })
    4631
    47         // add icon
    48         var i = document.createElement('i');
    49         i.className = this.options.iconClass;
    50         i.setAttribute('style', 'position:absolute;' +
    51             'top: 34%;' +
    52             'left: 50%;' +
    53             'transform: translate3d(-50%, -34%, 0);' +
    54             'color: ' + (this.options.color) + ';' +
    55             'line-height: 0;'
    56         );
    57         div.appendChild(i);
     32    var path = svgCreate('path', {
     33      fill: this.options.background,
     34      d:
     35        'M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,' +
     36        '283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9' +
     37        'C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,' +
     38        '175.3,357.4S182.9,551.7,182.9,551.7z'
     39    })
    5840
    59         return div;
    60     }
    61 });
     41    svg.appendChild(path)
     42    div.appendChild(svg)
     43
     44    div.setAttribute(
     45      'style',
     46      'margin-left: ' +
     47        -x / 2 +
     48        'px;' +
     49        'margin-top: ' +
     50        -y +
     51        'px;' +
     52        'width: ' +
     53        x +
     54        'px;' +
     55        'height: ' +
     56        y +
     57        'px;'
     58    )
     59
     60    // add icon
     61    var i = document.createElement('i')
     62    i.className = this.options.iconClass
     63    i.setAttribute(
     64      'style',
     65      'position:absolute;' +
     66        'top: 20%;' +
     67        'left: 50%;' +
     68        'transform: translate3d(-50%, -20%, 0);' +
     69        'color: ' +
     70        this.options.color +
     71        ';' +
     72        'line-height: 0;' +
     73        'display: flex;' +
     74        'justify-content: center;' +
     75        'align-items: center;'
     76    )
     77    div.appendChild(i)
     78
     79    return div
     80  }
     81})
    6282
    6383L.SVGMarker = L.Marker.extend({
    64     initialize: function (latlng, options) {
    65         options = options || {};
    66         var svg_options = L.extend({},
    67             L.SVGIcon.prototype.options,
    68             options
    69         );
    70         options.icon = new L.SVGIcon( svg_options );
    71         L.Marker.prototype.initialize.call(this, latlng, options);
    72     }
    73 });
     84  initialize: function(latlng, options) {
     85    options = options || {}
     86    var svg_options = L.extend({}, L.SVGIcon.prototype.options, options)
     87    options.icon = new L.SVGIcon(svg_options)
     88    L.Marker.prototype.initialize.call(this, latlng, options)
     89  }
     90})
  • leaflet-map/tags/2.11.5/scripts/leaflet-svg-icon.min.js

    r1851128 r1980356  
    1 L.SVGIcon=L.Icon.extend({options:{iconSize:[26,42],popupAnchor:[1,-42],tooltipAnchor:[16,-28],iconClass:"",background:"#2b82cb",color:"white"},createIcon:function(t){var e=t&&"DIV"===t.tagName?t:document.createElement("div"),o=this.options.iconSize,i=o[0],n=o[1],r=function(t,e){var o=document.createElementNS("http://www.w3.org/2000/svg",t);for(var i in e)o.setAttribute(i,e[i]);return o},a=r("svg",{viewBox:"0 0 365 560"}),c=r("path",{fill:this.options.background,d:"M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,175.3,357.4S182.9,551.7,182.9,551.7z"});a.appendChild(c),e.appendChild(a),e.setAttribute("style","margin-left: "+-i/2+"px;margin-top: "+-n+"px;width: "+i+"px;height: "+n+"px;");var p=document.createElement("i");return p.className=this.options.iconClass,p.setAttribute("style","position:absolute;top: 34%;left: 50%;transform: translate3d(-50%, -34%, 0);color: "+this.options.color+";line-height: 0;"),e.appendChild(p),e}}),L.SVGMarker=L.Marker.extend({initialize:function(t,e){e=e||{};var o=L.extend({},L.SVGIcon.prototype.options,e);e.icon=new L.SVGIcon(o),L.Marker.prototype.initialize.call(this,t,e)}});
     1L.SVGIcon=L.Icon.extend({options:{iconSize:[26,42],popupAnchor:[1,-42],tooltipAnchor:[16,-28],iconClass:"",background:"#2b82cb",color:"white"},createIcon:function(t){var e=t&&"DIV"===t.tagName?t:document.createElement("div"),n=this.options.iconSize,o=n[0],i=n[1],r=function(t,e){var n=document.createElementNS("http://www.w3.org/2000/svg",t);for(var o in e)n.setAttribute(o,e[o]);return n},c=r("svg",{viewBox:"0 0 365 560"}),a=r("path",{fill:this.options.background,d:"M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,175.3,357.4S182.9,551.7,182.9,551.7z"});c.appendChild(a),e.appendChild(c),e.setAttribute("style","margin-left: "+-o/2+"px;margin-top: "+-i+"px;width: "+o+"px;height: "+i+"px;");var s=document.createElement("i");return s.className=this.options.iconClass,s.setAttribute("style","position:absolute;top: 20%;left: 50%;transform: translate3d(-50%, -20%, 0);color: "+this.options.color+";line-height: 0;display: flex;justify-content: center;align-items: center;"),e.appendChild(s),e}}),L.SVGMarker=L.Marker.extend({initialize:function(t,e){e=e||{};var n=L.extend({},L.SVGIcon.prototype.options,e);e.icon=new L.SVGIcon(n),L.Marker.prototype.initialize.call(this,t,e)}});
  • leaflet-map/tags/2.11.5/shortcodes/class.image-shortcode.php

    r1943975 r1980356  
    3939        /* only required field for image map (src/source) */
    4040        $src = empty($src) ? '' : $src;
    41         $source = empty($source) ? 'https://lorempixel.com/1000/1000/' : $source;
     41        $source = empty($source) ? 'https://picsum.photos/1000/1000/' : $source;
    4242        $source = empty($src) ? $source : $src;
    4343
  • leaflet-map/tags/2.11.5/shortcodes/class.map-shortcode.php

    r1943975 r1980356  
    5555     *
    5656     * @param array|string $atts    key value pairs from shortcode
    57      * @param string       $content inner text in shortcode
    5857     *
    5958     * @return array new atts, which is actually an array
    6059     */
    61     protected function getAtts($atts='', $content=null)
     60    protected function getAtts($atts='')
    6261    {
    6362        $atts = (array) $atts;
     
    8887        $atts['width'] .= is_numeric($atts['width']) ? 'px' : '';   
    8988
     89        // maxbounds as string: maxbounds="50, -114; 52, -112"
     90        $maxBounds = isset($maxbounds) ? $maxbounds : null;
     91
     92        if ($maxBounds) {
     93            try {
     94                // explode by semi-colons and commas
     95                $maxBounds = preg_split("[;|,]", $maxBounds);
     96                print_r($maxBounds);
     97                $maxBounds = array(
     98                    array(
     99                        $maxBounds[0], $maxBounds[1]
     100                    ),
     101                    array(
     102                        $maxBounds[2], $maxBounds[3]
     103                    )
     104                );
     105                print_r($maxBounds);
     106            } catch (Exception $e) {
     107                $maxBounds = null;
     108            }
     109        }
     110
    90111        /*
    91112        need to allow 0 or empty for removal of attribution
     
    103124            'boxZoom' => isset($boxzoom) ? $boxzoom : null,
    104125            'dragging' => isset($dragging) ? $dragging : null,
    105             'keyboard' => isset($keyboard) ? $keyboard : null
     126            'keyboard' => isset($keyboard) ? $keyboard : null,
    106127        );
    107        
     128
    108129        // filter out nulls
    109130        $more_options = $this->LM->filter_null($more_options);
     
    111132        // change string booleans to booleans
    112133        $more_options = filter_var_array($more_options, FILTER_VALIDATE_BOOLEAN);
     134
     135        if ($maxBounds) {
     136            $more_options['maxBounds'] = $maxBounds;
     137        }
    113138
    114139        // wrap as JSON
  • leaflet-map/tags/2.11.5/shortcodes/class.shortcode.php

    r1851128 r1980356  
    4040     * Instantiate class and get HTML for shortcode
    4141     *
    42      * @param array  $atts    string
     42     * @param array  $atts    string|array
    4343     * @param string $content Optional
    4444     *
    4545     * @return string (see above)
    4646     */
    47     public static function shortcode($atts, $content = null)
     47    public static function shortcode($atts = '', $content = null)
    4848    {
    4949        $class = self::getClass();
    50         $instance = new $class($atts, $content);
     50        $instance = new $class();
     51
     52        // swap sequential array with associative array
     53        // this enables assumed-boolean attributes,
     54        // like: [leaflet-marker draggable svg]
     55        // meaning draggable=1 svg=1
     56        if (!empty($atts)) {
     57            foreach($atts as $k => $v) {
     58                if (is_numeric($k) && !key_exists($v, $atts)) {
     59                    $atts[$v] = 1;
     60                }
     61            }
     62        }
     63
    5164        return $instance->getHTML($atts, $content);
    5265    }
  • leaflet-map/tags/2.11.5/templates/shortcode-helper.php

    r1943975 r1980356  
    2727        $drag = __('Drag Me', 'leaflet-map');
    2828
    29         echo do_shortcode('[leaflet-map zoom=2 zoomcontrol=1 doubleClickZoom=1 height=300 scrollwheel=1]');
    30         echo do_shortcode(sprintf('[leaflet-marker draggable=1 visible="true"] %s [/leaflet-marker]',
     29        echo do_shortcode('[leaflet-map zoom=2 zoomcontrol doubleClickZoom height=300 scrollwheel]');
     30        echo do_shortcode(sprintf('[leaflet-marker draggable visible] %s [/leaflet-marker]',
    3131            $drag
    3232        ));
     
    5353                    ),
    5454                __("Draggable Marker", 'leaflet-map') => array(
    55                     '[leaflet-map zoom=8 lat=-33.85 lng=151.21 scrollwheel=1]',
    56                     '[leaflet-marker draggable=1]',
     55                    '[leaflet-map zoom=8 lat=-33.85 lng=151.21 scrollwheel]',
     56                    '[leaflet-marker draggable]',
    5757                    ),
    5858                __("Marker Icon", 'leaflet-map') => array(
    59                     '[leaflet-map zoom=10 address="cochrane, Ontario" scrollwheel=1]',
     59                    '[leaflet-map zoom=10 address="cochrane, Ontario" scrollwheel]',
    6060                    '[leaflet-marker iconUrl="https://i.imgur.com/Q54ueuO.png" iconSize="80,50" iconAnchor="40,60"]'
    6161                    ),
     62                __("SVG Marker Icon", 'leaflet-map') => array(
     63                    '[leaflet-map address="twilight lane, nova scotia" scrollwheel]',
     64                    '[leaflet-marker svg background="#654" iconClass="dashicons dashicons-star-filled" color="gold"]My Favorite Place in the World[/leaflet-marker]'
     65                    ),
    6266                __("Zoom Buttons", 'leaflet-map') => array(
    63                     '[leaflet-map zoom=9 lat=48.855 lng=2.35 zoomcontrol=1]',
     67                    '[leaflet-map zoom=9 lat=48.855 lng=2.35 zoomcontrol]',
    6468                    ),
    6569                __("Alternate Map Tiles w/scrollwheel", 'leaflet-map') => array(
    66                     '[leaflet-map zoom=2 scrollwheel=1 lat=-2.507 lng=32.902 tileurl=https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg subdomains=abcd attribution="Map tiles by Stamen Design, under CC BY 3.0."]',
     70                    '[leaflet-map zoom=2 scrollwheel lat=-2.507 lng=32.902 tileurl=https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg subdomains=abcd attribution="Map tiles by Stamen Design, under CC BY 3.0."]',
    6771                    ),
    6872                __("Marker Popup Messages (on click)", 'leaflet-map') => array(
     
    7579                    ),
    7680                __("Basic Lines w/Scrollwheel", 'leaflet-map') => array(
    77                     '[leaflet-map lat=41 lng=29 scrollwheel=1 zoom=6]',
     81                    '[leaflet-map lat=41 lng=29 scrollwheel zoom=6]',
    7882                    '[leaflet-line latlngs="41, 29; 44, 18;"]'
    7983                    ),
     
    8488                __("Fitted Colored Line on Addresses", 'leaflet-map') => array(
    8589                    '[leaflet-map]',
    86                     '[leaflet-line color="purple" addresses="Sayulita; Puerto Vallarta;" fitline=1]'
     90                    '[leaflet-line color="purple" addresses="Sayulita; Puerto Vallarta;" fitline]'
    8791                    ),
    8892                __("More Crazy Line Attributes", 'leaflet-map') => array(
    8993                    '[leaflet-map]',
    90                     '[leaflet-line color="red" weight=10 dasharray="2,15" addresses="Halifax, NS; Tanzania" classname=marching-ants fitbounds=1]'
     94                    '[leaflet-line color="red" weight=10 dasharray="2,15" addresses="Halifax, Nova Scotia; Tanzania" classname=marching-ants fitbounds]'
    9195                    ),
    9296                __("Disable all Interaction", 'leaflet-map') => array(
     
    9599                __("Add GeoJSON by URL (with popups)", 'leaflet-map') => array(
    96100                    '[leaflet-map doubleClickZoom=true scrollwheel=true]',
    97                     '[leaflet-geojson src=https://cdn.rawgit.com/bozdoz/064a7101b95a324e8852fe9381ab9a18/raw/03f4f54b13a3a7e256732760a8b679818d9d36fc/map.geojson fitbounds=1 popup_property="popup-text"]'
     101                    '[leaflet-geojson src=https://cdn.rawgit.com/bozdoz/064a7101b95a324e8852fe9381ab9a18/raw/03f4f54b13a3a7e256732760a8b679818d9d36fc/map.geojson fitbounds popup_property="popup-text"]'
    98102                    ),
    99                 __("Test Image Map", 'leaflet-map') => array(
    100                     '[leaflet-image zoom=1 zoomcontrol=1 scrollwheelzoom=1 attribution=0]',
     103                __("Image Map", 'leaflet-map') => array(
     104                    '[leaflet-image zoom=1 zoomcontrol scrollwheelzoom attribution=0]',
    101105                    '[leaflet-marker]'
    102106                    )
  • leaflet-map/trunk/README.md

    r1946454 r1980356  
    1 Leaflet Map WordPress Plugin
    2 ========
     1# Leaflet Map WordPress Plugin
    32
    43![Leaflet](https://img.shields.io/badge/leaflet-1.3.4-green.svg?style=flat)
    5 ![WordPress](https://img.shields.io/badge/wordpress-4.9.8-green.svg?style=flat)
     4![WordPress](https://img.shields.io/badge/wordpress-5.0-green.svg?style=flat)
    65
    76![Header Image](https://ps.w.org/leaflet-map/assets/banner-1544x500.png?rev=1693083)
    87
    9 Add a map generated with [LeafletJS](http://leafletjs.com/): an open-source JavaScript library for mobile-friendly interactive maps. Map tiles are provided by default through [OpenStreetMap](http://www.openstreetmap.org/), or [MapQuest](https://www.mapquest.ca/) (with an app key).  Can be set per map with shortcode attributes or through the dashboard settings.
     8Add a map generated with [LeafletJS](http://leafletjs.com/): an open-source JavaScript library for mobile-friendly interactive maps. Map tiles are provided by default through [OpenStreetMap](http://www.openstreetmap.org/), or [MapQuest](https://www.mapquest.ca/) (with an app key). Can be set per map with shortcode attributes or through the dashboard settings.
    109
    1110![Admin Screenshot](https://imgur.com/W4BGTif.jpg)
    1211
    13 Installation
    14 ------------
    15 
    16 * (simple) Install via the WordPress plugins page on your WordPress site: `/wp-admin/plugin-install.php` (search Leaflet)
    17 
    18 * (needlessly complicated) Copy this repo (or download a release of it) into your WordPress plugins directory: `/wp-content/plugins/`. You might also need to name the directory 'leaflet-map', like so: `git clone https://github.com/bozdoz/wp-plugin-leaflet-map.git leaflet-map`
    19 
    20 General Usage
    21 -------------
     12## Installation
     13
     14- (simple) Install via the WordPress plugins page on your WordPress site: `/wp-admin/plugin-install.php` (search Leaflet)
     15
     16- (needlessly complicated) Copy this repo (or download a release of it) into your WordPress plugins directory: `/wp-content/plugins/`. You might also need to name the directory 'leaflet-map', like so: `git clone https://github.com/bozdoz/wp-plugin-leaflet-map.git leaflet-map`
     17
     18## General Usage
    2219
    2320```
     
    3532```
    3633
    37 You can have SVG markers, add shapes, geojson, kml, images, and more!  See available shortcodes below.
    38 
    39 Developing
    40 ----------
    41 
    42 This plugin uses Docker for development.  Simply 1. [install Docker](https://www.docker.com/get-started), 2. fork/clone the repo, and 3. execute this command from the repo's root directory in your terminal:
     34You can have SVG markers, add shapes, geojson, kml, images, and more! See available shortcodes below.
     35
     36## Developing
     37
     38This plugin uses Docker for development. Simply 1. [install Docker](https://www.docker.com/get-started), 2. fork/clone the repo, and 3. execute this command from the repo's root directory in your terminal:
    4339
    4440```bash
     
    5551You can also use these NPM scripts to interact with Docker, if you make changes to Docker-related files:
    5652
    57 To start: 
     53To start:
    5854
    5955```bash
     
    6965That's all for now! Thanks!
    7066
    71 Available Shortcodes
    72 --------------------
     67## Available Shortcodes
    7368
    7469### [leaflet-map]
     
    7671![Alternate map tiles](https://imgur.com/oURcNiX.jpg)
    7772
    78 Height, width, latitude, longitude and zoom are the basic attributes: 
     73Height, width, latitude, longitude and zoom are the basic attributes:
    7974
    8075```
     
    9085#### [leaflet-map] Options:
    9186
    92 Option | Default
    93 --- | ---
    94 `lat` and `lng` or `address` | lat: 44.67, lng: -63.61
    95 `zoom` | 12
    96 `height` | 250
    97 `width` | 100%
    98 `fit_markers` | 0 (false)
    99 `zoomcontrol` | 0 (false)
    100 `scrollwheel` | 0 (false)
    101 `doubleclickzoom` | 0 (false)
    102 `min_zoom` | 0
    103 `max_zoom` | 20
    104 `subdomains` | abc
    105 `attribution` | ©Leaflet ©OpenStreetMap
    106 `closepopuponclick` | false
    107 `trackresize` | false
    108 `boxzoom` | true
    109 `dragging` | true
    110 `keyboard` | true
     87| Option                       | Default                 |
     88| ---------------------------- | ----------------------- |
     89| `lat` and `lng` or `address` | lat: 44.67, lng: -63.61 |
     90| `zoom`                       | 12                      |
     91| `height`                     | 250                     |
     92| `width`                      | 100%                    |
     93| `fit_markers`                | 0 (false)               |
     94| `zoomcontrol`                | 0 (false)               |
     95| `scrollwheel`                | 0 (false)               |
     96| `doubleclickzoom`            | 0 (false)               |
     97| `min_zoom`                   | 0                       |
     98| `max_zoom`                   | 20                      |
     99| `subdomains`                 | abc                     |
     100| `attribution`                | ©Leaflet ©OpenStreetMap |
     101| `closepopuponclick`          | false                   |
     102| `trackresize`                | false                   |
     103| `boxzoom`                    | true                    |
     104| `dragging`                   | true                    |
     105| `keyboard`                   | true                    |
    111106
    112107---
     
    116111Much the same as leaflet-map above, but uses `src` for the source image.
    117112
    118 TBH, it's a huge mess, and probably shouldn't be used.  It might make a good image viewer with optional marker highlight points.  It requires far too much manual work at the moment. Recommended usage:
     113TBH, it's a huge mess, and probably shouldn't be used. It might make a good image viewer with optional marker highlight points. It requires far too much manual work at the moment. Recommended usage:
    119114
    120115```
    121116[leaflet-image src="path/to/img.jpg" zoom=1]
    122 [leaflet-marker draggable=1]
     117[leaflet-marker draggable]
    123118```
    124119
     
    127122#### [leaflet-image] Options:
    128123
    129 Option | Default
    130 --- | ---
    131 `src` | https://lorempixel.com/1000/1000/
    132 `zoom` | 12
    133 `height` | 250
    134 `width` | 100%
    135 `fit_markers` | 0 (false)
    136 `zoomcontrol` | 0 (false)
    137 `scrollwheel` | 0 (false)
    138 `doubleclickzoom` | 0 (false)
    139 `min_zoom` | 0
    140 `max_zoom` | 20
    141 `attribution` | ©Leaflet ©OpenStreetMap
     124| Option            | Default                          |
     125| ----------------- | -------------------------------- |
     126| `src`             | https://picsum.photos/1000/1000/ |
     127| `zoom`            | 12                               |
     128| `height`          | 250                              |
     129| `width`           | 100%                             |
     130| `fit_markers`     | 0 (false)                        |
     131| `zoomcontrol`     | 0 (false)                        |
     132| `scrollwheel`     | 0 (false)                        |
     133| `doubleclickzoom` | 0 (false)                        |
     134| `min_zoom`        | 0                                |
     135| `max_zoom`        | 20                               |
     136| `attribution`     | ©Leaflet ©OpenStreetMap          |
    142137
    143138---
     
    147142![Markers with HTML within a popup](https://imgur.com/ap38lwe.jpg)
    148143
    149 Add a marker to any map by adding `[leaflet-marker]` after any `[leaflet-map]` shortcode.  You can adjust the lat/lng in the same way, as well as some other basic functionality (popup message, draggable, visible on load). Also, if you want to add a link to a marker popup, use `[leaflet-marker]Message here: click here[/leaflet-marker]` and add a link like you normally would with the WordPress editor.
     144Add a marker to any map by adding `[leaflet-marker]` after any `[leaflet-map]` shortcode. You can adjust the lat/lng in the same way, as well as some other basic functionality (popup message, draggable, visible on load). Also, if you want to add a link to a marker popup, use `[leaflet-marker]Message here: click here[/leaflet-marker]` and add a link like you normally would with the WordPress editor.
    150145
    151146#### [leaflet-marker] Options:
    152147
    153 Option | Usage
    154 --- | ---
    155 `lat` and `lng` or `address` | Location on the map; defaults to map center; `lat`/`lng` are floats, `address` is a string
    156 `draggable` | Make a marker draggable (`boolean`); default `false`
    157 `title` | Add a hover-over message to your marker (different than popup)
    158 `alt` | Add an alt text to the marker image
    159 `zindexoffset` | Define the z-index for the marker image
    160 `opacity` | Define the css opacity for the marker image
    161 `iconurl` | Give a url for the marker image file
    162 `iconsize` | Set the size of the icon: e.g. "80,50" for 80px width 50px height
    163 `iconanchor` | Set the anchor position of the icon: e.g. "40,60" for 40px left 60px top
    164 `shadowurl` | Give a url for the marker shadow image file
    165 `shadowsize` | Set the size of the shadow: e.g. "80,50" for 80px width 50px height
    166 `shadowanchor` | Set the anchor position of the shadow: e.g. "40,60" for 40px left 60px top
    167 `popupanchor` | Set the anchor position of the popup: e.g. "40,60" for 40px left 60px top
    168 `svg` | Boolean for whether the marker should be created as an svg: default `false`
    169 `background` | Background color for an SVG marker (above)
    170 `color` | color of the SVG marker (above)
    171 `iconclass` | className for the marker image
     148| Option                       | Usage                                                                                      |
     149| ---------------------------- | ------------------------------------------------------------------------------------------ |
     150| `lat` and `lng` or `address` | Location on the map; defaults to map center; `lat`/`lng` are floats, `address` is a string |
     151| `draggable`                  | Make a marker draggable (`boolean`); default `false`                                       |
     152| `title`                      | Add a hover-over message to your marker (different than popup)                             |
     153| `alt`                        | Add an alt text to the marker image                                                        |
     154| `zindexoffset`               | Define the z-index for the marker image                                                    |
     155| `opacity`                    | Define the css opacity for the marker image                                                |
     156| `iconurl`                    | Give a url for the marker image file                                                       |
     157| `iconsize`                   | Set the size of the icon: e.g. "80,50" for 80px width 50px height                          |
     158| `iconanchor`                 | Set the anchor position of the icon: e.g. "40,60" for 40px left 60px top                   |
     159| `shadowurl`                  | Give a url for the marker shadow image file                                                |
     160| `shadowsize`                 | Set the size of the shadow: e.g. "80,50" for 80px width 50px height                        |
     161| `shadowanchor`               | Set the anchor position of the shadow: e.g. "40,60" for 40px left 60px top                 |
     162| `popupanchor`                | Set the anchor position of the popup: e.g. "40,60" for 40px left 60px top                  |
     163| `svg`                        | Boolean for whether the marker should be created as an svg: default `false`                |
     164| `background`                 | Background color for an SVG marker (above)                                                 |
     165| `color`                      | color of the SVG marker (above)                                                            |
     166| `iconclass`                  | className for the marker image                                                             |
    172167
    173168---
     
    179174Add a line to the map by adding `[leaflet-line]`. You can specify the postions with a list separated by semi-colon `;` or bar `|` using lat/lng: `[leaflet-line latlngs="41, 29; 44, 18"]` or addresses: `[leaflet-line addresses="Istanbul; Sarajevo"]`, or x/y coordinates for image maps.
    180175
    181 Add a popup to the line by adding text to the content of the shortcode: 
     176Add a popup to the line by adding text to the content of the shortcode:
    182177
    183178`[leaflet-line addresses="new york; chicago"]New York to Chicago[/leaflet-line]`
     
    185180#### [leaflet-line] Options
    186181
    187 Option | Usage
    188 --- | ---
    189 `addresses`, `latlngs`, or `coordinates` | For geocoded addresses, latitude/longitude, or x/y coordinates for Image Maps (see [leaflet-image]); ex: `[leaflet-line latlngs="41, 29; 44, 18"]` or addresses: `[leaflet-line addresses="Istanbul; Sarajevo"]`
    190 `fitbounds` | Fit the map to the bounds of the line (instead of whatever center you gave the map originally)
     182| Option                                   | Usage                                                                                                                                                                                      |
     183| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
     184| `addresses`, `latlngs`, or `coordinates` | For geocoded addresses, latitude/longitude, or x/y coordinates for Image Maps; ex: `[leaflet-line latlngs="41, 29; 44, 18"]` or addresses: `[leaflet-line addresses="Istanbul; Sarajevo"]` |
     185| `fitbounds`                              | Fit the map to the bounds of the line (instead of whatever center you gave the map originally)                                                                                             |
    191186
    192187And the following Shape Options. See https://leafletjs.com/reference-1.3.4.html#path for details.
     
    196191
    197192---
     193
    198194### [leaflet-circle]
    199195
     
    204200#### [leaflet-circle] Options
    205201
    206 Options | Usage
    207 --- | ---
    208 `address`, `lat/lng`, or `x/y` | For geocoded addresses, latitude/longitude, or x/y coordinates for Image Maps (see [leaflet-image]); ex: `[leaflet-circle lat=52 lng=5]` or addresses: `[leaflet-circle address="Amsterdam"]`
    209 `fitbounds` | Fit the map to the bounds of the circle (instead of whatever center you gave the map originally)
    210 radius | Radius of the circle in meters
    211 
    212 Includes all style options: See https://leafletjs.com/reference-1.3.4.html#path 
     202| Options                        | Usage                                                                                                                                                                                         |
     203| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
     204| `address`, `lat/lng`, or `x/y` | For geocoded addresses, latitude/longitude, or x/y coordinates for Image Maps (see [leaflet-image]); ex: `[leaflet-circle lat=52 lng=5]` or addresses: `[leaflet-circle address="Amsterdam"]` |
     205| `fitbounds`                    | Fit the map to the bounds of the circle (instead of whatever center you gave the map originally)                                                                                              |
     206| radius                         | Radius of the circle in meters                                                                                                                                                                |
     207
     208Includes all style options: See https://leafletjs.com/reference-1.3.4.html#path
    213209
    214210### [leaflet-geojson]
     
    216212[![Random GeoJSON created by me](https://imgur.com/fJktgtI.jpg)](https://gist.github.com/bozdoz/064a7101b95a324e8852fe9381ab9a18)
    217213
    218 Or you can add a geojson shape via a url: 
     214Or you can add a geojson shape via a url:
    219215
    220216```
     
    224220#### [leaflet-geojson] Options
    225221
    226 Option | Usage
    227 --- | ---
    228 `src` | Source of the geojson file
     222| Option | Usage                      |
     223| ------ | -------------------------- |
     224| `src`  | Source of the geojson file |
    229225
    230226### [leaflet-kml]
     
    232228Same idea as geojson (above), but takes KML files and loads [Mapbox's togeojson library](https://github.com/mapbox/togeojson)
    233229
    234 Contributing
    235 -------------
     230## Contributing
    236231
    237232[View Contribution guidelines](https://github.com/bozdoz/wp-plugin-leaflet-map/blob/master/CONTRIBUTING.md)
    238233
    239 Wish List
    240 ---------
    241 
    242 * A map editor/shortcode generator (so users can see what they're adding to the page)
     234## Wish List
     235
     236- A map editor/shortcode generator (so users can see what they're adding to the page)
  • leaflet-map/trunk/leaflet-map.php

    r1946454 r1980356  
    99 * Text Domain: leaflet-map
    1010 * Domain Path: /languages/
    11  * Version: 2.11.4
     11 * Version: 2.11.5
    1212 * License: GPL2
    1313 * Leaflet Map is free software: you can redistribute it and/or modify
     
    3030}
    3131
    32 define('LEAFLET_MAP__PLUGIN_VERSION', '2.11.4');
     32define('LEAFLET_MAP__PLUGIN_VERSION', '2.11.5');
    3333define('LEAFLET_MAP__PLUGIN_FILE', __FILE__);
    3434define('LEAFLET_MAP__PLUGIN_DIR', plugin_dir_path(__FILE__));
  • leaflet-map/trunk/readme.txt

    r1946454 r1980356  
    77Tags: leaflet, map, mobile, javascript, openstreetmap, mapquest, interactive
    88Requires at least: 3.0.1
    9 Tested up to: 4.9.8
    10 Version: 2.11.4
    11 Stable tag: 2.11.4
     9Tested up to: 5.0
     10Version: 2.11.5
     11Stable tag: 2.11.5
    1212License: GPLv2
    1313License URI: https://www.gnu.org/licenses/gpl-2.0.html
     
    7070= Can I have an SVG Marker? =
    7171
    72 Yes! Convert the default marker into an svg with a shortcode like this: `[leaflet-marker svg="true" color="white" iconClass="fab fa-wordpress-simple" background="red"]` The `iconClass` is perfect for adding a [font-awesome](https://fontawesome.com/icons?d=gallery) icon.
     72Yes! Convert the default marker into an svg with a shortcode like this: `[leaflet-marker svg color="white" iconClass="fab fa-wordpress-simple" background="red"]` The `iconClass` is perfect for adding a [font-awesome](https://fontawesome.com/icons?d=gallery) icon.
    7373
    7474= How do I change the style for lines/geojson? =
     
    9292= Can I add a message to a marker? =
    9393
    94 Yes: `[leaflet-marker message="Hello there!" visible="true"]`, where visible designates if it is visible on page load. Otherwise it is only visible when clicked.
     94Yes: `[leaflet-marker message="Hello there!" visible]`, where visible designates if it is visible on page load. Otherwise it is only visible when clicked.
    9595
    9696= Can I use your plugin with a picture instead of a map? =
     
    1191192. See the shortcode play out on the front end.
    1201203. For `[leaflet-image]` upload an image, and copy the URL from the right-hand side
    121 4. For `[leaflet-image]` paste that image URL into an attribute titled `source`: example: `src="http://lorempixel.com/1000/1000/"`.
     1214. For `[leaflet-image]` paste that image URL into an attribute titled `source`: example: `src="https://picsum.photos/1000/1000/"`.
    1221225. See the `[leaflet-image]` on the front end.
    123 6. If you use `[leaflet-marker draggable=true]`, then you can drag the marker where you want it, open a developers console, and see the specific shortcode to use.
     1236. If you use `[leaflet-marker draggable]`, then you can drag the marker where you want it, open a developers console, and see the specific shortcode to use.
    1241247. Add geojson via URL: `[leaflet-geojson src="https://example.com/path/to.geojson"]`
    1251258. MapQuest requires an app key, get it from their website; alternatively, you can use OpenStreetMap as a free tile service (remember to add an attribution where necessary).
    126126
    127127== Changelog ==
     128
     129= 2.11.5 =
     130* Added assumed-boolean attributes to all shortcodes; ex: `[leaflet-marker draggable svg]` would be the same as `[leaflet-marker draggable=1 svg=1]`
    128131
    129132= 2.11.4 =
  • leaflet-map/trunk/scripts/leaflet-svg-icon.js

    r1851128 r1980356  
    11L.SVGIcon = L.Icon.extend({
    2     options: {
    3         iconSize: [26, 42],
    4         popupAnchor: [1, -42],
    5         tooltipAnchor: [16, -28],
    6         iconClass: '',
    7         background: '#2b82cb',
    8         color: 'white'
    9     },
    10     createIcon: function (oldIcon) {
    11         var div = (oldIcon && oldIcon.tagName === 'DIV') ?
    12             oldIcon : document.createElement('div');
    13         var options = this.options;
    14         var size = options.iconSize;
    15         var x = size[0];
    16         var y = size[1];
     2  options: {
     3    iconSize: [26, 42],
     4    popupAnchor: [1, -42],
     5    tooltipAnchor: [16, -28],
     6    iconClass: '',
     7    background: '#2b82cb',
     8    color: 'white'
     9  },
     10  createIcon: function(oldIcon) {
     11    var div =
     12      oldIcon && oldIcon.tagName === 'DIV'
     13        ? oldIcon
     14        : document.createElement('div')
     15    var options = this.options
     16    var size = options.iconSize
     17    var x = size[0]
     18    var y = size[1]
    1719
    18         var svgCreate = function svgCreate (tag, attrs) {
    19             var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
    20             for (var k in attrs) {
    21                 el.setAttribute(k, attrs[k]);
    22             }
    23             return el;
    24         };
     20    var svgCreate = function svgCreate(tag, attrs) {
     21      var el = document.createElementNS('http://www.w3.org/2000/svg', tag)
     22      for (var k in attrs) {
     23        el.setAttribute(k, attrs[k])
     24      }
     25      return el
     26    }
    2527
    26         var svg = svgCreate('svg', {
    27             viewBox: '0 0 365 560'
    28         });
    29        
    30         var path = svgCreate('path', {
    31             fill: this.options.background,
    32             d: 'M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,' +
    33                 '283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9' +
    34                 'C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,' +
    35                 '175.3,357.4S182.9,551.7,182.9,551.7z'
    36         });
    37        
    38         svg.appendChild(path);
    39         div.appendChild(svg);
    40        
    41         div.setAttribute('style', 'margin-left: ' + (-x/2) + 'px;' +
    42             'margin-top: ' + -y + 'px;' +
    43             'width: ' + x + 'px;' +
    44             'height: ' + y + 'px;'
    45         );
     28    var svg = svgCreate('svg', {
     29      viewBox: '0 0 365 560'
     30    })
    4631
    47         // add icon
    48         var i = document.createElement('i');
    49         i.className = this.options.iconClass;
    50         i.setAttribute('style', 'position:absolute;' +
    51             'top: 34%;' +
    52             'left: 50%;' +
    53             'transform: translate3d(-50%, -34%, 0);' +
    54             'color: ' + (this.options.color) + ';' +
    55             'line-height: 0;'
    56         );
    57         div.appendChild(i);
     32    var path = svgCreate('path', {
     33      fill: this.options.background,
     34      d:
     35        'M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,' +
     36        '283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9' +
     37        'C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,' +
     38        '175.3,357.4S182.9,551.7,182.9,551.7z'
     39    })
    5840
    59         return div;
    60     }
    61 });
     41    svg.appendChild(path)
     42    div.appendChild(svg)
     43
     44    div.setAttribute(
     45      'style',
     46      'margin-left: ' +
     47        -x / 2 +
     48        'px;' +
     49        'margin-top: ' +
     50        -y +
     51        'px;' +
     52        'width: ' +
     53        x +
     54        'px;' +
     55        'height: ' +
     56        y +
     57        'px;'
     58    )
     59
     60    // add icon
     61    var i = document.createElement('i')
     62    i.className = this.options.iconClass
     63    i.setAttribute(
     64      'style',
     65      'position:absolute;' +
     66        'top: 20%;' +
     67        'left: 50%;' +
     68        'transform: translate3d(-50%, -20%, 0);' +
     69        'color: ' +
     70        this.options.color +
     71        ';' +
     72        'line-height: 0;' +
     73        'display: flex;' +
     74        'justify-content: center;' +
     75        'align-items: center;'
     76    )
     77    div.appendChild(i)
     78
     79    return div
     80  }
     81})
    6282
    6383L.SVGMarker = L.Marker.extend({
    64     initialize: function (latlng, options) {
    65         options = options || {};
    66         var svg_options = L.extend({},
    67             L.SVGIcon.prototype.options,
    68             options
    69         );
    70         options.icon = new L.SVGIcon( svg_options );
    71         L.Marker.prototype.initialize.call(this, latlng, options);
    72     }
    73 });
     84  initialize: function(latlng, options) {
     85    options = options || {}
     86    var svg_options = L.extend({}, L.SVGIcon.prototype.options, options)
     87    options.icon = new L.SVGIcon(svg_options)
     88    L.Marker.prototype.initialize.call(this, latlng, options)
     89  }
     90})
  • leaflet-map/trunk/scripts/leaflet-svg-icon.min.js

    r1851128 r1980356  
    1 L.SVGIcon=L.Icon.extend({options:{iconSize:[26,42],popupAnchor:[1,-42],tooltipAnchor:[16,-28],iconClass:"",background:"#2b82cb",color:"white"},createIcon:function(t){var e=t&&"DIV"===t.tagName?t:document.createElement("div"),o=this.options.iconSize,i=o[0],n=o[1],r=function(t,e){var o=document.createElementNS("http://www.w3.org/2000/svg",t);for(var i in e)o.setAttribute(i,e[i]);return o},a=r("svg",{viewBox:"0 0 365 560"}),c=r("path",{fill:this.options.background,d:"M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,175.3,357.4S182.9,551.7,182.9,551.7z"});a.appendChild(c),e.appendChild(a),e.setAttribute("style","margin-left: "+-i/2+"px;margin-top: "+-n+"px;width: "+i+"px;height: "+n+"px;");var p=document.createElement("i");return p.className=this.options.iconClass,p.setAttribute("style","position:absolute;top: 34%;left: 50%;transform: translate3d(-50%, -34%, 0);color: "+this.options.color+";line-height: 0;"),e.appendChild(p),e}}),L.SVGMarker=L.Marker.extend({initialize:function(t,e){e=e||{};var o=L.extend({},L.SVGIcon.prototype.options,e);e.icon=new L.SVGIcon(o),L.Marker.prototype.initialize.call(this,t,e)}});
     1L.SVGIcon=L.Icon.extend({options:{iconSize:[26,42],popupAnchor:[1,-42],tooltipAnchor:[16,-28],iconClass:"",background:"#2b82cb",color:"white"},createIcon:function(t){var e=t&&"DIV"===t.tagName?t:document.createElement("div"),n=this.options.iconSize,o=n[0],i=n[1],r=function(t,e){var n=document.createElementNS("http://www.w3.org/2000/svg",t);for(var o in e)n.setAttribute(o,e[o]);return n},c=r("svg",{viewBox:"0 0 365 560"}),a=r("path",{fill:this.options.background,d:"M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,175.3,357.4S182.9,551.7,182.9,551.7z"});c.appendChild(a),e.appendChild(c),e.setAttribute("style","margin-left: "+-o/2+"px;margin-top: "+-i+"px;width: "+o+"px;height: "+i+"px;");var s=document.createElement("i");return s.className=this.options.iconClass,s.setAttribute("style","position:absolute;top: 20%;left: 50%;transform: translate3d(-50%, -20%, 0);color: "+this.options.color+";line-height: 0;display: flex;justify-content: center;align-items: center;"),e.appendChild(s),e}}),L.SVGMarker=L.Marker.extend({initialize:function(t,e){e=e||{};var n=L.extend({},L.SVGIcon.prototype.options,e);e.icon=new L.SVGIcon(n),L.Marker.prototype.initialize.call(this,t,e)}});
  • leaflet-map/trunk/shortcodes/class.image-shortcode.php

    r1943975 r1980356  
    3939        /* only required field for image map (src/source) */
    4040        $src = empty($src) ? '' : $src;
    41         $source = empty($source) ? 'https://lorempixel.com/1000/1000/' : $source;
     41        $source = empty($source) ? 'https://picsum.photos/1000/1000/' : $source;
    4242        $source = empty($src) ? $source : $src;
    4343
  • leaflet-map/trunk/shortcodes/class.map-shortcode.php

    r1943975 r1980356  
    5555     *
    5656     * @param array|string $atts    key value pairs from shortcode
    57      * @param string       $content inner text in shortcode
    5857     *
    5958     * @return array new atts, which is actually an array
    6059     */
    61     protected function getAtts($atts='', $content=null)
     60    protected function getAtts($atts='')
    6261    {
    6362        $atts = (array) $atts;
     
    8887        $atts['width'] .= is_numeric($atts['width']) ? 'px' : '';   
    8988
     89        // maxbounds as string: maxbounds="50, -114; 52, -112"
     90        $maxBounds = isset($maxbounds) ? $maxbounds : null;
     91
     92        if ($maxBounds) {
     93            try {
     94                // explode by semi-colons and commas
     95                $maxBounds = preg_split("[;|,]", $maxBounds);
     96                print_r($maxBounds);
     97                $maxBounds = array(
     98                    array(
     99                        $maxBounds[0], $maxBounds[1]
     100                    ),
     101                    array(
     102                        $maxBounds[2], $maxBounds[3]
     103                    )
     104                );
     105                print_r($maxBounds);
     106            } catch (Exception $e) {
     107                $maxBounds = null;
     108            }
     109        }
     110
    90111        /*
    91112        need to allow 0 or empty for removal of attribution
     
    103124            'boxZoom' => isset($boxzoom) ? $boxzoom : null,
    104125            'dragging' => isset($dragging) ? $dragging : null,
    105             'keyboard' => isset($keyboard) ? $keyboard : null
     126            'keyboard' => isset($keyboard) ? $keyboard : null,
    106127        );
    107        
     128
    108129        // filter out nulls
    109130        $more_options = $this->LM->filter_null($more_options);
     
    111132        // change string booleans to booleans
    112133        $more_options = filter_var_array($more_options, FILTER_VALIDATE_BOOLEAN);
     134
     135        if ($maxBounds) {
     136            $more_options['maxBounds'] = $maxBounds;
     137        }
    113138
    114139        // wrap as JSON
  • leaflet-map/trunk/shortcodes/class.shortcode.php

    r1851128 r1980356  
    4040     * Instantiate class and get HTML for shortcode
    4141     *
    42      * @param array  $atts    string
     42     * @param array  $atts    string|array
    4343     * @param string $content Optional
    4444     *
    4545     * @return string (see above)
    4646     */
    47     public static function shortcode($atts, $content = null)
     47    public static function shortcode($atts = '', $content = null)
    4848    {
    4949        $class = self::getClass();
    50         $instance = new $class($atts, $content);
     50        $instance = new $class();
     51
     52        // swap sequential array with associative array
     53        // this enables assumed-boolean attributes,
     54        // like: [leaflet-marker draggable svg]
     55        // meaning draggable=1 svg=1
     56        if (!empty($atts)) {
     57            foreach($atts as $k => $v) {
     58                if (is_numeric($k) && !key_exists($v, $atts)) {
     59                    $atts[$v] = 1;
     60                }
     61            }
     62        }
     63
    5164        return $instance->getHTML($atts, $content);
    5265    }
  • leaflet-map/trunk/templates/shortcode-helper.php

    r1943975 r1980356  
    2727        $drag = __('Drag Me', 'leaflet-map');
    2828
    29         echo do_shortcode('[leaflet-map zoom=2 zoomcontrol=1 doubleClickZoom=1 height=300 scrollwheel=1]');
    30         echo do_shortcode(sprintf('[leaflet-marker draggable=1 visible="true"] %s [/leaflet-marker]',
     29        echo do_shortcode('[leaflet-map zoom=2 zoomcontrol doubleClickZoom height=300 scrollwheel]');
     30        echo do_shortcode(sprintf('[leaflet-marker draggable visible] %s [/leaflet-marker]',
    3131            $drag
    3232        ));
     
    5353                    ),
    5454                __("Draggable Marker", 'leaflet-map') => array(
    55                     '[leaflet-map zoom=8 lat=-33.85 lng=151.21 scrollwheel=1]',
    56                     '[leaflet-marker draggable=1]',
     55                    '[leaflet-map zoom=8 lat=-33.85 lng=151.21 scrollwheel]',
     56                    '[leaflet-marker draggable]',
    5757                    ),
    5858                __("Marker Icon", 'leaflet-map') => array(
    59                     '[leaflet-map zoom=10 address="cochrane, Ontario" scrollwheel=1]',
     59                    '[leaflet-map zoom=10 address="cochrane, Ontario" scrollwheel]',
    6060                    '[leaflet-marker iconUrl="https://i.imgur.com/Q54ueuO.png" iconSize="80,50" iconAnchor="40,60"]'
    6161                    ),
     62                __("SVG Marker Icon", 'leaflet-map') => array(
     63                    '[leaflet-map address="twilight lane, nova scotia" scrollwheel]',
     64                    '[leaflet-marker svg background="#654" iconClass="dashicons dashicons-star-filled" color="gold"]My Favorite Place in the World[/leaflet-marker]'
     65                    ),
    6266                __("Zoom Buttons", 'leaflet-map') => array(
    63                     '[leaflet-map zoom=9 lat=48.855 lng=2.35 zoomcontrol=1]',
     67                    '[leaflet-map zoom=9 lat=48.855 lng=2.35 zoomcontrol]',
    6468                    ),
    6569                __("Alternate Map Tiles w/scrollwheel", 'leaflet-map') => array(
    66                     '[leaflet-map zoom=2 scrollwheel=1 lat=-2.507 lng=32.902 tileurl=https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg subdomains=abcd attribution="Map tiles by Stamen Design, under CC BY 3.0."]',
     70                    '[leaflet-map zoom=2 scrollwheel lat=-2.507 lng=32.902 tileurl=https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg subdomains=abcd attribution="Map tiles by Stamen Design, under CC BY 3.0."]',
    6771                    ),
    6872                __("Marker Popup Messages (on click)", 'leaflet-map') => array(
     
    7579                    ),
    7680                __("Basic Lines w/Scrollwheel", 'leaflet-map') => array(
    77                     '[leaflet-map lat=41 lng=29 scrollwheel=1 zoom=6]',
     81                    '[leaflet-map lat=41 lng=29 scrollwheel zoom=6]',
    7882                    '[leaflet-line latlngs="41, 29; 44, 18;"]'
    7983                    ),
     
    8488                __("Fitted Colored Line on Addresses", 'leaflet-map') => array(
    8589                    '[leaflet-map]',
    86                     '[leaflet-line color="purple" addresses="Sayulita; Puerto Vallarta;" fitline=1]'
     90                    '[leaflet-line color="purple" addresses="Sayulita; Puerto Vallarta;" fitline]'
    8791                    ),
    8892                __("More Crazy Line Attributes", 'leaflet-map') => array(
    8993                    '[leaflet-map]',
    90                     '[leaflet-line color="red" weight=10 dasharray="2,15" addresses="Halifax, NS; Tanzania" classname=marching-ants fitbounds=1]'
     94                    '[leaflet-line color="red" weight=10 dasharray="2,15" addresses="Halifax, Nova Scotia; Tanzania" classname=marching-ants fitbounds]'
    9195                    ),
    9296                __("Disable all Interaction", 'leaflet-map') => array(
     
    9599                __("Add GeoJSON by URL (with popups)", 'leaflet-map') => array(
    96100                    '[leaflet-map doubleClickZoom=true scrollwheel=true]',
    97                     '[leaflet-geojson src=https://cdn.rawgit.com/bozdoz/064a7101b95a324e8852fe9381ab9a18/raw/03f4f54b13a3a7e256732760a8b679818d9d36fc/map.geojson fitbounds=1 popup_property="popup-text"]'
     101                    '[leaflet-geojson src=https://cdn.rawgit.com/bozdoz/064a7101b95a324e8852fe9381ab9a18/raw/03f4f54b13a3a7e256732760a8b679818d9d36fc/map.geojson fitbounds popup_property="popup-text"]'
    98102                    ),
    99                 __("Test Image Map", 'leaflet-map') => array(
    100                     '[leaflet-image zoom=1 zoomcontrol=1 scrollwheelzoom=1 attribution=0]',
     103                __("Image Map", 'leaflet-map') => array(
     104                    '[leaflet-image zoom=1 zoomcontrol scrollwheelzoom attribution=0]',
    101105                    '[leaflet-marker]'
    102106                    )
Note: See TracChangeset for help on using the changeset viewer.