Difference between revisions of "Widget:Sandbox"

From Nottinghack Wiki
Jump to navigation Jump to search
m (Fix markup)
m (Removed test width)
 
(16 intermediate revisions by the same user not shown)
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))}--><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>
 

Latest revision as of 22:08, 15 July 2011

Retrieved from "https://wiki.nottinghack.org.uk/index.php?title=Widget:Sandbox&oldid=1692"