DokuWiki

It's better when it's simple

User Tools

Site Tools


plugin:openlayersmap

OpenLayersMap Plugin

Compatible with DokuWiki

  • 2022-07-31 "Igor" yes
  • 2020-07-29 "Hogfather" yes
  • 2018-04-22 "Greebo" unknown
  • 2017-02-19 "Frusterick Manners" unknown

plugin Add maps (OpenStreetMap, Google, Bing and your own data) to your wiki pages using the OpenLayers toolkit

Last updated on
2022-08-31
Provides
Syntax, Action
Repository
Source
Conflicts with
openlayersmapoverlays
Requires
geophp

Description

A map rendering plugin that will put an OpenLayers based map on the wiki page. The component enables users to put GPS data (currently GeoJSON, GPX and KML format are supported) and other geographic services on the map in configurable layout and uses open source components and data (OSM). It can also be configured to use non-open data (eg. Bing) providers. The plugin dynamically loads the OpenLayers API on demand, depending on the API license keys that are entered in the configuration section various base map layers are available.

Upgrading to 2022-06-14 or later

After upgrading the plugin and removing/uninstalling openlayersmapoverlays:

Download and Installation

:!: Note: for old releases (2008-05-05, 2009-02-14, Lemming, Anteater, Rincewind) you need version 1.0

Search and install the plugin using the Extension Manager. Refer to Plugins on how to install plugins manually.

Alternate locations for the plugin and older version are available at: https://sourceforge.net/projects/dokuwikispatial/files/openlayersmap/

:!: When you choose to use the local background rendering engine (option optionStaticMapGenerator) this plugin needs the PHP GD extension. In some environments this is not installed by default, but it's the package php8-gd or alike. Check your phpinfo() before installing this plugin. If it's not installed you will run into a PHP Fatal error Call to undefined function imagecreatetruecolor() ….

Change Log

Configuration

Currently the following options can/need to be configured (see conf/default.php):

  • enableOSM Enable the use of OpenStreetMap base layers as basemap provider
  • enableMapQuest Enable the use of MapQuest Open as basemap provider (removed in current versions)
  • enableBing Enable the use of Bing as basemap provider
  • bingAPIKey Bing requires an API key, get yours at: https://www.bingmapsportal.com/application
  • tfAPIKey Thunderforest (cyclemap,transport, landscape and outdoors) requires an API key, get yours at: https://www.bingmapsportal.com/application
  • iconUrlOverload URL for map icons when using static maps on a non-public access host such as with DokuWiki on a Stick or DokuWikiStickNG
  • enableA11y Enable a11y/print output (static map, legend table). If you use maps with a lot of POI you will want to turn this off
  • optionStaticMapGenerator use the local a11y/print map renderer or remote services. Commercial/non-open providers always use their own, remote, service. NB 'local' requires internet access for you webserver.
  • autoZoomMap Enable auto zoom for the map, makes the map zoom to the extent of the POI and KML/GPX

Icons

If you want to add (or change) to the available icons for display on the map you can drop them into the directory “icons” in this plugin's directory. They should be about 16px in size. There is a contact sheet available after installing the plugin at <yourbaseurl>/lib/plugins/openlayersmap/icons/ 1) Nice icons are available from:

Demonstration

A small site with the plugin showing various samples is available on SourceForge

The plugin is used on the following pages/sites:

Syntax/ Usage

<olmap id="olMap" width="600px" height="400px" lat="52.0" lon="5.1" zoom="12" controls="1" baselyr="OpenStreetMap" gpxfile=":playground:hardlopen_gpx.gpx" geojsonfile=":playground:test.gsojson" kmlfile=":playground:mtb.kml" summary="This map shows a gpx trace, a kml trace and a dot">
52.1,5.1,60,.8,marker-green.png,Just a spot
</olmap>
  • id The identifier of the map (this needs to be a valid CSS/XHTML identifier as well as a valid JavaScript variable) eg. olmap.
  • width The width of the map, default is 400px.
  • height The height of the map, default is 300px.
  • zoom The zoom level, default value 12. Valid values depend on the map and location and must be integer.
  • controls Whether or not to show controls for zooming and panning on the map. Valid values are on and off, default on.
  • lat The latitude of map centre in decimal degrees (WGS84), negative values are south of the equator, valid values range from -90.0 to 90.0.
  • lon The longitude of map centre in decimal degrees (WGS84), negative values are west of Greenwich, valid values range from -180.0 to 180.0.
  • baselyr The basemap layer that is shown when the map opens. Valid values are: OSM, transport, landscape, outdoors, cycle map, toner, terrain, bing road, bing sat or bing hybrid. (note that for some of the non-open maps you need the API key/URL as well)
  • gpxfile any GPX file, use the media manager to retrieve the location
  • kmlfile any KML file, use the media manager to retrieve the location
  • geojsonfile any GeoJSON file, use the media manager to retrieve the location
  • summary A description of the map.

