open map

marks location to open layer map

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.9.0/ol-debug.js"></script>
<div id="map" style="width:100%;height:400px"></div>
<div id="zoom"></div>

CSS

#zoom {
}
.mapDivs {
    border:1px solid black;
    width:50px;
    height:30px;
    opacity:.8;
    left:1em;
    bottom:1em;
    position:absolute;
    font-size:.6rem;
    background-color:yellow;
    
}
.mapMarker {
    width:10px;
    height:10px;
    border-radius:100%;
    position:absolute;
    cursor:pointer
}
.blue {
    background-color:blue
}
.red {
    background-color:red
}
.green {
    background-color:green
}
}

JavaScript

var view = new ol.View({
        center: ol.proj.fromLonLat([78, 21])
    });

var parentZoom = null;

view.on('change:resolution', function() {
    var zoom = view.getZoom();
    if (parentZoom !== null) {
        $('#zoom').text([
            'Parent zoom:',
            parentZoom,
            ', Current zoom:',
            zoom
        ].join(' '));
    }
    var width = 50 + (zoom * 10);
    var height = 30 + (zoom * 10);
    $('.mapDivs').width(width + 'px').height(height + 'px');
    parentZoom = zoom;
}, this);

view.setZoom(2);

var map = new ol.Map({
    target: 'map',
    view: view,
    layers: [
    new ol.layer.Tile({
        source: new ol.source.MapQuest({
            layer: 'osm'
        })
    })]
});

//array to hold data for lat long values of points

var locDetails = [{
    city: "Pune",
    long: 73.8567,
    lat: 18.5203,
    value: 2022222222.5,
    color: "red",
},
{   city: "Mumbai",
    long: 72.8258,
    lat: 18.9750,
    value: 102.5,
    color: "green",
},                
    {
    city: "Melbourne",
    long: 145,
    lat: -38,
    value: '<div>ddddd</div>'',
    color: "blue"
}

];

//loop locations array to mark pointers

for (var i = 0, l = locDetails.length; i < l; i++) {
    var longV = locDetails[i].long;
    var latV = locDetails[i].lat;
    var value = locDetails[i].value;
    var cityName = locDetails[i].city;
    var divLoc = ol.proj.transform(
    [longV, latV], 'EPSG:4326', 'EPSG:3857');
    var colV = locDetails[i]["color"];


  /*  map.addOverlay(new ol.Overlay({
        position: divLoc,
        element: $("<div/>").addClass("mapDivs").attr("id", "dv" + cityName).html(cityName + " - " +value) 
    }));
*/
    map.addOverlay(new ol.Overlay({
        position: divLoc,
        element: $("<div/>").attr("id", "pt_" + cityName).attr("box", "#dv" + cityName).addClass(colV + " mapMarker").on("mousedown", function (e) {
            console.log("clicked maker");
            //  var box = $("#" + e.
           ...