Difference between revisions of "Widget:Sandbox"

From Nottinghack Wiki
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 vectorPath = new OpenLayers.Layer.Vector('<!--{$cur_path.title|default:'Route'|escape:quotes}-->');
+
  var points;
   map.addLayer(vectorPath);
+
  var geometry;
  var points = [];
+
  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}-->
   var geometry = new OpenLayers.Geometry.LineString(points);
+
   geometry = new OpenLayers.Geometry.LineString(points);
   var feature = new OpenLayers.Feature.Vector(geometry, null, {
+
   feature = new OpenLayers.Feature.Vector(geometry, null, {
       stokeColor: '<!--{$cur_path.colour|escape:'quotes'|default:'#ffcc00'}-->',
+
       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}-->
 
  map.setCenter(centerPt, zoom);
 
 
})();
 
})();
 
</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.

Example

© OpenStreetMap