The Points of Interest are formatted:

lat, lon, rotation-angle, opacity, image, textforpopup

The map will zoom in to the extent of the POI which must be given in decimal degrees according to EPSG:4326 (most GPS use this). The text for the popup can be formatted using regular DokuWiki syntax and may contain links as well. (see discussion below or the sample website for more examples)

Overlays

XYZ (tiled)

To add a XYZ style (eg. OpenStreetMap tiling scheme) layer to a map use the following syntax:

<olmap_osmlayer id="olmap" name="piste" url="https://tiles.openpistemap.org/nocontours/{z}/{x}/{y}.png" visible="true" attribution="OpenPisteMap"></olmap_osmlayer>

Where id is the id of the openlayersmap, name is the name of this map layer, url is the XYZ layer url, visible defines whether the layer is visible when the layer is added to the map, attribution is displayed in the attribution area of the map frame.

WMS

To add a WMS layer to a map use the following syntax:

<olmap_wmslayer id="olmap" name="rain" url="http://openweathermap.org/t/tile.cgi?SERVICE=WMS" attribution="OpenWeatherMap" visible="true" layers="GLBETA_PR"></olmap_wmslayer>

Where id is the id of the openlayersmap, name is the name of this map layer, url is the WMS layer url, layers are the layers from the map service that you want displayed, visible defines whether the layer is visible when the layer is added to the map, attribution is displayed in the attribution area of the map frame.

ArcGIS REST

To add an ArcGIS REST image layer to a map use the following syntax:

<olmap_agslayer id="olmap" name="Paddle todat" url="https://geoservices2.wallonie.be/arcgis/rest/services/APP_KAYAK/KAYAK/MapServer" attribution="kayak.environnement.wallonie.be" visible="true" layers="show:0,1,2,3,4,7"></olmap_agslayer>

Where id is the id of the openlayersmap, name is the name of this map layer, url is the WMS layer url, layers are the layers from the map service that you want displayed, visible defines whether the layer is visible when the layer is added to the map, attribution is displayed in the attribution area of the map frame.

Discussion & FAQ

