OpenLayers 3 in WordPress OSM Plugin

Several days ago I read a tweet from  @NicolasMegow about the article How to write maps from list of places. With python he was generating KML files from an Excel file. He then used the WP OSM Plugin to display nuclear power plants in a map. Yesterday Boundless twittered about their article to OpenLayers 3 Beta 2 – it will bring OpenLayers to state of the art (“fast & mobile ready”).

There is a huge installed base of the WP OSM Plugin (currently more than 30.000 downloads on the official WP site) and most people do not know or care about technology in the background. Right now we are working on WP OSM Plugin V2.6, but as soon as OpenLayers 3.0 is released, there will be a WP OSM Plugin version 3.0 with this new technology. If all works fine, there will be no need for modifactions for plugin users, just make the update in the WP backend 🙂

But! This needs some testing and experiences. So the WP OSM Plugin version 2.6 will support already OpenLayers 3.0 for tests only and the following sample shows the visualization of an KML file with the OSM WordPress Plugin with OpenLayers 2.12 and OpenLayers 3.0.

Need your help! The WP OSM Plugin Version 2.6 will be released within February and I am looking for people making tests with their KML and GPX files and give feedback, to be prepared for OpenLayers 3.0 final (twitter wp_osm_plugin). Also let me know about experiences with mobile devices and “exotic” browsers.

Map in WordPress with OpenLayers 2

How to display KML files with WP OSM Plugin is well documented and used many times, the WP OSM shortcode for this sample looks like this and uses OpenLayers 2.0:

 [*osm_map lat="47.864" long="10.766" zoom="4" width="450" height="300" type="stamen_toner" control="mouseposition,scaleline" map_border="thin solid black" theme="dark" kml_file="../../../../wp-content/uploads/osm_map/osm_nuclear_01.kml"]

Klick on the icons to get power plant info:

Map in WordPress with OpenLayers 3

Not to influence the running blog a new shortcode (osm_ol3js) is implemented temporarily and the features were a little bit extented. Find the sample here:

[*osm_map_v3 map_center="47.864,10.766" zoom="4" width="450" height="300" file_list="../../../../wp-content/uploads/osm_map/osm_nuclear_01.kml" type="stamen_toner"]

Move over the icons to get power plant info under the map:





Posted in Allgemein

One comment on “OpenLayers 3 in WordPress OSM Plugin
  1. Adrien says:

    Thanks a lot for your work on the WP OSM plugin, it’s been very helpful!
    Looking at this page ( I was wondering about a little detail in the last map displayed : at the bottom right of the map, instead of the regular copyright text&links (with either google, openstreet map data, etc.), there’s a small clickable icon that display attributions. How exactly can I set this on my map (I didn’t see any option in the documentation about it)?
    Thanks, regards

Leave a Reply

Your email address will not be published. Required fields are marked *


By continuing to use the site, you agree to the use of cookies and load data from third parties. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.