Difference between revisions of "Widget:Sandbox"

Revision as of 21:41, 15 July 2011

This widget allows you to embed OpenStreetMap in a wiki page.

Using this widget

You can insert a map with the following wiki code:

{{#widget:OpenStreetMap|lat=52.94762|lon=-1.1467897|zoom=16}}

Parameters

width: Width of the embedded map (default 400px).
height: Height of the embedded map (default 400px).
lat: The x-coordinate for the centre of the view.
lon: The y-coordinate for the centre of the view.
units: The type of map units used for the coordinates (defaults to 'degrees').
zoom: The zoom level (default 15).
showmarker: Adds a visual marker to the center of the map (default false).

Points of interest

poifile: Specifies the url of a file containing points of interest (POI) that should be overlaid on the map. See the file format description in [1]. Note: there is a bug that causes the last line of the poi file to be ignored; a workaround is to add a trailing line with a single '.' character.
poititle: The title of the POI layer (default 'Points of interest').

Storing points of interest on a wiki page

Instead of uploading a file you can add the points of interest to a wiki page and link to the raw page text, for example:

{{#widget:OpenStreetMap|...|poifile={{fullurl:Wiki page title|action=raw&templates=expand&ctype=text/plain}} }}

Note: If you change the contents of that wiki page you must purge the page cache (for each page that uses it in a map) before you can see the change.

Overlay a path

You can draw paths using connected line segments. This is useful for showing routes. Each path should have a unique name. For the parameters described below the placeholder '<id>' should be replaced with the name of the path.

path.<id>.title: Gives a title to the overlay (default "Route")
path.<id>.point.lat: Adds the latitude of a point to the path. You can specify this parameter many times to add all of the points to the path.
path.<id>.point.lon: Adds the longitude of a point to the path. You must specify this parameter the same number of times as the 'lat' parameter.
path.<id>.colour: Sets the colour to draw the path (default "#0033cc")
path.<id>.opacity: Sets the path opacity, in the range [0-1] (default 1)
path.<id>.width: Sets the line width (default 4)

Javascript alternatives

These alternatives can be used to cater for browsers that do not support javascript.

alt_image: The url of an image to represent the map.
alt_text: A description of the alt_image.

Example

@@ Line 61: / Line 61: @@
 [[Category:Help]]
-</noinclude><includeonly><!--{counter name="openStreetMapDivID" assign="openStreetMapDivID"}--><div id="openStreetMap<!--{$openStreetMapDivID|escape:'html'}-->" style="width:<!--{$width|escape:'html'|default:'400px'}-->; height:<!--{$height|escape:'html'|default:'400px'}-->;"></div><!--{if $openStreetMapDivID == 1}--><script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script><!--{/if}--><script type="text/javascript">
+</noinclude><includeonly><!--{counter name="openStreetMapDivID" assign="openStreetMapDivID"}--><div id="openStreetMap<!--{$openStreetMapDivID|escape:'html'}-->" style="width:<!--{$width|escape:'html'|default:'400px'}-->; height:<!--{$height|escape:'html'|default:'400px'}-->;"></div><p style="margin-top:0;font-size:x-small;">&copy; <a href="http://www.openstreetmap.org/">OpenStreetMap</a></p><!--{if $openStreetMapDivID == 1}--><script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script><style>
+   div.olControlMousePosition {
+     bottom: 0px;
+     right: 0px;
+     position: absolute;
+     color: #000;
+     background: #fff;
+     font-family: sans-serif;
+     font-size: small;
+     font-weight: bold;
+   }
+</style><!--{/if}--><script type="text/javascript">
 (function (){
     var lon = <!--{$lon|validate:float}-->;
@@ Line 68: / Line 79: @@
     var divID = 'openStreetMap<!--{$openStreetMapDivID|escape:'quotes'}-->';
     var mapUnits = '<!--{$units|escape:'quotes'|default:'degrees'}-->';
+   var epsg4326 = new OpenLayers.Projection('EPSG:4326');
-    map = new OpenLayers.Map(divID, {units:mapUnits});
+   // add the openstreetmap layer
-   //map.addControl(new OpenLayers.Control.PanZoomBar());
+    map = new OpenLayers.Map(divID, {
-   //map.addControl(new OpenLayers.Control.MouseToolbar());
+      units: mapUnits,
-   map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
+      controls: [
-   //map.addControl(new OpenLayers.Control.Permalink());
+         new OpenLayers.Control.Navigation(),
-   //map.addControl(new OpenLayers.Control.Permalink('permalink'));
+         new OpenLayers.Control.ArgParser(),
-   //map.addControl(new OpenLayers.Control.MousePosition());
+         new OpenLayers.Control.PanZoomBar(),
-   //map.addControl(new OpenLayers.Control.OverviewMap());
+         // display layers in reverse order so that base layers appear at the bottom
-    //map.addControl(new OpenLayers.Control.KeyboardDefaults());
+         new OpenLayers.Control.LayerSwitcher({'ascending':false}),
+         new OpenLayers.Control.MousePosition(),
+      ],
+      displayProjection: epsg4326
+    });
     var mapnik = new OpenLayers.Layer.OSM();
     map.addLayer(mapnik);
     // transform from WGS 1984 to Spherical Mercator projection
-   var epsg4326 = new OpenLayers.Projection('EPSG:4326');
     var mpo = map.getProjectionObject();
     var centerPt = new OpenLayers.LonLat(lon, lat).transform(epsg4326, mpo);
     map.setCenter(centerPt, zoom);