Changeset 1980356 for leaflet-map
- Timestamp:
- 11/26/2018 04:15:02 AM (7 years ago)
- Location:
- leaflet-map
- Files:
-
- 2 deleted
- 12 edited
- 30 copied
-
tags/2.11.5 (copied) (copied from leaflet-map/trunk)
-
tags/2.11.5/CODE_OF_CONDUCT.md (copied) (copied from leaflet-map/trunk/CODE_OF_CONDUCT.md)
-
tags/2.11.5/CONTRIBUTING.md (copied) (copied from leaflet-map/trunk/CONTRIBUTING.md)
-
tags/2.11.5/LICENSE (copied) (copied from leaflet-map/trunk/LICENSE)
-
tags/2.11.5/README.md (copied) (copied from leaflet-map/trunk/README.md) (16 diffs)
-
tags/2.11.5/class.admin.php (copied) (copied from leaflet-map/trunk/class.admin.php)
-
tags/2.11.5/class.geocoder.php (copied) (copied from leaflet-map/trunk/class.geocoder.php)
-
tags/2.11.5/class.leaflet-map.php (copied) (copied from leaflet-map/trunk/class.leaflet-map.php)
-
tags/2.11.5/class.plugin-option.php (copied) (copied from leaflet-map/trunk/class.plugin-option.php)
-
tags/2.11.5/class.plugin-settings.php (copied) (copied from leaflet-map/trunk/class.plugin-settings.php)
-
tags/2.11.5/images (copied) (copied from leaflet-map/trunk/images)
-
tags/2.11.5/index.php (copied) (copied from leaflet-map/trunk/index.php)
-
tags/2.11.5/languages (copied) (copied from leaflet-map/trunk/languages)
-
tags/2.11.5/leaflet-map.php (copied) (copied from leaflet-map/trunk/leaflet-map.php) (2 diffs)
-
tags/2.11.5/readme.txt (copied) (copied from leaflet-map/trunk/readme.txt) (4 diffs)
-
tags/2.11.5/scripts (copied) (copied from leaflet-map/trunk/scripts)
-
tags/2.11.5/scripts/construct-leaflet-map.js (copied) (copied from leaflet-map/trunk/scripts/construct-leaflet-map.js)
-
tags/2.11.5/scripts/construct-leaflet-map.min.js (copied) (copied from leaflet-map/trunk/scripts/construct-leaflet-map.min.js)
-
tags/2.11.5/scripts/get-shortcode.js (deleted)
-
tags/2.11.5/scripts/get-shortcode.min.js (deleted)
-
tags/2.11.5/scripts/leaflet-svg-icon.js (modified) (1 diff)
-
tags/2.11.5/scripts/leaflet-svg-icon.min.js (modified) (1 diff)
-
tags/2.11.5/scripts/shortcode-helper.js (copied) (copied from leaflet-map/trunk/scripts/shortcode-helper.js)
-
tags/2.11.5/scripts/shortcode-helper.min.js (copied) (copied from leaflet-map/trunk/scripts/shortcode-helper.min.js)
-
tags/2.11.5/shortcodes (copied) (copied from leaflet-map/trunk/shortcodes)
-
tags/2.11.5/shortcodes/class.circle-shortcode.php (copied) (copied from leaflet-map/trunk/shortcodes/class.circle-shortcode.php)
-
tags/2.11.5/shortcodes/class.geojson-shortcode.php (copied) (copied from leaflet-map/trunk/shortcodes/class.geojson-shortcode.php)
-
tags/2.11.5/shortcodes/class.image-shortcode.php (copied) (copied from leaflet-map/trunk/shortcodes/class.image-shortcode.php) (1 diff)
-
tags/2.11.5/shortcodes/class.line-shortcode.php (copied) (copied from leaflet-map/trunk/shortcodes/class.line-shortcode.php)
-
tags/2.11.5/shortcodes/class.map-shortcode.php (copied) (copied from leaflet-map/trunk/shortcodes/class.map-shortcode.php) (4 diffs)
-
tags/2.11.5/shortcodes/class.marker-shortcode.php (copied) (copied from leaflet-map/trunk/shortcodes/class.marker-shortcode.php)
-
tags/2.11.5/shortcodes/class.shortcode.php (modified) (1 diff)
-
tags/2.11.5/style.css (copied) (copied from leaflet-map/trunk/style.css)
-
tags/2.11.5/templates (copied) (copied from leaflet-map/trunk/templates)
-
tags/2.11.5/templates/shortcode-helper.php (copied) (copied from leaflet-map/trunk/templates/shortcode-helper.php) (5 diffs)
-
trunk/README.md (modified) (16 diffs)
-
trunk/leaflet-map.php (modified) (2 diffs)
-
trunk/readme.txt (modified) (4 diffs)
-
trunk/scripts/leaflet-svg-icon.js (modified) (1 diff)
-
trunk/scripts/leaflet-svg-icon.min.js (modified) (1 diff)
-
trunk/shortcodes/class.image-shortcode.php (modified) (1 diff)
-
trunk/shortcodes/class.map-shortcode.php (modified) (4 diffs)
-
trunk/shortcodes/class.shortcode.php (modified) (1 diff)
-
trunk/templates/shortcode-helper.php (modified) (5 diffs)
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 3 2 4 3  5 4  6 5 7 6  8 7 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.8 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. 10 9 11 10  12 11 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 22 19 23 20 ``` … … 35 32 ``` 36 33 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: 34 You can have SVG markers, add shapes, geojson, kml, images, and more! See available shortcodes below. 35 36 ## Developing 37 38 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: 43 39 44 40 ```bash … … 55 51 You can also use these NPM scripts to interact with Docker, if you make changes to Docker-related files: 56 52 57 To start: 53 To start: 58 54 59 55 ```bash … … 69 65 That's all for now! Thanks! 70 66 71 Available Shortcodes 72 -------------------- 67 ## Available Shortcodes 73 68 74 69 ### [leaflet-map] … … 76 71  77 72 78 Height, width, latitude, longitude and zoom are the basic attributes: 73 Height, width, latitude, longitude and zoom are the basic attributes: 79 74 80 75 ``` … … 90 85 #### [leaflet-map] Options: 91 86 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 | 111 106 112 107 --- … … 116 111 Much the same as leaflet-map above, but uses `src` for the source image. 117 112 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:113 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: 119 114 120 115 ``` 121 116 [leaflet-image src="path/to/img.jpg" zoom=1] 122 [leaflet-marker draggable =1]117 [leaflet-marker draggable] 123 118 ``` 124 119 … … 127 122 #### [leaflet-image] Options: 128 123 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 | 142 137 143 138 --- … … 147 142  148 143 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.144 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. 150 145 151 146 #### [leaflet-marker] Options: 152 147 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 | 172 167 173 168 --- … … 179 174 Add 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. 180 175 181 Add a popup to the line by adding text to the content of the shortcode: 176 Add a popup to the line by adding text to the content of the shortcode: 182 177 183 178 `[leaflet-line addresses="new york; chicago"]New York to Chicago[/leaflet-line]` … … 185 180 #### [leaflet-line] Options 186 181 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) | 191 186 192 187 And the following Shape Options. See https://leafletjs.com/reference-1.3.4.html#path for details. … … 196 191 197 192 --- 193 198 194 ### [leaflet-circle] 199 195 … … 204 200 #### [leaflet-circle] Options 205 201 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 208 Includes all style options: See https://leafletjs.com/reference-1.3.4.html#path 213 209 214 210 ### [leaflet-geojson] … … 216 212 [](https://gist.github.com/bozdoz/064a7101b95a324e8852fe9381ab9a18) 217 213 218 Or you can add a geojson shape via a url: 214 Or you can add a geojson shape via a url: 219 215 220 216 ``` … … 224 220 #### [leaflet-geojson] Options 225 221 226 Option | Usage 227 --- | --- 228 `src` | Source of the geojson file 222 | Option | Usage | 223 | ------ | -------------------------- | 224 | `src` | Source of the geojson file | 229 225 230 226 ### [leaflet-kml] … … 232 228 Same idea as geojson (above), but takes KML files and loads [Mapbox's togeojson library](https://github.com/mapbox/togeojson) 233 229 234 Contributing 235 ------------- 230 ## Contributing 236 231 237 232 [View Contribution guidelines](https://github.com/bozdoz/wp-plugin-leaflet-map/blob/master/CONTRIBUTING.md) 238 233 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 9 9 * Text Domain: leaflet-map 10 10 * Domain Path: /languages/ 11 * Version: 2.11. 411 * Version: 2.11.5 12 12 * License: GPL2 13 13 * Leaflet Map is free software: you can redistribute it and/or modify … … 30 30 } 31 31 32 define('LEAFLET_MAP__PLUGIN_VERSION', '2.11. 4');32 define('LEAFLET_MAP__PLUGIN_VERSION', '2.11.5'); 33 33 define('LEAFLET_MAP__PLUGIN_FILE', __FILE__); 34 34 define('LEAFLET_MAP__PLUGIN_DIR', plugin_dir_path(__FILE__)); -
leaflet-map/tags/2.11.5/readme.txt
r1946454 r1980356 7 7 Tags: leaflet, map, mobile, javascript, openstreetmap, mapquest, interactive 8 8 Requires at least: 3.0.1 9 Tested up to: 4.9.810 Version: 2.11. 411 Stable tag: 2.11. 49 Tested up to: 5.0 10 Version: 2.11.5 11 Stable tag: 2.11.5 12 12 License: GPLv2 13 13 License URI: https://www.gnu.org/licenses/gpl-2.0.html … … 70 70 = Can I have an SVG Marker? = 71 71 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.72 Yes! 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. 73 73 74 74 = How do I change the style for lines/geojson? = … … 92 92 = Can I add a message to a marker? = 93 93 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.94 Yes: `[leaflet-marker message="Hello there!" visible]`, where visible designates if it is visible on page load. Otherwise it is only visible when clicked. 95 95 96 96 = Can I use your plugin with a picture instead of a map? = … … 119 119 2. See the shortcode play out on the front end. 120 120 3. 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/"`.121 4. For `[leaflet-image]` paste that image URL into an attribute titled `source`: example: `src="https://picsum.photos/1000/1000/"`. 122 122 5. 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.123 6. 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. 124 124 7. Add geojson via URL: `[leaflet-geojson src="https://example.com/path/to.geojson"]` 125 125 8. 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). 126 126 127 127 == 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]` 128 131 129 132 = 2.11.4 = -
leaflet-map/tags/2.11.5/scripts/leaflet-svg-icon.js
r1851128 r1980356 1 1 L.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] 17 19 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 } 25 27 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 }) 46 31 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 }) 58 40 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 }) 62 82 63 83 L.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)}});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"),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 39 39 /* only required field for image map (src/source) */ 40 40 $src = empty($src) ? '' : $src; 41 $source = empty($source) ? 'https:// lorempixel.com/1000/1000/' : $source;41 $source = empty($source) ? 'https://picsum.photos/1000/1000/' : $source; 42 42 $source = empty($src) ? $source : $src; 43 43 -
leaflet-map/tags/2.11.5/shortcodes/class.map-shortcode.php
r1943975 r1980356 55 55 * 56 56 * @param array|string $atts key value pairs from shortcode 57 * @param string $content inner text in shortcode58 57 * 59 58 * @return array new atts, which is actually an array 60 59 */ 61 protected function getAtts($atts='' , $content=null)60 protected function getAtts($atts='') 62 61 { 63 62 $atts = (array) $atts; … … 88 87 $atts['width'] .= is_numeric($atts['width']) ? 'px' : ''; 89 88 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 90 111 /* 91 112 need to allow 0 or empty for removal of attribution … … 103 124 'boxZoom' => isset($boxzoom) ? $boxzoom : null, 104 125 'dragging' => isset($dragging) ? $dragging : null, 105 'keyboard' => isset($keyboard) ? $keyboard : null 126 'keyboard' => isset($keyboard) ? $keyboard : null, 106 127 ); 107 128 108 129 // filter out nulls 109 130 $more_options = $this->LM->filter_null($more_options); … … 111 132 // change string booleans to booleans 112 133 $more_options = filter_var_array($more_options, FILTER_VALIDATE_BOOLEAN); 134 135 if ($maxBounds) { 136 $more_options['maxBounds'] = $maxBounds; 137 } 113 138 114 139 // wrap as JSON -
leaflet-map/tags/2.11.5/shortcodes/class.shortcode.php
r1851128 r1980356 40 40 * Instantiate class and get HTML for shortcode 41 41 * 42 * @param array $atts string 42 * @param array $atts string|array 43 43 * @param string $content Optional 44 44 * 45 45 * @return string (see above) 46 46 */ 47 public static function shortcode($atts , $content = null)47 public static function shortcode($atts = '', $content = null) 48 48 { 49 49 $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 51 64 return $instance->getHTML($atts, $content); 52 65 } -
leaflet-map/tags/2.11.5/templates/shortcode-helper.php
r1943975 r1980356 27 27 $drag = __('Drag Me', 'leaflet-map'); 28 28 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]', 31 31 $drag 32 32 )); … … 53 53 ), 54 54 __("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]', 57 57 ), 58 58 __("Marker Icon", 'leaflet-map') => array( 59 '[leaflet-map zoom=10 address="cochrane, Ontario" scrollwheel =1]',59 '[leaflet-map zoom=10 address="cochrane, Ontario" scrollwheel]', 60 60 '[leaflet-marker iconUrl="https://i.imgur.com/Q54ueuO.png" iconSize="80,50" iconAnchor="40,60"]' 61 61 ), 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 ), 62 66 __("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]', 64 68 ), 65 69 __("Alternate Map Tiles w/scrollwheel", 'leaflet-map') => array( 66 '[leaflet-map zoom=2 scrollwheel =1lat=-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."]', 67 71 ), 68 72 __("Marker Popup Messages (on click)", 'leaflet-map') => array( … … 75 79 ), 76 80 __("Basic Lines w/Scrollwheel", 'leaflet-map') => array( 77 '[leaflet-map lat=41 lng=29 scrollwheel =1zoom=6]',81 '[leaflet-map lat=41 lng=29 scrollwheel zoom=6]', 78 82 '[leaflet-line latlngs="41, 29; 44, 18;"]' 79 83 ), … … 84 88 __("Fitted Colored Line on Addresses", 'leaflet-map') => array( 85 89 '[leaflet-map]', 86 '[leaflet-line color="purple" addresses="Sayulita; Puerto Vallarta;" fitline =1]'90 '[leaflet-line color="purple" addresses="Sayulita; Puerto Vallarta;" fitline]' 87 91 ), 88 92 __("More Crazy Line Attributes", 'leaflet-map') => array( 89 93 '[leaflet-map]', 90 '[leaflet-line color="red" weight=10 dasharray="2,15" addresses="Halifax, N S; 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]' 91 95 ), 92 96 __("Disable all Interaction", 'leaflet-map') => array( … … 95 99 __("Add GeoJSON by URL (with popups)", 'leaflet-map') => array( 96 100 '[leaflet-map doubleClickZoom=true scrollwheel=true]', 97 '[leaflet-geojson src=https://cdn.rawgit.com/bozdoz/064a7101b95a324e8852fe9381ab9a18/raw/03f4f54b13a3a7e256732760a8b679818d9d36fc/map.geojson fitbounds =1popup_property="popup-text"]'101 '[leaflet-geojson src=https://cdn.rawgit.com/bozdoz/064a7101b95a324e8852fe9381ab9a18/raw/03f4f54b13a3a7e256732760a8b679818d9d36fc/map.geojson fitbounds popup_property="popup-text"]' 98 102 ), 99 __(" TestImage Map", 'leaflet-map') => array(100 '[leaflet-image zoom=1 zoomcontrol =1 scrollwheelzoom=1attribution=0]',103 __("Image Map", 'leaflet-map') => array( 104 '[leaflet-image zoom=1 zoomcontrol scrollwheelzoom attribution=0]', 101 105 '[leaflet-marker]' 102 106 ) -
leaflet-map/trunk/README.md
r1946454 r1980356 1 Leaflet Map WordPress Plugin 2 ======== 1 # Leaflet Map WordPress Plugin 3 2 4 3  5 4  6 5 7 6  8 7 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.8 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. 10 9 11 10  12 11 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 22 19 23 20 ``` … … 35 32 ``` 36 33 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: 34 You can have SVG markers, add shapes, geojson, kml, images, and more! See available shortcodes below. 35 36 ## Developing 37 38 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: 43 39 44 40 ```bash … … 55 51 You can also use these NPM scripts to interact with Docker, if you make changes to Docker-related files: 56 52 57 To start: 53 To start: 58 54 59 55 ```bash … … 69 65 That's all for now! Thanks! 70 66 71 Available Shortcodes 72 -------------------- 67 ## Available Shortcodes 73 68 74 69 ### [leaflet-map] … … 76 71  77 72 78 Height, width, latitude, longitude and zoom are the basic attributes: 73 Height, width, latitude, longitude and zoom are the basic attributes: 79 74 80 75 ``` … … 90 85 #### [leaflet-map] Options: 91 86 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 | 111 106 112 107 --- … … 116 111 Much the same as leaflet-map above, but uses `src` for the source image. 117 112 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:113 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: 119 114 120 115 ``` 121 116 [leaflet-image src="path/to/img.jpg" zoom=1] 122 [leaflet-marker draggable =1]117 [leaflet-marker draggable] 123 118 ``` 124 119 … … 127 122 #### [leaflet-image] Options: 128 123 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 | 142 137 143 138 --- … … 147 142  148 143 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.144 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. 150 145 151 146 #### [leaflet-marker] Options: 152 147 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 | 172 167 173 168 --- … … 179 174 Add 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. 180 175 181 Add a popup to the line by adding text to the content of the shortcode: 176 Add a popup to the line by adding text to the content of the shortcode: 182 177 183 178 `[leaflet-line addresses="new york; chicago"]New York to Chicago[/leaflet-line]` … … 185 180 #### [leaflet-line] Options 186 181 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) | 191 186 192 187 And the following Shape Options. See https://leafletjs.com/reference-1.3.4.html#path for details. … … 196 191 197 192 --- 193 198 194 ### [leaflet-circle] 199 195 … … 204 200 #### [leaflet-circle] Options 205 201 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 208 Includes all style options: See https://leafletjs.com/reference-1.3.4.html#path 213 209 214 210 ### [leaflet-geojson] … … 216 212 [](https://gist.github.com/bozdoz/064a7101b95a324e8852fe9381ab9a18) 217 213 218 Or you can add a geojson shape via a url: 214 Or you can add a geojson shape via a url: 219 215 220 216 ``` … … 224 220 #### [leaflet-geojson] Options 225 221 226 Option | Usage 227 --- | --- 228 `src` | Source of the geojson file 222 | Option | Usage | 223 | ------ | -------------------------- | 224 | `src` | Source of the geojson file | 229 225 230 226 ### [leaflet-kml] … … 232 228 Same idea as geojson (above), but takes KML files and loads [Mapbox's togeojson library](https://github.com/mapbox/togeojson) 233 229 234 Contributing 235 ------------- 230 ## Contributing 236 231 237 232 [View Contribution guidelines](https://github.com/bozdoz/wp-plugin-leaflet-map/blob/master/CONTRIBUTING.md) 238 233 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 9 9 * Text Domain: leaflet-map 10 10 * Domain Path: /languages/ 11 * Version: 2.11. 411 * Version: 2.11.5 12 12 * License: GPL2 13 13 * Leaflet Map is free software: you can redistribute it and/or modify … … 30 30 } 31 31 32 define('LEAFLET_MAP__PLUGIN_VERSION', '2.11. 4');32 define('LEAFLET_MAP__PLUGIN_VERSION', '2.11.5'); 33 33 define('LEAFLET_MAP__PLUGIN_FILE', __FILE__); 34 34 define('LEAFLET_MAP__PLUGIN_DIR', plugin_dir_path(__FILE__)); -
leaflet-map/trunk/readme.txt
r1946454 r1980356 7 7 Tags: leaflet, map, mobile, javascript, openstreetmap, mapquest, interactive 8 8 Requires at least: 3.0.1 9 Tested up to: 4.9.810 Version: 2.11. 411 Stable tag: 2.11. 49 Tested up to: 5.0 10 Version: 2.11.5 11 Stable tag: 2.11.5 12 12 License: GPLv2 13 13 License URI: https://www.gnu.org/licenses/gpl-2.0.html … … 70 70 = Can I have an SVG Marker? = 71 71 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.72 Yes! 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. 73 73 74 74 = How do I change the style for lines/geojson? = … … 92 92 = Can I add a message to a marker? = 93 93 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.94 Yes: `[leaflet-marker message="Hello there!" visible]`, where visible designates if it is visible on page load. Otherwise it is only visible when clicked. 95 95 96 96 = Can I use your plugin with a picture instead of a map? = … … 119 119 2. See the shortcode play out on the front end. 120 120 3. 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/"`.121 4. For `[leaflet-image]` paste that image URL into an attribute titled `source`: example: `src="https://picsum.photos/1000/1000/"`. 122 122 5. 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.123 6. 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. 124 124 7. Add geojson via URL: `[leaflet-geojson src="https://example.com/path/to.geojson"]` 125 125 8. 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). 126 126 127 127 == 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]` 128 131 129 132 = 2.11.4 = -
leaflet-map/trunk/scripts/leaflet-svg-icon.js
r1851128 r1980356 1 1 L.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] 17 19 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 } 25 27 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 }) 46 31 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 }) 58 40 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 }) 62 82 63 83 L.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)}});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"),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 39 39 /* only required field for image map (src/source) */ 40 40 $src = empty($src) ? '' : $src; 41 $source = empty($source) ? 'https:// lorempixel.com/1000/1000/' : $source;41 $source = empty($source) ? 'https://picsum.photos/1000/1000/' : $source; 42 42 $source = empty($src) ? $source : $src; 43 43 -
leaflet-map/trunk/shortcodes/class.map-shortcode.php
r1943975 r1980356 55 55 * 56 56 * @param array|string $atts key value pairs from shortcode 57 * @param string $content inner text in shortcode58 57 * 59 58 * @return array new atts, which is actually an array 60 59 */ 61 protected function getAtts($atts='' , $content=null)60 protected function getAtts($atts='') 62 61 { 63 62 $atts = (array) $atts; … … 88 87 $atts['width'] .= is_numeric($atts['width']) ? 'px' : ''; 89 88 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 90 111 /* 91 112 need to allow 0 or empty for removal of attribution … … 103 124 'boxZoom' => isset($boxzoom) ? $boxzoom : null, 104 125 'dragging' => isset($dragging) ? $dragging : null, 105 'keyboard' => isset($keyboard) ? $keyboard : null 126 'keyboard' => isset($keyboard) ? $keyboard : null, 106 127 ); 107 128 108 129 // filter out nulls 109 130 $more_options = $this->LM->filter_null($more_options); … … 111 132 // change string booleans to booleans 112 133 $more_options = filter_var_array($more_options, FILTER_VALIDATE_BOOLEAN); 134 135 if ($maxBounds) { 136 $more_options['maxBounds'] = $maxBounds; 137 } 113 138 114 139 // wrap as JSON -
leaflet-map/trunk/shortcodes/class.shortcode.php
r1851128 r1980356 40 40 * Instantiate class and get HTML for shortcode 41 41 * 42 * @param array $atts string 42 * @param array $atts string|array 43 43 * @param string $content Optional 44 44 * 45 45 * @return string (see above) 46 46 */ 47 public static function shortcode($atts , $content = null)47 public static function shortcode($atts = '', $content = null) 48 48 { 49 49 $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 51 64 return $instance->getHTML($atts, $content); 52 65 } -
leaflet-map/trunk/templates/shortcode-helper.php
r1943975 r1980356 27 27 $drag = __('Drag Me', 'leaflet-map'); 28 28 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]', 31 31 $drag 32 32 )); … … 53 53 ), 54 54 __("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]', 57 57 ), 58 58 __("Marker Icon", 'leaflet-map') => array( 59 '[leaflet-map zoom=10 address="cochrane, Ontario" scrollwheel =1]',59 '[leaflet-map zoom=10 address="cochrane, Ontario" scrollwheel]', 60 60 '[leaflet-marker iconUrl="https://i.imgur.com/Q54ueuO.png" iconSize="80,50" iconAnchor="40,60"]' 61 61 ), 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 ), 62 66 __("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]', 64 68 ), 65 69 __("Alternate Map Tiles w/scrollwheel", 'leaflet-map') => array( 66 '[leaflet-map zoom=2 scrollwheel =1lat=-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."]', 67 71 ), 68 72 __("Marker Popup Messages (on click)", 'leaflet-map') => array( … … 75 79 ), 76 80 __("Basic Lines w/Scrollwheel", 'leaflet-map') => array( 77 '[leaflet-map lat=41 lng=29 scrollwheel =1zoom=6]',81 '[leaflet-map lat=41 lng=29 scrollwheel zoom=6]', 78 82 '[leaflet-line latlngs="41, 29; 44, 18;"]' 79 83 ), … … 84 88 __("Fitted Colored Line on Addresses", 'leaflet-map') => array( 85 89 '[leaflet-map]', 86 '[leaflet-line color="purple" addresses="Sayulita; Puerto Vallarta;" fitline =1]'90 '[leaflet-line color="purple" addresses="Sayulita; Puerto Vallarta;" fitline]' 87 91 ), 88 92 __("More Crazy Line Attributes", 'leaflet-map') => array( 89 93 '[leaflet-map]', 90 '[leaflet-line color="red" weight=10 dasharray="2,15" addresses="Halifax, N S; 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]' 91 95 ), 92 96 __("Disable all Interaction", 'leaflet-map') => array( … … 95 99 __("Add GeoJSON by URL (with popups)", 'leaflet-map') => array( 96 100 '[leaflet-map doubleClickZoom=true scrollwheel=true]', 97 '[leaflet-geojson src=https://cdn.rawgit.com/bozdoz/064a7101b95a324e8852fe9381ab9a18/raw/03f4f54b13a3a7e256732760a8b679818d9d36fc/map.geojson fitbounds =1popup_property="popup-text"]'101 '[leaflet-geojson src=https://cdn.rawgit.com/bozdoz/064a7101b95a324e8852fe9381ab9a18/raw/03f4f54b13a3a7e256732760a8b679818d9d36fc/map.geojson fitbounds popup_property="popup-text"]' 98 102 ), 99 __(" TestImage Map", 'leaflet-map') => array(100 '[leaflet-image zoom=1 zoomcontrol =1 scrollwheelzoom=1attribution=0]',103 __("Image Map", 'leaflet-map') => array( 104 '[leaflet-image zoom=1 zoomcontrol scrollwheelzoom attribution=0]', 101 105 '[leaflet-marker]' 102 106 )
Note: See TracChangeset
for help on using the changeset viewer.