|
|
| Line 1: |
Line 1: |
| <noinclude>This widget allows you to embed '''[http://openstreetmap.org OpenStreetMap]''' in a wiki page.
| |
|
| |
|
| == Using this widget ==
| |
| You can insert a map with the following wiki code:
| |
|
| |
| <nowiki>{{#widget:OpenStreetMap|lat=52.94762|lon=-1.1467897|zoom=16}}</nowiki>
| |
|
| |
| === 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 [http://dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.units map units] used for the coordinates (defaults to 'degrees').
| |
| ;zoom
| |
| : The [http://wiki.openstreetmap.org/wiki/Zoom_levels zoom level] (default 15).
| |
| ;showmarker
| |
| : Adds a visual marker to the center of the map (default false).
| |
| ;showmouseposition
| |
| ; Displays the position of the mouse cursor in map coordinates.
| |
|
| |
| ==== 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 [http://dev.openlayers.org/releases/OpenLayers-2.6/doc/apidocs/files/OpenLayers/Layer/Text-js.html]. 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:
| |
| : <code><nowiki>{{#widget:OpenStreetMap|...|poifile={{fullurl:Wiki page title|action=raw&templates=expand&ctype=text/plain}} }}</nowiki></code>
| |
| Note: If you change the contents of that wiki page you must [http://www.mediawiki.org/wiki/Manual:Purge 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 ==
| |
| {{#widget:OpenStreetMap|lat=52.94762|lon=-1.1467897|zoom=16}}
| |
|
| |
| [[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><p style="margin-top:0;font-size:x-small;">© <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}-->;
| |
| var lat = <!--{$lat|validate:float}-->;
| |
| var zoom = <!--{$zoom|validate:int|default:15}-->;
| |
| var divID = 'openStreetMap<!--{$openStreetMapDivID|escape:'quotes'}-->';
| |
| var mapUnits = '<!--{$units|escape:'quotes'|default:'degrees'}-->';
| |
| var epsg4326 = new OpenLayers.Projection('EPSG:4326');
| |
|
| |
| // add the openstreetmap layer
| |
| map = new OpenLayers.Map(divID, {
| |
| units: mapUnits,
| |
| controls: [
| |
| new OpenLayers.Control.Navigation(),
| |
| new OpenLayers.Control.ArgParser(),
| |
| new OpenLayers.Control.PanZoomBar(),
| |
| // display layers in reverse order so that base layers appear at the bottom
| |
| new OpenLayers.Control.LayerSwitcher({'ascending':false})
| |
| <!--{if $showmouseposition eq 'true'}-->
| |
| , new OpenLayers.Control.MousePosition()
| |
| <!--{/if}-->
| |
| ],
| |
| displayProjection: epsg4326
| |
| });
| |
| var mapnik = new OpenLayers.Layer.OSM();
| |
| map.addLayer(mapnik);
| |
|
| |
| // transform from WGS 1984 to Spherical Mercator projection
| |
| var mpo = map.getProjectionObject();
| |
| var centerPt = new OpenLayers.LonLat(lon, lat).transform(epsg4326, mpo);
| |
|
| |
| map.setCenter(centerPt, zoom);
| |
|
| |
| <!--{if $showmarker eq 'true'}-->
| |
| var markers = new OpenLayers.Layer.Markers("Markers");
| |
| map.addLayer(markers);
| |
| markers.addMarker(new OpenLayers.Marker(centerPt));
| |
| <!--{/if}-->
| |
|
| |
| <!--{if (isset($poifile))}-->
| |
| var pois = new OpenLayers.Layer.Text(
| |
| '<!--{$poititle|escape:'quotes'|default:'Points of interest'}-->',
| |
| {
| |
| location:'<!--{$poifile|escape:'quotes'}-->',
| |
| projection:map.displayProjection
| |
| });
| |
| map.addLayer(pois);
| |
| <!--{/if}-->
| |
|
| |
| // add the vector overlays
| |
| var vectorPath;
| |
| var points;
| |
| var geometry;
| |
| var feature;
| |
| <!--{foreach from=$path item=cur_path}-->
| |
| // construct the next path
| |
| vectorPath = new OpenLayers.Layer.Vector('<!--{$cur_path.title|default:'Route'|escape:quotes}-->');
| |
| points = [];
| |
| <!--{foreach from=$cur_path.lat item=lat name=pathpoint}-->
| |
| points.push(new OpenLayers.Geometry.Point(<!--{$cur_path.lon[$smarty.foreach.pathpoint.index]|validate:float|default:0.0}-->, <!--{$lat|validate:float}-->).transform(epsg4326, mpo));
| |
| <!--{/foreach}-->
| |
| geometry = new OpenLayers.Geometry.LineString(points);
| |
| feature = new OpenLayers.Feature.Vector(geometry, null, {
| |
| strokeColor: '<!--{$cur_path.colour|escape:'quotes'|default:'#0033cc'}-->',
| |
| strokeOpacity: <!--{$cur_path.opacity|validate:float|default:1.0}-->,
| |
| strokeWidth: <!--{$cur_path.width|validate:int|default:4}-->
| |
| });
| |
| map.addLayer(vectorPath);
| |
| vectorPath.addFeatures(feature);
| |
| <!--{/foreach}-->
| |
| })();
| |
| </script><noscript><!--{if (isset($alt_image))}--><img src="<!--{$alt_image|escape:url}-->" alt="<!--{$alt_text|escape:html}-->" /><!--{/if}--><p>Please enable JavaScript to view the <a href="http://www.openstreetmap.org/">OpenStreetMap</a>.</p></noscript></includeonly>
| |