Difference between revisions of "Widget:OpenStreetMap"

From Nottinghack Wiki
Jump to navigation Jump to search
 
(8 intermediate revisions by 2 users not shown)
Line 21: Line 21:
 
;showmarker
 
;showmarker
 
: Adds a visual marker to the center of the map (default false).
 
: 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
 
;poifile
−
: Specifies 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].  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:
+
: 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.
−
:  <code><nowiki>{{#widget:OpenStreetMap|...|poifile={{fullurl:Wiki page title|action=raw&templates=expand&ctype=text/plain}} }}</nowiki></code>
 
 
;poititle
 
;poititle
 
: The title of the POI layer (default 'Points of interest').
 
: 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 ==
 
== Example ==
 
{{#widget:OpenStreetMap|lat=52.94762|lon=-1.1467897|zoom=16}}
 
{{#widget:OpenStreetMap|lat=52.94762|lon=-1.1467897|zoom=16}}
  
−
</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">
+
[[Category:Help]]
 +
[[Category:Widget]]
 +
</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;">&copy; <a href="http://www.openstreetmap.org/">OpenStreetMap</a></p><!--{if $openStreetMapDivID == 1}--><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/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 (){
 
(function (){
 
   var lon = <!--{$lon|validate:float}-->;
 
   var lon = <!--{$lon|validate:float}-->;
Line 37: Line 82:
 
   var divID = 'openStreetMap<!--{$openStreetMapDivID|escape:'quotes'}-->';
 
   var divID = 'openStreetMap<!--{$openStreetMapDivID|escape:'quotes'}-->';
 
   var mapUnits = '<!--{$units|escape:'quotes'|default:'degrees'}-->';
 
   var mapUnits = '<!--{$units|escape:'quotes'|default:'degrees'}-->';
 +
  var epsg4326 = new OpenLayers.Projection('EPSG:4326');
  
−
   map = new OpenLayers.Map(divID, {units:mapUnits});
+
  // add the openstreetmap layer
−
   var mapnik = new OpenLayers.Layer.OSM();
+
   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(
 +
      "OpenStreetMap",
 +
      // Official OSM tileset as protocol-independent URLs
 +
      [
 +
        '//a.tile.openstreetmap.org/${z}/${x}/${y}.png',
 +
        '//b.tile.openstreetmap.org/${z}/${x}/${y}.png',
 +
        '//c.tile.openstreetmap.org/${z}/${x}/${y}.png'
 +
      ],
 +
      null
 +
  );
 
   map.addLayer(mapnik);
 
   map.addLayer(mapnik);
  
 
   // transform from WGS 1984 to Spherical Mercator projection
 
   // transform from WGS 1984 to Spherical Mercator projection
−
   var centerPt = new OpenLayers.LonLat(lon, lat).transform(
+
  var mpo = map.getProjectionObject();
−
      new OpenLayers.Projection('EPSG:4326'),
+
   var centerPt = new OpenLayers.LonLat(lon, lat).transform(epsg4326, mpo);
−
      map.getProjectionObject());
+
 
 +
  map.setCenter(centerPt, zoom);
  
 
   <!--{if $showmarker eq 'true'}-->
 
   <!--{if $showmarker eq 'true'}-->
Line 63: Line 133:
 
   <!--{/if}-->
 
   <!--{/if}-->
  
−
   map.setCenter(centerPt, zoom);
+
   // 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}-->
 +
 
 +
  // make sure mouse wheel zooming is disabled
 +
  var navcontrols = map.getControlsByClass('OpenLayers.Control.Navigation');
 +
  for(var i = 0; i < navcontrols.length; ++i)
 +
      navcontrols[i].disableZoomWheel();
 
})();
 
})();
−
</script><noscript>Please enable JavaScript to view the <a href="http://www.openstreetmap.org/">OpenStreetMap</a>.</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>

Latest revision as of 23:58, 5 April 2019

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).
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 [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 "#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

© OpenStreetMap

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