Difference between revisions of "Widget:Sandbox"
Jump to navigation
Jump to search
m (Wiped) |
m (Added test widget for showing routes on a map) |
||
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). | ||
+ | |||
+ | ==== 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 "#ffcc00") | ||
+ | ;path.<id>.opacity | ||
+ | : Sets the path opacity, in the range [0-1] (default 1) | ||
+ | ;path.<id>.width | ||
+ | : Sets the line width (default 5) | ||
+ | |||
+ | ==== 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><!--{if $openStreetMapDivID == 1}--><script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script><!--{/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'}-->'; | ||
+ | |||
+ | map = new OpenLayers.Map(divID, {units:mapUnits}); | ||
+ | //map.addControl(new OpenLayers.Control.PanZoomBar()); | ||
+ | //map.addControl(new OpenLayers.Control.MouseToolbar()); | ||
+ | map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false})); | ||
+ | //map.addControl(new OpenLayers.Control.Permalink()); | ||
+ | //map.addControl(new OpenLayers.Control.Permalink('permalink')); | ||
+ | //map.addControl(new OpenLayers.Control.MousePosition()); | ||
+ | //map.addControl(new OpenLayers.Control.OverviewMap()); | ||
+ | //map.addControl(new OpenLayers.Control.KeyboardDefaults()); | ||
+ | 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); | ||
+ | |||
+ | <!--{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}--> | ||
+ | |||
+ | <!--{foreach $path as $cur_path}--> | ||
+ | { | ||
+ | var vectorPath = new OpenLayers.Layer.Vector('<!--{$cur_path.title|default:'Route'|escape:quotes}-->'); | ||
+ | var points = []; | ||
+ | <!--{foreach $cur_path.point as $cur_point}--> | ||
+ | points.push(new OpenLayers.Geometry.Point(<!--{$cur_point.lat|validate:float}-->, <!--{$cur_point.lon|validate:float}-->).transform(epsg4326, mpo)); | ||
+ | <!--{/foreach}--> | ||
+ | var geometry = new OpenLayers.Geometry.LineString(points); | ||
+ | var feature = new OpenLayers.Feature.Vector(geometry, null, { | ||
+ | stokeColor: '<!--{$cur_path.colour|escape:'quotes'|default:'#ffcc00'}-->', | ||
+ | strokeOpacity: <!--{$cur_path.opacity|validate:float|default:1.0}-->, | ||
+ | strokeWidth: <!--{$cur_path.width|validate:int|default:5}--> | ||
+ | }); | ||
+ | vectorPath.addFeature(feature); | ||
+ | map.addLayer(vectorPath); | ||
+ | } | ||
+ | <!--{/foreach}--> | ||
+ | |||
+ | map.setCenter(centerPt, zoom); | ||
+ | })(); | ||
+ | </script><noscript><!--{if (isset($alt_image))}--><a href=<!--{$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> |
Revision as of 12:31, 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 "#ffcc00")
- path.<id>.opacity
- Sets the path opacity, in the range [0-1] (default 1)
- path.<id>.width
- Sets the line width (default 5)
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.