Add leaflet maps to Wordpress with shortcodes
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
images v2.11.5 Nov 26, 2018
languages getting ready for translations Jan 25, 2018
scripts
shortcodes Merge branch 'master' of github.com:bozdoz/wp-plugin-leaflet-map Feb 19, 2019
templates actually test/use maxbounds; closes #75 Feb 17, 2019
.gitignore better docker Nov 26, 2018
CODE_OF_CONDUCT.md added comments to main file; cleanup readme; updated to leaflet 1.1.0… Jul 8, 2017
CONTRIBUTING.md Update CONTRIBUTING.md Jul 8, 2017
Dockerfile made new script for wp to force --allow-root in the container; added … Dec 21, 2018
LICENSE Update LICENSE Jul 8, 2017
README.md actually test/use maxbounds; closes #75 Feb 17, 2019
class.admin.php V2.11.1 some cleanup, and OSM nominatum as default Jul 17, 2018
class.geocoder.php re-added google geocoder; fixed links in shortcode helper page; Dec 24, 2018
class.leaflet-map.php fix visible att for popups Jan 10, 2019
class.plugin-option.php re-added google geocoder; fixed links in shortcode helper page; Dec 24, 2018
class.plugin-settings.php bump version; renamed fit_markers to fitbounds for consistency; brand… Jan 4, 2019
docker-compose.yml hide theme in docker-compose again Feb 17, 2019
docker-install.sh
index.php v2.11.5 Nov 26, 2018
leaflet-map.php v2.14.0 Feb 17, 2019
package-lock.json update minified Feb 17, 2019
package.json
readme.txt v2.14.0 Feb 17, 2019
style.css

README.md

Leaflet Map WordPress Plugin

Leaflet WordPress

Header Image

Add a map generated with LeafletJS: an open-source JavaScript library for mobile-friendly interactive maps. Map tiles are provided by default through OpenStreetMap, or MapQuest (with an app key). Can be set per map with shortcode attributes or through the dashboard settings.

Admin Screenshot

