The local art gallery was searching for a method to present open-air-art on a website. A word and a blow… Using OpenStreetMap it’s possible and beautiful!

Here is an example of the logo of CODE AHOI projected into Rostock’s city harbour:

#### This is a Placeholder

To display the map you need to download tiles from OpenStreetMap. Their privacy policy is available here: wiki.osmfoundation.org/wiki/Privacy_Policy

That’s cool, isn’t it? :)

## Do it Yourself!

Using the OpenLayers project it is comparatively easy. First we need some HTML skeleton:

• we need to include OpenLayers as a dependency,
• we need an HTML container to display the map,
• we need a bit extra HTML to realise a pop-up.

Here is an example template:

#### One Icon-Feature per Icon

Now the magic begins. For every icon, that we want to display in our embedded map, we need to create an Icon Feature. For the CODE AHOI map above it looks like the following:

The first block sets some properties for the icon: Where should it be located on the map? Which headline and what content should be displayed in the pop-up? The second block defines what the icon should look like. Here we load an image from CODE AHOI’s webserver, which will then be shown on the map.. The third block creates a new vector layer, which will be shown on top of the map tiles – that’s the actual speciality of OpenLayers :-)
In this case it may seem very difficult for a single icon, but for many icons it can easily be automatised.

#### Load the Map

Now we can load the map. The bottom layer should contain the tiles of OpenStreetMap. On top we want to draw our icon. We want to zoom to level 15 and centre the map in Rostock’s city harbour. Coordinates and zoom level can be obtained from openstreetmap.org. If you choose the same coordinates for the icon and the map, the icon will be centred in the map ;-)

Now the map get properly loaded and the icon is displayed at the correct location.

#### Implement a Pop-Up

Almost done, but we want to display a pop-up if the user clicks the CODE AHOI icon. That requires a bit more code:

We can realise the pop-up as an extra layer (see second code block) in the map – this way the pop-up is less intrusive and comes with better look and feel. The necessary information for the pop-up are already stored along the icon feature. Here we can read and use the properties, if the user clicks the icon (see last code block).

#### Styling

The logic is done. However, for the make-up we need some proper finishing ;-)
The style depends a lot on the layout of the whole page and some subjective criteria, but in general you would need to add a closing-symbol to the popup-closer container and style the pop-up-bubble a bit. Here is an example:

## Full Solution

My code for the example above is un-obfuscated available for download

The HTML skeleton of the whole article is of course a bit more complex, but that you can find out on your own!