Add a Popup

OpenLayers renders popups as ol.Overlay elements positioned at a coordinate. This example opens a popup at Paris and moves it wherever you click.

olms.apply('map', 'https://styles.maptoolkit.org/summer.json').then(function (map) {
  map.getView().setCenter(ol.proj.fromLonLat([2.3522, 48.8566]));
  map.getControls().forEach(function (c) { if (c instanceof ol.control.Attribution) map.removeControl(c); });
  map.getView().setZoom(13);
  const el = document.getElementById('popup');
  el.innerHTML = '<strong>Paris</strong>';
  const overlay = new ol.Overlay({ element: el, stopEvent: false });
  map.addOverlay(overlay);
  overlay.setPosition(ol.proj.fromLonLat([2.3522, 48.8566]));
  map.on('click', function (e) {
    const lonlat = ol.proj.toLonLat(e.coordinate);
    el.innerHTML = '<strong>' + lonlat[1].toFixed(4) + ', ' + lonlat[0].toFixed(4) + '</strong>';
    overlay.setPosition(e.coordinate);
  });
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/olms.js"></script>
  <style>
    html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
    #map { width: 100%; height: 100%; }
    .mtk-logo { position: absolute; left: 8px; bottom: 8px; z-index: 2; line-height: 0; }
    .mtk-logo img { height: 24px; display: block; }
    .mtk-attrib { position: absolute; right: 0; bottom: 0; z-index: 2; background: transparent; font: 11px/1.4 system-ui, sans-serif; padding: 2px 6px; text-shadow: 0 0 2px #fff, 0 0 2px #fff; }
    .mtk-attrib a { color: #1a73e8; text-decoration: none; }
    #popup { position:absolute; background:#fff; padding:6px 10px; border-radius:4px; box-shadow:0 1px 4px rgba(0,0,0,.3); font:13px system-ui,sans-serif; white-space:nowrap; transform:translate(-50%,-100%); margin-top:-10px; }
  </style>
</head>
<body>
  <div id="popup"></div>
  <div id="map"></div>
  <a class="mtk-logo" href="https://www.maptoolkit.com/" target="_blank" rel="noopener"><img src="./maptoolkit-logo.png" alt="Maptoolkit" /></a>
  <div class="mtk-attrib">&copy; <a href="https://www.maptoolkit.com/copyright/" target="_blank" rel="noopener">Maptoolkit</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OSM</a></div>
  <script>
olms.apply('map', 'https://styles.maptoolkit.org/summer.json').then(function (map) {
  map.getView().setCenter(ol.proj.fromLonLat([2.3522, 48.8566]));
  map.getControls().forEach(function (c) { if (c instanceof ol.control.Attribution) map.removeControl(c); });
  map.getView().setZoom(13);
  const el = document.getElementById('popup');
  el.innerHTML = '<strong>Paris</strong>';
  const overlay = new ol.Overlay({ element: el, stopEvent: false });
  map.addOverlay(overlay);
  overlay.setPosition(ol.proj.fromLonLat([2.3522, 48.8566]));
  map.on('click', function (e) {
    const lonlat = ol.proj.toLonLat(e.coordinate);
    el.innerHTML = '<strong>' + lonlat[1].toFixed(4) + ', ' + lonlat[0].toFixed(4) + '</strong>';
    overlay.setPosition(e.coordinate);
  });
});
  </script>
</body>
</html>

Add a Marker