Search Over 30,000 FREE Plugins from the Official WordPress Plugin Directory Repository

Leaflet Map

A flexible plugin that adds basic shortcodes for creating multiple Leaflet maps and adding multiple markers to those maps.

Add a map generated with leaflet JS: a mobile friendly map application. Map tiles are provided by default through OpenStreetMap and MapQuest (with an app key). Can be set per map with shortcode attributes or through the dashboard settings.

Some shortcode attributes:

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 remove the attribution. Also, you can set this per map in the shortcode (1 for enabled and 0 for disabled):

[leaflet-map show_attr="1"]

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

[leaflet-map zoomcontrol="0"]

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.

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.

Or you can add a geojson shape via a url (work in progress): [leaflet-geojson src="https://example.com/path/to.geojson"]

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

Check out the source code on GitHub!

Author bozdoz
Profile
Contributors bozdoz, Remigr, nielsalstrup, jeromelebleu
Tags interactive, javascript, Leaflet, map, mapquest, openstreetmap
  1. leaflet-map screenshot 1

    Put the shortcode into the post.

  2. leaflet-map screenshot 2

    See the shortcode play out on the front end.

  3. leaflet-map screenshot 3

    For [leaflet-image] upload an image, and copy the URL from the right-hand side

  4. leaflet-map screenshot 4

    For [leaflet-image] paste that image URL into an attribute titled source: example: source="http://lorempixel.com/1000/1000/".

  5. leaflet-map screenshot 5

    See the [leaflet-image] on the front end.

  6. leaflet-map screenshot 6

    If you use [leaflet-marker draggable=true], then you can drag the marker where you want it, open a developers console, and see the specific shortcode to use.

  7. leaflet-map screenshot 7

    Add geojson via URL: [leaflet-geojson src="https://example.com/path/to.geojson"]

  8. leaflet-map screenshot 8

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

  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]

2.4.0

  • Added Leaflet 1.0.2 scripts by default (works!);

2.3.0

  • Added KML support [leaflet-kml];

2.2.0

  • Added popup_text and popup_property to leaflet-geojson to bind popups via a shortcode property or geojson properties

2.1.0

  • Added Leaflet and GeoJSON.io styles to geojson shortcode

2.0.2

  • OpenStreetMap.org has an SSL certificate (osm.org didn't); not a significant upgrade.

2.0.1

  • Changed ajax request to be compatible with some versions of IE.

2.0

  • Needed to add support for a MapQuest app key, since they discontinued the direct access of their tiles on July 11, 2016; added an alternate OpenStreetMap tile URL as the new default. Remember to reset options to default values!

1.16

  • Added bare geojson support

1.15

  • Removed shortcode brackets from leaflet-marker shortcode

1.14

  • Fixed slashes in optional map attribution

1.13

1.12

  • Added htmlspecialchars in admin.php, and custom attributions. Bugfix : removed position in admin menu so it doesn't overwrite or be overwritten (thanks to @ziodave)

1.11

  • Added HTTPS support.

1.10

  • Added lines to the map, thanks to @Remigr!

1.9

  • Added ability to use hyperlinks in marker messages.

1.8

  • Added ability to self-host leaflet files.

1.7

  • Uploaded 1.6 to subversion incorrectly!

1.6

  • Important fix to conflicts with other plugins!

1.5

  • Some helpful js fixes for multiple window onload functions, and added the leaflet-image shortcode!

1.4

  • Some fixes for Google geocoding, and switched cookies to db options.

1.3

  • Added cookies for Google geocoding to cut back on requests.

1.2

  • Added geocoding to map: [leaflet-map address="halifax, ns"].

1.1

  • Added messages to markers.

1.0

  • First Version. Basic map creation and marker creation.
  • My map now says direct tile access has been discontinued (July 11, 2016); can you fix it?

Yes. Update to the newest plugin version, and reset defaults in settings. You can choose to use MapQuest by signing up and supplying an app key, or use the default OpenStreetMap tiles (with attribution). See Screenshot 8.

  • Can I add geojson?

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 identify a geojson property with popup_property.

  • Can I add kml?

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

  • Can I add a message to a marker?

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

  • Can I use your plugin with a picture instead of a map?

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

  • Can I use my own self-hosted Leaflet files?

Yes: It's been added to the dashboard options!

  • How can I add a link to a marker?

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

  • Can I add a line to the map?

Use the line format [leaflet-line] with attributes latlngs or addresses separated by semi-colons to draw a line: [leaflet-line addresses="Sayulita; Puerto Vallarta"].

  • Can I add my own attributions to custom tile layers?

Yes: use the keyword attribution in your shortcode (semi-colon separated list of attributions): [leaflet-map attribution="Tiles courtesy of MapBox; Locations contributed by viewers"]

Shoot me a question @bozdoz.

Share  
Download
Version 2.4.0

Requires WordPress version: 3.0.1 or higher

Compatible up to: 4.7.2

Last Updated 27 Dec 2016

Date Added: 07 May 2014

Plugin Homepage

Evaluation
star1
star2
star3
star4
star5

5 stars
4 ratings
10,097 downloads

Compatibility

Not Enough Data

Reports:
Works: 0
Broken: 0