Widget:Sandbox: Difference between revisions
Jump to navigation
Jump to search
m Testing |
m Testing |
||
Line 85: | Line 85: | ||
var mpo = map.getProjectionObject(); | var mpo = map.getProjectionObject(); | ||
var centerPt = new OpenLayers.LonLat(lon, lat).transform(epsg4326, mpo); | var centerPt = new OpenLayers.LonLat(lon, lat).transform(epsg4326, mpo); | ||
map.setCenter(centerPt, zoom); | |||
<!--{if $showmarker eq 'true'}--> | <!--{if $showmarker eq 'true'}--> | ||
Line 102: | Line 103: | ||
<!--{/if}--> | <!--{/if}--> | ||
<!--{foreach from=$path item=cur_path}--> | // add the vector overlays | ||
var vectorPath; | |||
var points; | |||
var geometry; | |||
var features; | |||
<!--{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.point item=cur_point}--><!--{* NOTE: $cur_point.lat and $cur_point.lon do not seem to work, so I have used $cur_point[0] and $cur_point[1] for now. *}--> | <!--{foreach from=$cur_path.point item=cur_point}--><!--{* NOTE: $cur_point.lat and $cur_point.lon do not seem to work, so I have used $cur_point[0] and $cur_point[1] for now. *}--> | ||
points.push(new OpenLayers.Geometry.Point(<!--{$cur_point[0]|validate:float}-->, <!--{$cur_point[1]|validate:float}-->).transform(epsg4326, mpo)); | points.push(new OpenLayers.Geometry.Point(<!--{$cur_point[0]|validate:float}-->, <!--{$cur_point[1]|validate:float}-->).transform(epsg4326, mpo)); | ||
<!--{/foreach}--> | <!--{/foreach}--> | ||
geometry = new OpenLayers.Geometry.LineString(points); | |||
feature = new OpenLayers.Feature.Vector(geometry, null, { | |||
strokeColor: '<!--{$cur_path.colour|escape:'quotes'|default:'#ffcc00'}-->', | |||
strokeOpacity: <!--{$cur_path.opacity|validate:float|default:1.0}-->, | strokeOpacity: <!--{$cur_path.opacity|validate:float|default:1.0}-->, | ||
strokeWidth: <!--{$cur_path.width|validate:int|default:5}--> | strokeWidth: <!--{$cur_path.width|validate:int|default:5}--> | ||
}); | }); | ||
map.addLayer(vectorPath); | |||
vectorPath.addFeature(feature); | vectorPath.addFeature(feature); | ||
<!--{/foreach}--> | <!--{/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> | </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> |
Revision as of 21:05, 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.