I have a popup when click to layer on map and popup displayed at selected position. I want to show popup to left screen. How can I do that?

This is my example to show feature in popup

var container = document.getElementById('popup');
    var content = document.getElementById('info');
    var closer = document.getElementById('popup-closer');
    var popup = new ol.Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
            duration: 250
    closer.onclick = function(){
        return false;
    // get data
    map.on('click', function (evt) {
        content.innerHTML = '';
        var viewResolution = mapView.getResolution();
        var url = source.getFeatureInfoUrl(
            'INFO_FORMAT': 'application/json',
            'propertyName': 'soqd,doan,shthua,shbando,dientich' 
        if (url) {
            $.getJSON(url, function(data){
                var feature = data.features[0];
                var props = feature.properties;
                content.innerHTML = "<h2>Thông tin quy hoạch</h1><br>"
                                    + "<h3>Số thửa : </h3><p>" + props.shthua
                                    + "</p> <br> <h3>Số hiệu bản đồ : </h3><p>" + props.shbando
                                    + "</p> <br> <h3>Diện tích : </h3><p>"+ props.dientich + " m2"
                                    + "</p> <br> <h3>Đồ án : </h3><p>"+ props.doan 
                                    + "</p>" 
                // console.log(props);
    map.on('pointermove', function (evt) {
        if (evt.dragging) {
        var data = openGoVapLayer.getData(evt.pixel);
        var hit = data && data[3] > 0; // transparent pixels have zero for data[3]
        map.getTargetElement().style.cursor = hit ? 'pointer' : '';

And my popup show like this (Images are for illustrative purposes only), but a want to anchor popup to left of screen And popup show like this

I want to anchor popup like this but left side of the screen enter image description here

  • @TomazicM thanks for reminding, I have updated my question
    – Jayzz
    Jul 29, 2022 at 7:31
  • Please add also an image of how you would like popup to be placed. It also seems that arrow at the bottom of the popup would then have no sense, since it would point to the wrong location. And what should happen if user moves/panes the map up/down or left/right?
    – TomazicM
    Jul 29, 2022 at 8:32
  • @TomazicM Sorry for the delay, i have updated my question, hope to get your help. thanks you a lot
    – Jayzz
    Aug 2, 2022 at 2:40

1 Answer 1


You can use OpenLayers ol-ext plugin ol.control.Overlay to display popup on the left side of the screen.

Code to display such popup could look something like this:


.ol-overlay.menu {
  width: 30%;
  background: #fff;
  color: #333;
  box-shadow: 0px 0px 5px #000;
  padding: 0.5em;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;


var overlayControl = new ol.control.Overlay({
  className: "slide-left menu",
  hideOnClick: true

map.on('singleclick', function (evt) {
  const coordinate = evt.coordinate;
  const hdms = ol.coordinate.toStringHDMS(ol.proj.toLonLat(coordinate));  
  overlayControl.show('<p>You clicked this point:</p><code>' + hdms + '</code>');

And this is the result upon clicking on the map:

enter image description here

  • Hi, I'm so sorry, I have a lot problem for my webgis, I'm try your suggestion and I have new problem with ol.control.Overlay not a constructor. I'm newbie, sorry about that
    – Jayzz
    Aug 3, 2022 at 7:20
  • You have to include references to ol-ext plugin into your code: <link rel="stylesheet" href="https://cdn.rawgit.com/Viglino/ol-ext/master/dist/ol-ext.min.css" /> <script type="text/javascript" src="https://cdn.rawgit.com/Viglino/ol-ext/master/dist/ol-ext.min.js"></script>
    – TomazicM
    Aug 3, 2022 at 7:33
  • I sure i have include ol-ext plugin in my code with folder download from [openlayers.org/download/] with version v6.15.1-dist.zip. This is my code in html for include <link rel="stylesheet" href="libs/v6.14.1-dist/ol.css"> and <script src="libs/v6.14.1-dist/ol.js"></script> . Did i miss something? Thank you a lot for reply
    – Jayzz
    Aug 3, 2022 at 7:45
  • No, this is OpenLayers, I'm talking about OpenLayers ol-ext plugin, available at github.com/Viglino/ol-ext.
    – TomazicM
    Aug 3, 2022 at 8:06
  • I did as you instructed and the error is still showing like below, please help me
    – Jayzz
    Aug 3, 2022 at 8:14

Your Answer

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

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