Add leaflet maps to Wordpress with shortcodes
Clone or download
Pull request Compare This branch is 12 commits ahead, 60 commits behind bozdoz:master.
Latest commit ebb1862 Feb 18, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
classes new Text Domain Feb 18, 2018
css update sass / scss Feb 17, 2018
images misc update Feb 17, 2018
languages new Text Domain Feb 18, 2018
leaflet import Leaflet 1.3.1 Feb 17, 2018
scripts misc update Feb 17, 2018
scss update sass / scss Feb 17, 2018
shortcodes misc update Feb 18, 2018
templates new Text Domain Feb 18, 2018
.gitignore misc update Feb 18, 2018
LICENSE Update LICENSE Jul 8, 2017 Projekt rename Feb 18, 2018
class-r23-map.php new Text Domain Feb 18, 2018
index.html misc update Feb 17, 2018
r23-map.php new Text Domain Feb 18, 2018
readme.txt Projekt rename Feb 18, 2018

This plugin is a fork of

Leaflet Map WordPress Plugin

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

Admin Screenshot


  • Upload the entire r23-map folder to the /wp-content/plugins/ directory.

  • Activate the plugin through the 'Plugins' menu in WordPress.

You will find 'Leaflet Map' menu in your WordPress admin panel.

Available Shortcodes


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 Google will look it up for you:

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

The default URL requires attribution by its terms of use. If you want to change the URL, you may define a new attribution, or remove the attribution. You can define this site-wide in the admin, or you can set this per map in the shortcode (0 for disabled):

[leaflet-map attribution=0]


[leaflet-map attribution="Copyright @bozdoz"]

The zoom buttons can be large and annoying. Enable or disable per map in shortcode:

[leaflet-map zoomcontrol="0"]

Alternatively, you could use a plain image for visitors to zoom and pan around with [leaflet-image source="path/to/image/file.jpg"].


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.


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.


Random GeoJSON created by me

Or you can add a geojson shape via a url:

[leaflet-geojson src=""]

Check it out here.


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