Leaflet Map

Screenshots

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. Maps 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 (by default) 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] OR [leaflet-map attribution="Copyright @bozdoz"] Look at other examples on the Shortcode Helper in the Leaflet Map admin section. Markers 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 this syntax: [leaflet-marker]Message here: click here[/leaflet-marker] and add a link like you normally would with the WordPress editor. Lines and other Shapes 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"] 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 the source code on GitHub! Shoot me a question @bozdoz.