# Add Icons to embedded OpenStreetMaps

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

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.

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

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

# Let's Go!

Lights off & spot on: CODE AHOI goes live! After some preparations I set sail and give it a try :)

I have been learning and working for years at universities. The urge to advance increased, but I am not sure where to go…
I am professionally trained, I love working interdisciplinary, and I quickly become acquainted with new domains. Furthermore, I am an expert in gathering and integrating data from heterogeneous sources, exploring complex materials to find patterns, and communicating results. I would like to apply earned skills and help organisations and the local economy.
Thus, CODE AHOI is my freelancing-attempt to obtain broad experience in many domains, to eventually learn where to continue my journey.

A first walking advertisement is this website. I decided for a static page with Jekyll: the web server does nothing but serving pre-compiled pages. Such a website is much more performant and eco-friendly, it typically tracks less personal information, and, as no scripts are executed, it can be considered much more secure. In addition, my whole infrastructure is powered by green energy!

The initial setup of such a site may be a bit more complicated, but with a little technical sense you can even make it multilingual (note the flag top right)! :)

I also decided against any kind of tracking: read or skip and click whatever you want — I do not care. If you want my attention just leave a message through the contact form at the bottom of that page.

I am highly motivated and very excited!