I have years to play with Openlayers and I am new to Openlayers 3.

I have the following code

<div id="overlay" style="background-color: white; border-radius:10px; border: 1px solid black; padding: 5px 10px;"> 
<div id="overlay2" style="background-color: yellow; width: 20px; height: 20px; border-radius: 10px;">

var layer = new ol.layer.Tile({
        source: new ol.source.OSM()

var center = ol.proj.transform([-1.812, 52.443], 'EPSG:4326', 'EPSG:3857');

var overlay = new ol.Overlay({
    element: document.getElementById('overlay'),
    positioning: 'bottom-center'

var overlay2 = new ol.Overlay({
    position: center,
    element: document.getElementById('overlay2')

var view = new ol.View({
    center: center,
    zoom: 6

var map = new ol.Map({
    target: 'map',
    layers: [layer],
    overlays: [overlay2],
    view: view

map.on('click', function(event) {
    var coord = event.coordinate;
    var degrees = ol.proj.transform(coord, 'EPSG:3857', 'EPSG:4326')
    var hdms = ol.coordinate.toStringHDMS(degrees);
    var element = overlay.getElement();
    element.innerHTML = hdms;

overlay2 should just stay on the top of the map and do nothing.

overlay creates an info box over the map, where you clicked, showing info about degrees etc.

overlay works, but I cannot see overlay2 and I cannot understand why. Console gives no errors and when I hit ol.Overlay.length , says 1.

Does it get overridden?

And why?


You didn't close your div tags

see jsfiddle

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.