Wordpress

Wordpress (wordpress.org) is a very popular blogging system and, more generally, a content management system powering a lot of websites. Wordpress users can integrate OpenStreetMap maps in several ways.

Static map images

A simple static image is not to be sniffed at. They load faster with no compatibility problems, and can easily be linked to a slippy map (e.g. to the openstreetmap.org front page) to let visitors zoom etc.

To embed an image, obviously you could simply screenshot a little map image, and then upload it and embed it via the normal wordpress image upload procedure. Alternatively you might use an img url to one of the Static map images services.

Using a plugin

There are many plugins available for wordpress which offer some OpenStreetMap related functions. See wordpress plugins with the 'openstreetmap' tag

• Leaflet-map [1] based on the so-named javascript framework
• Leaflet Maps Marker wordpress plugin (mapsmarker.com) allows you to pin, organize & show your favorite places through OpenStreetMap/WMTS, Google/KML, GeoJSON or Augmented-Reality browsers.
• WP OSM Plugin lets you include your OSM maps with GPX / KML tracks, POIs, markers and geotagged posts. It's based on (WP OpenLayers 6)

Manually embedding osm maps

If you have created your own special map either with help of some service such as the EasyMap SlippyMap Generator or by writing the javascript code on your own, you need to manually embed it in your wordpress posts or pages. There are two libraries with an API available: Leaflet and OpenLayers 4. The following sample shows an OpenLayers way ...

Assuming you want exactly one map e.g. for a directions / how to find us page, you will have at minimum

A web page or html snipplet that

1. references to javascript file(s), often to the external openlayers library

<script type="text/javascript" src="https://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>

2. contains javascript instructions that build the map (or a reference to a javascript file with that code)

<script type="text/javascript">
//<![CDATA[
.
.
.
//]]>
</script>

3. includes the map itself which is a div tag with id that must match the one used in the javascript code

<div id="map"></div>

Step 1

The references to the javascript files need to be placed in header template of your theme within the head section. You can edit this file under "Appearance" -> "Editor" by selecting "Header (header.php)" under "Templates" (almost all themes should have a header.php file).

Then, add the

<script type="text/javascript" src="..."></script>

lines above the line

<?php wp_head(); ?>

or, if this line should be missing, above

</head>

Step 2

As I personally prefer to have javascript code separated from html, in this instruction we will put the javascript instructions into a separate file. Just copy the javascript code represented by

.
.
.

in the above example into an empty text file. If you use own images you should check the links. Upload the javascript file to your wordpress installation (you may use the upload function in the media library). Don't forget to upload images if you use any, and keep in might that wordpress will store a duplicates instead of overwriting the old file when you upload newer versions, which means you need to delete the old one first.

At last, add another line

<script type="text/javascript" src="..."></script>

with the path to your javascript file below the one(s) added in step 1.

Step 3

In the page or post you want your map to be shown, switch to the html edit mode and insert a line with

<div id="map"><p>OSM map</p></div>

The text inside the div tag prevents wordpress from dropping empty div tags when switching edit modes again. However we would not really want this to show up, so we edit the css style sheet to hide it. Under "Appearance" -> "Editor" the main style sheet style.css is loaded by default, and a definition can be added

#map p {
	display: none;
}

Troubleshooting

You can report any problems you come across or clues you have gained on the discussion page.