I'm trying to build a Wiki where addresses of venues, rehearsal studios, recording studios, supply stores etc. for musicians are collected and this plugin is perfect for that. Embedding OSM works beautifully, but with my newly generated google API key I see an error in the JavaScript Console saying that API versions up to 3.27 have been retired and the request should be sent to version 3.28 instead. I think the new version accepts an additional google security key along with the API key. Are you planning to adapt the openlayersmap extension to the new API?
Google maps will not be supported, due to licencing requirements
I'm trying to disable “autoZoomMap” option, but it seems do not work. How to use it? When I put some distant POIs, the map still zooms to include all of them. There is no difference if I use single POIs or kml/geoJSON file. I need to use one geoJSON file for all maps, but each single map should show only required part of area. Please help, how to fix it?
It is not possible to set an area of interest
Would it be possible to generate a map where the POI's are geotagged pages from a certain namespace in the wiki?
this will be available as part of spatialhelper which produces a KML file that can be loaded
Am I able to add my own map (image of a landscape.gif) show it on a page and point onto this image to insert a POI? Goal is to create a map like http://dynmap.ruslotro.com/.
no this is not possible
I can not force my users to figure out the lat/lon by hand so something like “set marker with point&click” is necessary.
Greetings - Jos
this may be possible in the future
I like the looks of this plugin. I am currently using google_maps and while it works fairly well, it is a bit lacking. With this plugin, can the dimensions of the locational marker pop-ups be fixed/changed? Is wiki text parsed within said pop-ups? I like to write short descriptions with each marker, so I need to format the text and text box to avoid stretching across the screen.
There are currently no specific provisions to parse wiki text or URLs (link tags works e.g.
[[http://test.com|test]]

you probably want to set poihoverstyle=“0”). see sample below, it does links, line breaks an formatting.

<olmap id="olmap" width="600px" height="400px" lat="50.0" lon="5.1" zoom="8" statusbar="1" toolbar="1" controls="1" poihoverstyle="0">
49.9780098,5.1839387,270,.7,marker-gold.png,Faux Mayaux; Maissin \\ ** Watch out crossing the street **
50.0117497,5.1287857,60,.8,marker-green.png,Pont de Barbouillons; Daverdisse \\ external link: [[http://test.com|test.com]] \\ internal link: [[::start]]
</olmap>


The size of the markers is fixed, so even if you use larger bitmaps they will be scaled down, this in part has to do with the hover area and is just how things work in OL.

Hi Mark, I like your plugin too, it's well written. I've left a request on your tracker, suggesting the possibility of pulling the coordinates from a database instead of hard-coding them on the page. If using the PEAR library like one of the MySQL plugins, it shouldn't be too complex ? This would make for a powerful way of displaying multiple real-time coordinates.

Hi to all!

I like this plugin very much, but there was one thing that was not perfect for my needs. The width of the map must be specified absolutely in pixel. The map is much too wide on my mobile phone. For that I stumbled through the code of the plugin (don't call me an expert :-)) and tried to find out what to do.

Here's my solution, which will work now for my desktop and my mobile phone. At first a sample of the “new” insert syntax.

<olmap id="olmap" width="auto" height="auto" lat="50.0" lon="5.1" zoom="8" statusbar="1" toolbar="1" controls="1" poihoverstyle="0">
49.9780098,5.1839387,270,.7,marker-gold.png,Faux Mayaux; Maissin \\ ** Watch out crossing the street **
50.0117497,5.1287857,60,.8,marker-green.png,Pont de Barbouillons; Daverdisse \\ external link: [[http://test.com|test.com]] \\ internal link: [[::start]]
</olmap>

The width will be calculated if auto is specified for it. And if auto is also specified for the height, then the height will be 2/3 of the width.

I've done my work only in the file script.js of the plugin. I've added the following function to the file (which I've found using Google).

Element.prototype.getElementWidth = function() {
   if (typeof this.clip !== "undefined") {
	  return this.clip.width;
   } else {
	  if (this.style.pixelWidth) {
		 return this.style.pixelWidth;
	  } else {
		 return this.offsetWidth;
	  }
   }
};

And then I've made the following extension to the method createMap. In the following sample there's some of the original code at the beginning and the end so you can find the position where to insert the new lines.

// find map element location
var cleartag = document.getElementById(mapOpts.id + '-clearer');
if (cleartag === null) {
	return;
}
 
// ====== START OF INSERTED CODE ======
 
// calculate dynamic width and height
var dynamicWidth = 0;
if (mapOpts.width == 'auto') {
	var contentWidth = 0;
	var asideWidth = 0;
	var elementContent = document.getElementById('dokuwiki__content');
	if (elementContent === null) {
	} else {
		contentWidth = elementContent.getElementWidth();
	}
	var elementAside = document.getElementById('dokuwiki__aside');
	if (elementAside === null) {
	} else {
		asideWidth = elementAside.getElementWidth();
	}
	if (contentWidth > asideWidth) {
		dynamicWidth = contentWidth - asideWidth - 60;
	} else {
		dynamicWidth = contentWidth - 20;
	}
	if (dynamicWidth > 0) {
		mapOpts.width = dynamicWidth + 'px';
	} else {
		mapOpts.width = '500px';
	}
}
if (mapOpts.height == 'auto') {
	if (dynamicWidth > 0) {
		var dynamicHeight = dynamicWidth * 0.66;
		mapOpts.height = dynamicHeight + 'px';
	} else {
		mapOpts.height = '500px';
	}
}
 
// ====== END OF INSERTED CODE ======
 
// create map element and add to document
var fragment = olCreateMaptag(mapOpts.id, mapOpts.width, mapOpts.height);
cleartag.parentNode.insertBefore(fragment, cleartag);

Well, as I've mentioned above: It works for me. The hardcoded values (60, 20) are not nice, really. And generally I do think that there could be a better solution. Maybe someone feels inspirated now to make it better (and to make me happy).

Werner

@Werner this patch will give you problem as the width is also used for the fallback image and 'auto' is not a valid value for the width attribute of an img element
I just installed this wonderful plugin to embed an OpenStreetMap to my website. However, I found that the map is placed on top of all the other elements of the page so that it covers the (fixed) header DIV when I scroll down. Any hint, what I can do to prevent that?
this issue is probably caused by your template; you may need to fix the template
How to find out why rendering of print map fails? Gd2 installed, using local renderer.
look at the logfile of your webserver, turn on debugging for the wiki and check that logfile, maybe turn on debug logging for php
I've found the font size to be a little too small on the maps, you can easily change this by editing the script.js file, and changing the pixel size in the
 var markers = new OpenLayers.Layer.Vector("POI", {
            styleMap : new OpenLayers.StyleMap({ 

section
and change

fontFamily : "monospace",
                    fontSize : "16px", 

to anything you like

plugin/openlayersmap.txt · Last modified: 2022-08-31 12:47 by mprins

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki