openlayers js popup

1import 'ol/ol.css';
2import Map from 'ol/Map';
3import Overlay from 'ol/Overlay';
4import TileLayer from 'ol/layer/Tile';
5import View from 'ol/View';
6import XYZ from 'ol/source/XYZ';
7import {toLonLat} from 'ol/proj';
8import {toStringHDMS} from 'ol/coordinate';
9
10/**
11 * Elements that make up the popup.
12 */
13var container = document.getElementById('popup');
14var content = document.getElementById('popup-content');
15var closer = document.getElementById('popup-closer');
16
17/**
18 * Create an overlay to anchor the popup to the map.
19 */
20var overlay = new Overlay({
21  element: container,
22  autoPan: true,
23  autoPanAnimation: {
24    duration: 250,
25  },
26});
27
28/**
29 * Add a click handler to hide the popup.
30 * @return {boolean} Don't follow the href.
31 */
32closer.onclick = function () {
33  overlay.setPosition(undefined);
34  closer.blur();
35  return false;
36};
37
38var key = 'Get your own API key at https://www.maptiler.com/cloud/';
39var attributions =
40  '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> ' +
41  '<a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>';
42
43/**
44 * Create the map.
45 */
46var map = new Map({
47  layers: [
48    new TileLayer({
49      source: new XYZ({
50        attributions: attributions,
51        url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key,
52        tileSize: 512,
53      }),
54    }) ],
55  overlays: [overlay],
56  target: 'map',
57  view: new View({
58    center: [0, 0],
59    zoom: 2,
60  }),
61});
62
63/**
64 * Add a click handler to the map to render the popup.
65 */
66map.on('singleclick', function (evt) {
67  var coordinate = evt.coordinate;
68  var hdms = toStringHDMS(toLonLat(coordinate));
69
70  content.innerHTML = '<p>You clicked here:</p><code>' + hdms + '</code>';
71  overlay.setPosition(coordinate);
72});
73