| 1 |
# Leaflet Map WordPress Plugin |
| 2 |
|
| 3 |
 |
| 4 |
 |
| 5 |
|
| 6 |
 |
| 7 |
|
| 8 |
Add a map generated with [](http://leafletjs.com/LeafletJS](http://leafletjs.com/](http://leafletjs.com/): an open-source JavaScript library for mobile-friendly interactive maps. Map tiles are provided by default through [](http://www.openstreetmap.org/OpenStreetMap](http://www.openstreetmap.org/](http://www.openstreetmap.org/), or [](https://www.mapquest.ca/MapQuest](https://www.mapquest.ca/](https://www.mapquest.ca/) (with an app key). Can be set per map with shortcode attributes or through the dashboard settings. |
| 9 |
|
| 10 |
 |
| 11 |
|
| 12 |
## Table of Contents |
| 13 |
|
| 14 |
- [](#leaflet-map-wordpress-pluginLeaflet Map WordPress Plugin](#leaflet-map-wordpress-plugin](#leaflet-map-wordpress-plugin) |
| 15 |
- [](#table-of-contentsTable of Contents](#table-of-contents](#table-of-contents) |
| 16 |
- [](#installationInstallation](#installation](#installation) |
| 17 |
- [](#general-usageGeneral Usage](#general-usage](#general-usage) |
| 18 |
- [](#developingDeveloping](#developing](#developing) |
| 19 |
- [](#available-shortcodesAvailable Shortcodes](#available-shortcodes](#available-shortcodes) |
| 20 |
- [](#leaflet-map[leaflet-map]](#leaflet-map](#leaflet-map) |
| 21 |
- [](#leaflet-map-options[leaflet-map] Options:](#leaflet-map-options](#leaflet-map-options) |
| 22 |
- [](#leaflet-image[leaflet-image]](#leaflet-image](#leaflet-image) |
| 23 |
- [](#leaflet-image-options[leaflet-image] Options:](#leaflet-image-options](#leaflet-image-options) |
| 24 |
- [](#leaflet-marker[leaflet-marker]](#leaflet-marker](#leaflet-marker) |
| 25 |
- [](#leaflet-marker-options[leaflet-marker] Options:](#leaflet-marker-options](#leaflet-marker-options) |
| 26 |
- [](#leaflet-line[leaflet-line]](#leaflet-line](#leaflet-line) |
| 27 |
- [](#leaflet-line-options[leaflet-line] Options](#leaflet-line-options](#leaflet-line-options) |
| 28 |
- [](#leaflet-polygon[leaflet-polygon]](#leaflet-polygon](#leaflet-polygon) |
| 29 |
- [](#leaflet-circle[leaflet-circle]](#leaflet-circle](#leaflet-circle) |
| 30 |
- [](#leaflet-circle-options[leaflet-circle] Options](#leaflet-circle-options](#leaflet-circle-options) |
| 31 |
- [](#leaflet-geojson[leaflet-geojson]](#leaflet-geojson](#leaflet-geojson) |
| 32 |
- [](#leaflet-geojson-options[leaflet-geojson] Options](#leaflet-geojson-options](#leaflet-geojson-options) |
| 33 |
- [](#leaflet-kml[leaflet-kml]](#leaflet-kml](#leaflet-kml) |
| 34 |
- [](#leaflet-gpx[leaflet-gpx]](#leaflet-gpx](#leaflet-gpx) |
| 35 |
- [](#frequently-asked-questionsFrequently Asked Questions](#frequently-asked-questions](#frequently-asked-questions) |
| 36 |
- [](#how-can-i-add-another-leaflet-pluginHow Can I Add another Leaflet Plugin?](#how-can-i-add-another-leaflet-plugin](#how-can-i-add-another-leaflet-plugin) |
| 37 |
- [](#contributingContributing](#contributing](#contributing) |
| 38 |
- [](#wish-listWish List](#wish-list](#wish-list) |
| 39 |
|
| 40 |
## Installation |
| 41 |
|
| 42 |
- Install via the WordPress plugins page on your WordPress site: `/wp-admin/plugin-install.php` (search Leaflet) |
| 43 |
|
| 44 |
## General Usage |
| 45 |
|
| 46 |
``` |
| 47 |
[leaflet-map address="Manhattan, New York"] |
| 48 |
[leaflet-marker] |
| 49 |
``` |
| 50 |
|
| 51 |
The above shortcode will produce a map centered at Manhattan, New York (thanks to geocoding), and also drop a marker in the center. |
| 52 |
|
| 53 |
It's also useful to add popups to the markers: |
| 54 |
|
| 55 |
``` |
| 56 |
[leaflet-map address="Las Vegas"] |
| 57 |
[leaflet-marker]Hey! This is where I got married![/leaflet-marker] |
| 58 |
``` |
| 59 |
|
| 60 |
You can have SVG markers, add shapes, geojson, kml, images, and more! See available shortcodes below. |
| 61 |
|
| 62 |
## Developing |
| 63 |
|
| 64 |
This plugin uses Docker for development. Simply: |
| 65 |
|
| 66 |
1. [](https://www.docker.com/get-startedinstall Docker](https://www.docker.com/get-started](https://www.docker.com/get-started) |
| 67 |
1. fork/clone the repo, and |
| 68 |
1. execute this command from the repo's root directory in your terminal: |
| 69 |
|
| 70 |
```bash |
| 71 |
docker-compose up |
| 72 |
``` |
| 73 |
|
| 74 |
You can also use NPM scripts to interact with Docker, if you make changes to Docker-related files: |
| 75 |
|
| 76 |
To start: |
| 77 |
|
| 78 |
```bash |
| 79 |
npm start |
| 80 |
``` |
| 81 |
|
| 82 |
To completely remove: |
| 83 |
|
| 84 |
```bash |
| 85 |
npm run destroy |
| 86 |
``` |
| 87 |
|
| 88 |
That's all for now! Thanks! |
| 89 |
|
| 90 |
## Available Shortcodes |
| 91 |
|
| 92 |
### [leaflet-map] |
| 93 |
|
| 94 |
 |
| 95 |
|
| 96 |
Height, width, latitude, longitude and zoom are the basic attributes: |
| 97 |
|
| 98 |
``` |
| 99 |
[leaflet-map height=250 width=250 lat=44.67 lng=-63.61 zoom=5] |
| 100 |
``` |
| 101 |
|
| 102 |
However, you can also just give it an address, and the chosen geocoder (default: Nominatum) will look it up for you: |
| 103 |
|
| 104 |
``` |
| 105 |
[leaflet-map address="Oslo, Norway"] |
| 106 |
``` |
| 107 |
|
| 108 |
#### [leaflet-map] Options: |
| 109 |
|
| 110 |
| Option | Default | |
| 111 |
| ---------------------------- | ----------------------- | |
| 112 |
| `lat` and `lng` or `address` | lat: 44.67, lng: -63.61 | |
| 113 |
| `zoom` | 12 | |
| 114 |
| `height` | 250 | |
| 115 |
| `width` | 100% | |
| 116 |
| `fitbounds` | 0 (false) | |
| 117 |
| `zoomcontrol` | 0 (false) | |
| 118 |
| `scrollwheel` | 0 (false) | |
| 119 |
| `doubleclickzoom` | 0 (false) | |
| 120 |
| `min_zoom` | 0 | |
| 121 |
| `max_zoom` | 20 | |
| 122 |
| `subdomains` | abc | |
| 123 |
| `attribution` | ©Leaflet ©OpenStreetMap | |
| 124 |
| `closepopuponclick` | false | |
| 125 |
| `trackresize` | false | |
| 126 |
| `boxZoom` | true | |
| 127 |
| `dragging` | true | |
| 128 |
| `keyboard` | true | |
| 129 |
| `maxbounds` | null | |
| 130 |
| `detect-retina` | 0 (false) | |
| 131 |
|
| 132 |
--- |
| 133 |
|
| 134 |
### [leaflet-image] |
| 135 |
|
| 136 |
Much the same as leaflet-map above, but uses `src` for the source image. |
| 137 |
|
| 138 |
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: |
| 139 |
|
| 140 |
``` |
| 141 |
[leaflet-image src="path/to/img.jpg" zoom=1] |
| 142 |
[leaflet-marker draggable] |
| 143 |
``` |
| 144 |
|
| 145 |
Then in the console, check the coordinates when you move the marker (should only work at that zoom level). |
| 146 |
|
| 147 |
#### [leaflet-image] Options: |
| 148 |
|
| 149 |
| Option | Default | |
| 150 |
| ----------------- | -------------------------------- | |
| 151 |
| `src` | https://picsum.photos/1000/1000/ | |
| 152 |
| `zoom` | 12 | |
| 153 |
| `height` | 250 | |
| 154 |
| `width` | 100% | |
| 155 |
| `fitbounds` | 0 (false) | |
| 156 |
| `zoomcontrol` | 0 (false) | |
| 157 |
| `scrollwheel` | 0 (false) | |
| 158 |
| `doubleclickzoom` | 0 (false) | |
| 159 |
| `min_zoom` | 0 | |
| 160 |
| `max_zoom` | 20 | |
| 161 |
| `attribution` | ©Leaflet ©OpenStreetMap | |
| 162 |
|
| 163 |
--- |
| 164 |
|
| 165 |
### [leaflet-marker] |
| 166 |
|
| 167 |
 |
| 168 |
|
| 169 |
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. |
| 170 |
|
| 171 |
#### [leaflet-marker] Options: |
| 172 |
|
| 173 |
| Option | Usage | |
| 174 |
| ---------------------------- | ------------------------------------------------------------------------------------------ | |
| 175 |
| `lat` and `lng` or `address` | Location on the map; defaults to map center; `lat`/`lng` are floats, `address` is a string | |
| 176 |
| `draggable` | Make a marker draggable (`boolean`); default `false` | |
| 177 |
| `title` | Add a hover-over message to your marker (different than popup) | |
| 178 |
| `alt` | Add an alt text to the marker image | |
| 179 |
| `zindexoffset` | Define the z-index for the marker image | |
| 180 |
| `opacity` | Define the css opacity for the marker image | |
| 181 |
| `iconurl` | Give a url for the marker image file | |
| 182 |
| `iconsize` | Set the size of the icon: e.g. "80,50" for 80px width 50px height | |
| 183 |
| `iconanchor` | Set the anchor position of the icon: e.g. "40,60" for 40px left 60px top | |
| 184 |
| `shadowurl` | Give a url for the marker shadow image file | |
| 185 |
| `shadowsize` | Set the size of the shadow: e.g. "80,50" for 80px width 50px height | |
| 186 |
| `shadowanchor` | Set the anchor position of the shadow: e.g. "40,60" for 40px left 60px top | |
| 187 |
| `popupanchor` | Set the anchor position of the popup: e.g. "40,60" for 40px left 60px top | |
| 188 |
| `svg` | Boolean for whether the marker should be created as an svg: default `false` | |
| 189 |
| `background` | Background color for an SVG marker (above) | |
| 190 |
| `color` | color of the SVG marker (above) | |
| 191 |
| `iconclass` | className for the marker image | |
| 192 |
|
| 193 |
--- |
| 194 |
|
| 195 |
### [leaflet-line] |
| 196 |
|
| 197 |
 |
| 198 |
|
| 199 |
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. |
| 200 |
|
| 201 |
Add a popup to the line by adding text to the content of the shortcode: |
| 202 |
|
| 203 |
`[leaflet-line addresses="new york; chicago"]New York to Chicago[/leaflet-line]` |
| 204 |
|
| 205 |
#### [leaflet-line] Options |
| 206 |
|
| 207 |
| Option | Usage | |
| 208 |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | |
| 209 |
| `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"]` | |
| 210 |
| `fitbounds` | Fit the map to the bounds of the line (instead of whatever center you gave the map originally) | |
| 211 |
|
| 212 |
And the following Shape Options. See https://leafletjs.com/reference-1.3.4.html#path for details. |
| 213 |
'stroke', 'color', 'weight', 'opacity', |
| 214 |
'lineCap', 'lineJoin', 'dashArray', 'dashOffset' |
| 215 |
'fill', 'fillColor', 'fillOpacity', 'fillRule', 'className' |
| 216 |
|
| 217 |
--- |
| 218 |
|
| 219 |
### [leaflet-polygon] |
| 220 |
|
| 221 |
Virtually the same as [](aboveleaflet-line](above](above) |
| 222 |
|
| 223 |
--- |
| 224 |
|
| 225 |
### [leaflet-circle] |
| 226 |
|
| 227 |
 |
| 228 |
|
| 229 |
Add a circle to the map by adding `[leaflet-circle]`. You can specify the position using `lat` and `lng` and the radius in meters using `radius`. You can also customize the style using [](https://leafletjs.com/reference-1.3.4.html#path-optionLeaflet's Path options](https://leafletjs.com/reference-1.3.4.html#path-option](https://leafletjs.com/reference-1.3.4.html#path-option). Example: `[leaflet-circle message="max distance" lng=5.1179 lat=52.0979 radius=17500 color="#0DC143" fillOpacity=0.1]`. |
| 230 |
|
| 231 |
#### [leaflet-circle] Options |
| 232 |
|
| 233 |
| Options | Usage | |
| 234 |
| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
| 235 |
| `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"]` | |
| 236 |
| `fitbounds` | Fit the map to the bounds of the circle (instead of whatever center you gave the map originally) | |
| 237 |
| radius | Radius of the circle in meters | |
| 238 |
|
| 239 |
Includes all style options: See https://leafletjs.com/reference-1.3.4.html#path |
| 240 |
|
| 241 |
--- |
| 242 |
|
| 243 |
### [leaflet-geojson] |
| 244 |
|
| 245 |
[](https://gist.github.com/bozdoz/064a7101b95a324e8852fe9381ab9a18](https://gist.github.com/bozdoz/064a7101b95a324e8852fe9381ab9a18](https://gist.github.com/bozdoz/064a7101b95a324e8852fe9381ab9a18) |
| 246 |
|
| 247 |
Or you can add a geojson shape via a url: |
| 248 |
|
| 249 |
``` |
| 250 |
[leaflet-geojson src="https://gist.githubusercontent.com/bozdoz/064a7101b95a324e8852fe9381ab9a18/raw/03f4f54b13a3a7e256732760a8b679818d9d36fc/map.geojson"] |
| 251 |
``` |
| 252 |
|
| 253 |
#### [leaflet-geojson] Options |
| 254 |
|
| 255 |
| Option | Usage | |
| 256 |
| ---------------- | ------------------------------------------------------------------------------------------------ | |
| 257 |
| `src` | Source of the geojson file | |
| 258 |
| `popup_text` | Text for any popups when shapes are clicked | |
| 259 |
| `popup_property` | Name of the geojson property that contains popup content | |
| 260 |
| `fitbounds` | Fit the map to the bounds of all shapes (instead of whatever center you gave the map originally) | |
| 261 |
| `circleMarker` | Display circles instead of markers. Vastly improves performance on maps with a lot of points. | |
| 262 |
| `radius` | Radius of the circles, when `circleMarkers` is set | |
| 263 |
|
| 264 |
Includes all style options: See https://leafletjs.com/reference-1.3.4.html#path. Also, if you want to add feature |
| 265 |
properties to the popups, use the inner content and curly brackets to substitute the values: |
| 266 |
`[leaflet-geojson]Field A = {field_a}[/leaflet-geojson]`. |
| 267 |
|
| 268 |
### [leaflet-kml] |
| 269 |
|
| 270 |
Same idea as geojson (above), but takes KML files and loads [](https://github.com/mapbox/togeojsonMapbox's togeojson library](https://github.com/mapbox/togeojson](https://github.com/mapbox/togeojson) |
| 271 |
|
| 272 |
### [leaflet-gpx] |
| 273 |
|
| 274 |
Same idea as geojson and KML (above), but takes GPX files and also loads [](https://github.com/mapbox/togeojsonMapbox's togeojson library](https://github.com/mapbox/togeojson](https://github.com/mapbox/togeojson) |
| 275 |
|
| 276 |
## Frequently Asked Questions |
| 277 |
|
| 278 |
### How Can I Add another Leaflet Plugin? |
| 279 |
|
| 280 |
There are some steps you can take, currently, to add another Leaflet Plugin to enhance this WordPress plugin. In general, you can add an action to trigger when Leaflet is loaded, and add custom JavaScript and any dependencies your plugin needs: |
| 281 |
|
| 282 |
Here's an example with MapBox Fullscreen plugin: |
| 283 |
|
| 284 |
functions.php |
| 285 |
|
| 286 |
```php |
| 287 |
add_action('leaflet_map_loaded', 'fs_leaflet_loaded'); |
| 288 |
function fs_leaflet_loaded() { |
| 289 |
wp_enqueue_script('full_screen_leaflet', 'https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js', Array('wp_leaflet_map'), '1.0', true); |
| 290 |
wp_enqueue_style('full_screen_leaflet_styles', 'https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css'); |
| 291 |
|
| 292 |
// custom js |
| 293 |
wp_enqueue_script('full_screen_custom', get_theme_file_uri( '/js/full-screen.js' ), Array('full_screen_leaflet'), '1.0', true); |
| 294 |
} |
| 295 |
``` |
| 296 |
|
| 297 |
/js/full-screen.js |
| 298 |
|
| 299 |
```js |
| 300 |
(function() { |
| 301 |
function main() { |
| 302 |
if (!window.WPLeafletMapPlugin) { |
| 303 |
console.log("no plugin found!"); |
| 304 |
return; |
| 305 |
} |
| 306 |
|
| 307 |
// iterate any of these: `maps`, `markers`, `markergroups`, `lines`, `circles`, `geojsons` |
| 308 |
var maps = window.WPLeafletMapPlugin.maps; |
| 309 |
|
| 310 |
for (var i = 0, len = maps.length; i < len; i++) { |
| 311 |
var map = maps[i]; |
| 312 |
map.whenReady(function() { |
| 313 |
this.addControl(new L.Control.Fullscreen()); |
| 314 |
}); |
| 315 |
} |
| 316 |
} |
| 317 |
|
| 318 |
window.addEventListener("load", main); |
| 319 |
})(); |
| 320 |
``` |
| 321 |
|
| 322 |
## Contributing |
| 323 |
|
| 324 |
[](https://github.com/bozdoz/wp-plugin-leaflet-map/blob/master/CONTRIBUTING.mdView Contribution guidelines](https://github.com/bozdoz/wp-plugin-leaflet-map/blob/master/CONTRIBUTING.md](https://github.com/bozdoz/wp-plugin-leaflet-map/blob/master/CONTRIBUTING.md) |
| 325 |
|
| 326 |
## Wish List |
| 327 |
|
| 328 |
- A map editor/shortcode generator (so users can see what they're adding to the page) |
| 329 |
|
