Add maps (OpenStreetMap, Google, Bing and your own data) to your wiki pages using the OpenLayers toolkit
Compatible with DokuWiki
Add maps (OpenStreetMap, Google, Bing and your own data) to your wiki pages using the OpenLayers toolkit
Similar to cnmap, googlemaps, googlemaps3, ol3, osm, simplemap
Needed for openlayersmapoverlays
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.
After upgrading the plugin and removing/uninstalling openlayersmapoverlays:
/export
part. eg https://geoservices2.wallonie.be/arcgis/rest/services/APP_KAYAK/KAYAK/MapServer/export
becomes https://geoservices2.wallonie.be/arcgis/rest/services/APP_KAYAK/KAYAK/MapServer
$
from the url. eg. https://tiles.openseamap.org/seemark/${z}/${x}/${y}.png
becomes https://tiles.openseamap.org/seemark/{z}/{x}/{y}.png
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() …
.
The complete changelog is available on GitHub
Currently the following options can/need to be configured (see conf/default.php):
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:
A small site with the plugin showing various samples is available on SourceForge
The plugin is used on the following pages/sites:
<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>
olmap
and must be unique on the page.400px
.300px
.12
. Valid values depend on the map and location and must be integer.on
and off
, default on
.-90.0
to 90.0
.-180.0
to 180.0
.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)If the values for latitude and longitude differ from the default values lat=“50.0” lon=“5.1” a Geotag is added to the metadata of the page. The page is therefore added to the spatial index (and the KML and GeoRSS sitemaps) then.
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)
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" baselayer="true"></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 and baselayer
can be set to true
to add the layer as a base map. You can find some providers at: Raster tile providers
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" baselayer="false"></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 and baselayer
can be set to true
to add the layer as a base map.
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" baselayer="false"></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 and baselayer
can be set to true
to add the layer as a base map.
To add a WTMS layer to a map use the following syntax:
<olmap_wmtslayer id="olmap" name="geolandbasemap" url="https://mapsneu.wien.gv.at/basemapneu/1.0.0/WMTSCapabilities.xml" attribution="basemap.at" visible="true" layer="geolandbasemap" matrixSet=google3857 baselayer="true"></olmap_wmtslayer>
Where id
is the id of the openlayersmap, name
is the name of this map layer, url
is the WMTS capabilities url, layer
is the layer 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 and baselayer
can be set to true
to add the layer as a base map.
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 - Josthis 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.this is unlikely to happen; see https://sourceforge.net/tracker/?func=detail&aid=2928736&group_id=239475&atid=1110189 why.
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 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 animg
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