I fetched longitude and latitude from DB and saved it in a 2D array. I pass the array to the JS file. I'm using JavaScript to loop the array and display the markers with their icons. Each marker has a popup window when the mouse cursor is on the icon. I have two different positions, so I should be able to display each marker at its position. Although in the popup window that appears when the mouse is over the icon the longitude and latitude that are being displayed for both markers are the same (just the second index of the array) and I am note sure if the markers are being displayed correctly.

/* open street map newest version */
var map = new ol.Map({
    target: 'map', // the div id
    layers: [
        new ol.layer.Tile({
        source: new ol.source.OSM()
    view: new ol.View({ 
        center: ol.proj.fromLonLat([4.35247, 52.520008]),
        zoom: 6,
        minZoom: 3

for(var i=0; i < arrayPos.length; i++) {
    var long = arrayPos[i][0];
    var lat = arrayPos[i][1];

    // add a marker to the map
    var layer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [
                new ol.Feature({
                    geometry: new ol.geom.Point(ol.proj.fromLonLat([long, lat]))
    layer.setStyle(new ol.style.Style({
        image: new ol.style.Icon({
        src: 'https://wiki.openstreetmap.org/w/images/0/0c/Hgv.png', //
        scale: 0.4 // set the size of the vehicle on the map
    //initialize the popup
    var container = document.getElementById('popup');
    var content = document.getElementById('popup-content');

    var overlay = new ol.Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
            duration: 250
    //display the pop with on mouse over event
    map.on('pointermove', function (event) {
        if (map.hasFeatureAtPixel(event.pixel) === true) {
            var coordinate = event.coordinate;
            //simple text written in the popup
            content.innerHTML = '<b>My latitude is: </b>'+lat+'<br><b>My Longitude is: </b>'+long;
        else {

/* Map popup */
.ol-popup {
    position: absolute;
    background-color: white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 280px;
.ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
.ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
.ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;

1 Answer 1


It is caused by closure

try this code in 'pointermove' event function

var coordinate = event.coordinate;
var latLng = ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326');
//simple text written in the popup
content.innerHTML = '<b>My latitude is: </b>' + latLng[1] + '<br><b>My Longitude is: </b>' + latLng[0];

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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