• View
• Edit
• History
• Attach
• Print
• Backlinks

Embed OpenStreetMap

This recipe is superseded by Ape.

Description

Easy, lightweight and unobtrusive embedding of maps in wiki pages.

The recipe scans the wiki page for "shared" links to OpenStreetMap and inserts the map in an inline frame above each found link.

The recipe is easy to use: no new markup to learn, just normal wiki links.

It is lightweight: the full JavaScript Map libraries are not loaded unless there are maps to be embedded, and the embedded map uses the light Leaflet.js framework which is smaller than the full OpenLayersAPI.

The recipe is unobtrusive: visitors with JavaScript disabled can see the link and open the map if they want.

And finally, if the recipe is disabled some day, the links will continue to work without any need to edit the pages and remove unparsed markup.

OpenStreetMap is a free software and free content resource for editing, updating and sharing maps. The JavaScript libraries used to embed the maps are also free software.

Installation

• Get osmap-pmwiki.js and copy it to your pmwiki/pub directory.
• Add to config.php such a line:
  $HTMLFooterFmt['osmap'] = '<script type="text/javascript" src="$FarmPubDirUrl/osmap-pmwiki.js"></script>';

Usage

To embed a map in your wiki page, first go to http://www.openstreetmap.org/ to retrieve the "shared" link:

• find the location you want to embed, optionally select the layers
• pull the right sidebar and select "Share"
• enable the checkbox "Include marker" (if you want a marker) then re-position the map so that the marker is where you want it
• copy the address from the text field under the "Link" tab.

This link can now be pasted into your wiki page like any other regular link. There is no custom markup. For example:

[[http://www.openstreetmap.org/?mlat=48.85359&mlon=2.34805#map=3/48.85359/2.34805 | Paris, France, Parvis de Notre-Dame]]

Note that the map is inserted before the link which stays visible.

It is possible to select the frame dimensions: append to the link address #h=200 and/or #w=300 or #w=50% to set the height (pixels only) and width (pixels or percents). Example:

[[http://www.openstreetmap.org/#map=16/48.85359/2.34805#h=150#w=300 |Link address]], smaller map, notice #h=150#w=300 appended at the end of the link address.

The default dimensions (height 350 pixels and width 100%) can be modified in osmap-pmwiki.js, see below.

If you have a shared link in your wiki page and you don't want a map to be embedded, just remove the www. part before openstreetmap.org in the link address.

http://openstreetmap.org/#map=16/48.85359/2.34805 - link without the www. part does not embed the map.

Configuration

It is possible to modify the osmap-pmwiki.js file to change the width (100%) and height (350px) for the default map: edit the following lines near the beginning of the file:

  OSMheight: '350',
  OSMwidth: "100%",

These dimensions can be overridden for each individual map from the wiki page.

Notes

Currently a single marker can be set, there is no way to set multiple markers.

Change log / Release notes

• 20131130: first public release, ready to be tested.

See also

• OpenLayersAPI (Adds OpenLayers API to PmWiki pages (for embedding OpenStreetMaps))

Contributors

Recipe written and maintained by Petko.

Comments

See discussion at EmbedOpenStreetMap-Talk