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).
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:
My code for the example above is un-obfuscated available for download