How to anchor position popup to left screen in openlayers 6

Question

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. Please help me, my english not good. Thanks

My popup show like this

Popup here

I want when click popup will show left screen, not center

Answer 1

If you want the popup on center left, you could do it like this:

<html>

<head>
  <meta charset="utf-8" />
  <style>
    .map {
      height: 100%;
      width: 100%;
    }

    html,
    body {
      height: 100%
    }
    
    .ol-popup {
        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;
        min-width: 280px;
      }
      
      .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;
      }
      
  </style>
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/css/ol.css"> 
</head>

<body>
  <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
  </div>
  <div id="map" class="map"></div>

  <script type="text/javascript">   
    const container = document.getElementById('popup');
    const content = document.getElementById('popup-content');
    
    document.addEventListener("DOMContentLoaded", function () {
        drawMap();
    });
    
    function drawMap() {
        const osmLayer = new ol.layer.Tile({
            source: new ol.source.OSM({
                attributions: '© OpenStreetMap',
            })
        });
          
        map = new ol.Map({
            target: 'map',
            layers: [
                osmLayer,
            ],
            view: new ol.View(),
        });
        
        const popup = new ol.Overlay({
          element: document.getElementById('popup'),
        });
        
        map.addOverlay(popup);
        
        map.getView().fit([0,0,0,0]);
        
        map.on('click', function (evt) {
          const element = popup.getElement();
          const popupMap = popup.getMap();
          
          const coordinate = evt.coordinate;
           
          const viewExtent = popupMap.getView().calculateExtent();
          const centerPoint = ol.extent.getCenter(viewExtent);
          content.innerHTML = '<p>You clicked here:</p><code>' + coordinate + '</code>';
          
          popup.setPosition( [viewExtent[0], centerPoint[1]] );
          
        });
    }
     
  </script>
</body>

</html>

Remove position absolute and determine the position: https://jsfiddle.net/ve5mn0by/5/

EDIT:

without Openlayers Overlay, just HTML:

map.on('click', function (evt) {
        
            const container = document.createElement('div');
            const content = document.createElement('div');
            
            container.style.width = '10rem';
            container.style.height = '100%'
            //container.style.backgroundColor = '#FF0000';
            container.style.position = 'absolute';
            container.style.display = 'flex';
            
            content.style.width = '100%';
            content.style.height = '10rem'
            content.style.backgroundColor = '#FFFF00';
            content.style.alignSelf = 'center';
            
            
            container.appendChild(content);
            document.body.appendChild(container);
          
        });

How to anchor position popup to left screen in openlayers 6

Question

1 answers

solution1
0 2022-07-30 07:48:07

How to anchor position popup to left screen in openlayers 6

Question

1 answers

solution1 0 2022-07-30 07:48:07

solution1
0 2022-07-30 07:48:07