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

OpenLayersAPI

Questions answered by this recipe

Embeds an interactive map into PmWiki pages.

Description

OLA (OpenLayersAPI) allows to display maps that can be dragged and zoomed by the user. Editors can add markers to the map.

The PmWiki cookbook provides several recipes to embed GoogleMaps, but GoogleMaps are not free. OLA (OpenLayers API) allows integration of interactive maps, especially from the OpenStreetMap project, through the open source JavaScript API OpenLayers.

The OpenStreetMap Project could be described as a kind of Wikipedia for maps: contributors build a world map with a free licence (Creative Commons BY-SA or OdBL). More about OpenStreetMap can be found on the project wiki.

Installation

1. download the ZIP archive from github.com/padorange/ola and unpack all files from the folder ola-master into your PmWiki directory.
2. add include_once("$FarmD/cookbook/OpenLayersAPI/ola.php"); to your local/config.php file.
3. include your map as described below and/or try the examples.

Usage

Simple Markup:

• Go to www.openstreetmap.org, pick the area and zoom factor you want and copy the complete link from the URL bar into the following directive:

• Adding a marker: Return to the OpenStreetMap web page, chose "Share" at the right edge of the screen, select "Include marker", move the marker to the desired position and then include the URL that appears in the "Share" bar into your ola-map directive as described above.

Advanced Markup:

• ola-map: create the map
  • link=see above
  • width, height: specify map size in pixels
  • view=cyclemap,openmapquest: activate 3 rendering: mapnik (default, can be bypassed using -mapnik), cyclemap and openmapquest
  • ctrl=large,scale,layer: show size controller, scale controller (bottom-left) and layer controller (top-right, user can switch between layers if there is more than one)
  • lat, lon: specify latitude and longitude of the map center (only necessary if not provided by link=)
  • zoom: specificy the map zoom (only necessary if not provided by link=)
• ola-point: create (additional) markers on the map
  • lat, lon: specify marker coordinates

Page Variable $OSMLink:
If (:ola-map link=:) is used, this recipe will automatically generate a page variable named $OSMLink containing this URL. This variable could be used to provide a link to the OSM web page (useful for templates or frequent changes of location):

Examples

Example without URL - this should display the map of a nice French city, including about 10 points of interest (POI):

(:ola-map ctrl=large,scale,layer view=cyclemap,openmapquest lat=45.686 lon=-0.337 width='100%' height='600px' zoom=12 :)
(:ola-point lat=45.684297 lon=-0.321608 text='Saint-Gobain Emballage':)
(:ola-point lat=45.683068 lon=-0.372881 text='Revico':)
(:ola-point lat=45.716443 lon=-0.326028 text='Hennessy (Seveso 2)':)
(:ola-point lat=45.666486 lon=-0.356112 text='Remy-Cointreau (Seveso 2)':)
(:ola-point lat=45.656648 lon=-0.362592 text='Antargaz (Seveso 2)':)
(:ola-point lat=45.689776 lon=-0.336446 text='Ancien site Onyx':)
(:ola-point lat=45.689484 lon=-0.311093 text='Agence EDF':)
(:ola-point lat=45.684807 lon=-0.342003 text='Station d épuration de Saint-Martin':)
(:ola-point lat=45.709805 lon=-0.309420 text='Station de refoulement de Boutiers':)

Examples with OpenStreetMap URL - these should take you straight into downtown New York City:

Basic version:

(:ola-map
link=http://www.openstreetmap.org/?#map=16/40.7300/-74.0054:)

Basic version with marker:

(:ola-map
link=http://www.openstreetmap.org/?mlat=40.7300&mlon=-74.0054#map=16/40.7300/-74.0054:)

Basic version with marker and additional formatting (please remove line break when copying):

(:ola-map link=http://www.openstreetmap.org/?mlat=40.7300&mlon=-74.0054#map=16/40.7300/-74.0054 
width=350px height=350px ctrl=scale view=-mapnik,openmapquest:)

Notes

See documentation.txt that came with the recipe.

Release notes

• 0.1 is an alpha for testing only.
• 0.2 adds support for "cyclemap" rendering (replaces osma rendering), this map emphasizes cycle data.
• 0.3 adds markup (:ola-map link=URL:) and the page variable $OSMLink (both contributed by StefCT).
• 0.4 adds PHP 5.5 compatibility (contributed by StefCT).

Demo

• www.leretourdelautruche.com
• hack.nylug.org
• Demo with markup: Simple and Advanced

See also

• GoogleMap API
• Ape: Automagical PmWiki Embed (Embed videos, maps, documents, and more in wiki pages)

Contributors

Pierre-Alain Dorange, StefCT

Comments

See discussion at OpenLayersAPI-Talk