In the previous post I created an interactive map for my website, now I want to add a marker, because a plain map with no info isn't very useful!

So let's say my customer wants to show the name and address of his restaurant; we're adding a point marker with a small window inside the map to show the informations.

The first step is adding the div, just after the map div, inside our html file:

<div id="popup">
    <div id="popup_tail"></div>
    <div id="popup_content"></div>
</div>

Inside the "popup" div there are other 2: "popup_tail" will show the small tail at the bottom, pointing at our marker, and the "popup_content" is the div where the info are actually shown.

Let's give them some style to be correctly displayed; inside the "style" tag we already created, we have to add the following lines:

#popup {
    background-color: #FFFFFF;
    border-radius: 5px;
    padding: 10px;
}

#popup_tail {
    width: 20px;
    height: 20px;
    background-color: #FFFFFF;
    position: absolute;
    left: 0;
    right: 0; 
    margin-left: auto;
    margin-right: auto;
    bottom: -10px;
    transform: rotate(45deg);
}

We're done with html and CSS, so we can save the home.html file and switch to map.js.

Here we need to create a style for our marker; it will be a yellow dot with a black border.

var markerStyle = new ol.style.Style({
    image : new ol.style.Circle({
        radius : 5,
        fill : new ol.style.Fill({
            color : 'rgb(242, 201, 17)',
       }),
       stroke : new ol.style.Stroke({
           color : [ 0, 0, 0 ],
           width : 1
       })
    })
});

As you can see, we are creating nested OpenLayers objects. The outer one is our style, which is made of a Circle object, that has a Fill and a Stroke attribute, each with a set of self-explanatory parameters.

Next, we need to create a new layer for our map, containing the marker only:

var markerLayer = new ol.layer.Vector({
    source : new ol.source.Vector({
        features : [ new ol.Feature({
            geometry : new ol.geom.Point([ -8230047.1831012275, 4954600.105644477 ])
        }) ]
    }),
    style: markerStyle
});

As the base layer that we created, this layer has a source object, but instead of calling an online map service like OpenStreetMap, this source is made of features. The features attribute accepts an array of features, so you could add as many markers as you like; in our case the array has only one element, with the coordinates of our customer's restaurant.

Now we can simply add the layer to the map:

olMap.addLayer(markerLayer);

Next, we want to add the information div, so let's reference the divs with 2 variables and fill the content with some HTML text:

var container = document.getElementById('popup');
var content = document.getElementById('popup_content');

content.innerHTML = '<b>My marker</b><br />E35th St., New York City'; 

Now we need to create an Overlay object. Overlay is an HTML element shown on the map and attached to a single location, just what we need!

var overlay = new ol.Overlay({
    element : container,
    positioning: 'bottom-center',
    offset: [0, -25],
});

The overlay will display our div ("container"), positioning its bottom/center at the location we'll later specify. I gave it a vertical offset of -25 pixels, so there's some room for the tail we created.

Now we only need to place it at the marker location, and add it to the map:

overlay.setPosition([ -8230047.1831012275, 4954600.105644477 ]);

olMap.addOverlay(overlay);

and this is the final result: