I have some markers in position with OpenLayers 3, and now I am trying to get the Popover onto them.

The problem is that when zooming in/out, Popovers don't remain with the marker. I want to make it such that when I am zooming in/out the Popover remains with the marker.

To get coordinates I am using a click function and I fetch the pixel coordinates on the click.

  private markerBubble(ev:any){
   var _this=this;
    const marker_bubble: HTMLElement = document.createElement("div");
    marker_bubble.setAttribute("class", "marker-bubble");
    marker_bubble.innerHTML = "Test1 123";
    var pixel = _this.map.getEventPixel(ev.originalEvent);

        top: pixel[1] - UtilityConst.ENTITY_MOVEMENT_CONST.PlayControl_TOP_DELTA,
        left: pixel[0] + UtilityConst.ENTITY_MOVEMENT_CONST.PlayControl_LEFT_DELTA,
        position: "absolute",


Here is the click function I am using:

 private handleClickOnMap(ev: any) {
    var _this=this;
    if (this.canSelectMarkers()) {
        const evt: MouseEvent = ev.originalEvent;
        // process only if markers found on click
        const features = this.getFeatureListByEvent(ev); // GIS specific event object needs to be passed here
         this.checkAndExpandOverlappedMarkers(features, ev);
        if (features.length > 0) {
                //popup to be placed.

                var pixel = _this.map.getEventPixel(ev.originalEvent);

  • i faced the same problem , did you find solution to this? – Tabou drart Mar 26 at 19:20

Your Answer

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

Browse other questions tagged or ask your own question.