Installation

  • (simple) Install via the WordPress plugins page on your WordPress site: /wp-admin/plugin-install.php (search Leaflet)

  • (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

General Usage

[leaflet-map address="Manhattan, New York"]
[leaflet-marker]

The above shortcode will produce a map centered at Manhattan, New York (thanks to geocoding), and also drop a marker in the center.

It's also useful to add popups to the markers:

[leaflet-map address="Las Vegas"]
[leaflet-marker]Hey! This is where I got married![/leaflet-marker]

You can have SVG markers, add shapes, geojson, kml, images, and more! See available shortcodes below.

Developing

This plugin uses Docker for development. Simply 1. install Docker, 2. fork/clone the repo, and 3. execute this command from the repo's root directory in your terminal:

docker-compose up

You should also have node and NPM installed if you want to edit JavaScript files, and need to minify them:

npm install
npm run minify

You can also use these NPM scripts to interact with Docker, if you make changes to Docker-related files:

To start:

npm start

To completely remove:

npm run destroy

That's all for now! Thanks!

Available Shortcodes

[leaflet-map]

Alternate map tiles

Height, width, latitude, longitude and zoom are the basic attributes:

[leaflet-map height=250 width=250 lat=44.67 lng=-63.61 zoom=5]

However, you can also just give it an address, and the chosen geocoder (default: Nominatum) will look it up for you:

[leaflet-map address="Oslo, Norway"]

[leaflet-map] Options:

Option Default
lat and lng or address lat: 44.67, lng: -63.61
zoom 12
height 250
width 100%
fitbounds 0 (false)
zoomcontrol 0 (false)
scrollwheel 0 (false)
doubleclickzoom 0 (false)
min_zoom 0
max_zoom 20
subdomains abc
attribution ©Leaflet ©OpenStreetMap
closepopuponclick false
trackresize false
boxZoom true
dragging true
keyboard true
maxbounds null

[leaflet-image]

Much the same as leaflet-map above, but uses src for the source image.

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:

[leaflet-image src="path/to/img.jpg" zoom=1]
[leaflet-marker draggable]

Then in the console, check the coordinates when you move the marker (should only work at that zoom level).

[leaflet-image] Options:

Option Default
src https://picsum.photos/1000/1000/
zoom 12
height 250
width 100%
fitbounds 0 (false)
zoomcontrol 0 (false)
scrollwheel 0 (false)
doubleclickzoom 0 (false)
min_zoom 0
max_zoom 20
attribution ©Leaflet ©OpenStreetMap

[leaflet-marker]

Markers with HTML within a popup

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.

[leaflet-marker] Options:

Option Usage
lat and lng or address Location on the map; defaults to map center; lat/lng are floats, address is a string
draggable Make a marker draggable (boolean); default false
title Add a hover-over message to your marker (different than popup)
alt Add an alt text to the marker image
zindexoffset Define the z-index for the marker image
opacity Define the css opacity for the marker image
iconurl Give a url for the marker image file
iconsize Set the size of the icon: e.g. "80,50" for 80px width 50px height
iconanchor Set the anchor position of the icon: e.g. "40,60" for 40px left 60px top
shadowurl Give a url for the marker shadow image file
shadowsize Set the size of the shadow: e.g. "80,50" for 80px width 50px height
shadowanchor Set the anchor position of the shadow: e.g. "40,60" for 40px left 60px top
popupanchor Set the anchor position of the popup: e.g. "40,60" for 40px left 60px top
svg Boolean for whether the marker should be created as an svg: default false
background Background color for an SVG marker (above)
color color of the SVG marker (above)
iconclass className for the marker image

[leaflet-line]

Fitted Colored Line

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.

Add a popup to the line by adding text to the content of the shortcode:

[leaflet-line addresses="new york; chicago"]New York to Chicago[/leaflet-line]

[leaflet-line] Options

Option Usage
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"]
fitbounds Fit the map to the bounds of the line (instead of whatever center you gave the map originally)

And the following Shape Options. See https://leafletjs.com/reference-1.3.4.html#path for details. 'stroke', 'color', 'weight', 'opacity', 'lineCap', 'lineJoin', 'dashArray', 'dashOffset' 'fill', 'fillColor', 'fillOpacity', 'fillRule', 'className'


[leaflet-circle]

Circle

Add a circle to the map by adding [leaflet-circle]. You can specify the position using lat and lng and the radius in meters using radius. You can also customize the style using Leaflet's Path options. Example: [leaflet-circle message="max distance" lng=5.1179 lat=52.0979 radius=17500 color="#0DC143" fillOpacity=0.1].

[leaflet-circle] Options

Options Usage
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"]
fitbounds Fit the map to the bounds of the circle (instead of whatever center you gave the map originally)
radius Radius of the circle in meters

Includes all style options: See https://leafletjs.com/reference-1.3.4.html#path

[leaflet-geojson]

Random GeoJSON created by me

Or you can add a geojson shape via a url:

[leaflet-geojson src="https://rawgit.com/bozdoz/567817310f102d169510d94306e4f464/raw/2fdb48dafafd4c8304ff051f49d9de03afb1718b/map.geojson"]

[leaflet-geojson] Options

Option Usage
src Source of the geojson file
popup_text Text for any popups when shapes are clicked
fitbounds Fit the map to the bounds of all shapes (instead of whatever center you gave the map originally)

Includes all style options: See https://leafletjs.com/reference-1.3.4.html#path. Also, if you want to add feature properties to the popups, use the inner content and curly brackets to substitute the values: [leaflet-marker]Field A = {field_a}[/leaflet-marker].

[leaflet-kml]

Same idea as geojson (above), but takes KML files and loads Mapbox's togeojson library

Contributing

View Contribution guidelines

Wish List

  • A map editor/shortcode generator (so users can see what they're adding to the page)