Leaflet Map



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.


Simply create a map with:


Lookup an address with:

[leaflet-map address="chicago"] 

Know the latitude and longitude of a location? Use them (and a zoom level) with:

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

Add a marker under your map shortcode, like so:

[leaflet-map] [leaflet-marker] 

Want more? Make more (and fit the map to contain all of them):

[leaflet-map fitbounds] [leaflet-marker address="tokyo"] [leaflet-marker address="oslo"] [leaflet-marker address="cairo"] [leaflet-marker address="toronto"] 

You can even add popups (to any shape) with their names:

[leaflet-map fitbounds] [leaflet-marker address="tokyo"]Tokyo[/leaflet-marker] [leaflet-marker address="oslo"]Oslo[/leaflet-marker] ... 

Add a link to the popup messages the same way you would add any other link with the WordPress editor.

Other Shapes, GeoJSON, and KML

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 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 Leaflets Path options. Example: [leaflet-circle message="max distance" lng=5.117909610271454 lat=52.097914814706094 radius=17500 color="#0DC143" fillOpacity=0.1].

Or you can add a geojson shape via a url (make sure you are allowed to access it if its not hosted on your own server): [leaflet-geojson src=""]. Add custom popups with field names; try out the default src file and fields like so:

[leaflet-map fitbounds] [leaflet-geojson]{name}[/leaflet-geojson]   name is a property on that GeoJSON, and it can be accessed with curly brackets and the property name. 

Image Maps

Alternatively, you could use a plain image for visitors to zoom and pan around with [leaflet-image src="path/to/image/file.jpg"]. See screenshots 3 5 for help setting that up.


Check out other examples on the Shortcode Helper page in the Leaflet Map admin section.

Check out the source code and more details on GitHub!



  1. Choose to add a new plugin, then click upload
  2. Upload the leaflet-map zip
  3. Activate the plugin through the Plugins menu in WordPress
  4. Use the shortcodes in your pages or posts: e.g. [leaflet-map] and [leaflet-marker]


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 icon.

Pass the style attributes to the respective shortcodes (see all options on LeafletJS):

[leaflet-line color="red" weight=10 dasharray="2,15" addresses="Halifax, NS; Tanzania" classname=marching-ants] 

Yes, just give it a source URL: [leaflet-geojson src=""] It will also support leaflet geojson styles or styles. Add a popup message with [leaflet-geojson popup_text="hello!"], or add HTML by adding it to the content of the shortcode: [leaflet-geojson]Link here, or use text from a feature property, like {title}[/leaflet-geojson] or identify a geojson property with popup_property, and each shape will use its own popup text if available.

Sure!? Use the same attributes as leaflet-geojson (above), but use the [leaflet-kml] or [leaflet-gpx] shortcode.

Yes: [leaflet-marker visible]Hello there![/leaflet-marker], where visible designates if it is visible on page load. Otherwise it is only visible when clicked.

Yes: Use [leaflet-image src="path/to/image/file.jpg"]. See screenshots 3 5 for help setting that up.

Yes: Add your custom URL to the options in the admin page.

Use the marker format [leaflet-marker]Click here![/leaflet-marker] and add a hyperlink like you normally would with the WordPress editor.

For more FAQs, please visit the FAQ section on GitHub here.

Leave a Reply

Your email address will not be published.

Fill out this field
Fill out this field
Please enter a valid email address.
You need to agree with the terms to proceed

Most Viewed Posts