Interactive maps and markers on your posts and pages with simple shortcodes.
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:
[leaflet-map]
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.
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 Leaflet’s 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 it’s not hosted on your own server): [leaflet-geojson src="https://example.com/path/to.geojson"]
. 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.
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!
[leaflet-map]
and [leaflet-marker]
Put the shortcode into the post.
See the shortcode play out on the front end.
For [leaflet-image]
upload an image, and copy the URL from the right-hand side
For [leaflet-image]
paste that image URL into an attribute titled source
: example: src="https://picsum.photos/1000/1000/"
.
See the [leaflet-image]
on the front end.
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.
Add geojson via URL: [leaflet-geojson src="https://example.com/path/to.geojson"]
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).
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="https://example.com/path/to.geojson"]
It will also support leaflet geojson styles or geojson.io 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]<a href="#">Link here, or use text from a feature property, like {title}</a>[/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.
Sure. Use the same attributes as leaflet-map, but use the [leaflet-wms]
shortcode; attributes include: src
, layer
, and crs
.
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.
Take a look at the functions of Extensions for Leaflet Map.
For more FAQs, please visit the FAQ section on GitHub here.
lat
and lon
in osm_geocode with isset
tooltipAnchor
to geojson and marker shortcodes0
as a value for x/y and lat/lng coordinatespopupAnchor
without passing iconUrl
detect-retina
to plugin options and leaflet-map
shortcodevisible
att in popups.{attributes.email}
[leaflet-map address="las vegas" !boxZoom !doubleClickZoom !dragging !keyboard !scrollwheel !attribution !touchZoom]
boxZoom
touchZoom
to map attributesfit_markers
with fitbounds
, which now fits all shapes in map view[leaflet-marker draggable svg]
would be the same as [leaflet-marker draggable=1 svg=1]
[leaflet-circle]
src
in leaflet-image and leaflet-geojson/kmlwpautop
; fix was to remove spaces.[leaflet-kml]
;leaflet-image
shortcode![leaflet-map address="halifax, ns"]
.