Demonstrates overlays.
The popups are created using Popovers from Bootstrap.
import 'ol/ol.css';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import Overlay from 'ol/Overlay';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import {fromLonLat, toLonLat} from 'ol/proj';
import {toStringHDMS} from 'ol/coordinate';
const layer = new TileLayer({
source: new OSM(),
});
const map = new Map({
layers: [layer],
target: 'map',
view: new View({
center: [0, 0],
zoom: 2,
}),
});
const pos = fromLonLat([16.3725, 48.208889]);
// Popup showing the position the user clicked
const popup = new Overlay({
element: document.getElementById('popup'),
});
map.addOverlay(popup);
// Vienna marker
const marker = new Overlay({
position: pos,
positioning: 'center-center',
element: document.getElementById('marker'),
stopEvent: false,
});
map.addOverlay(marker);
// Vienna label
const vienna = new Overlay({
position: pos,
element: document.getElementById('vienna'),
});
map.addOverlay(vienna);
map.on('click', function (evt) {
const element = popup.getElement();
const coordinate = evt.coordinate;
const hdms = toStringHDMS(toLonLat(coordinate));
$(element).popover('dispose');
popup.setPosition(coordinate);
$(element).popover({
container: element,
placement: 'top',
animation: false,
html: true,
content: '<p>The location you clicked was:</p><code>' + hdms + '</code>',
});
$(element).popover('show');
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Overlay</title>
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
<script src="https://unpkg.com/[email protected]/dist/elm-pep.js"></script>
<!-- The lines below are only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,TextDecoder"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.18.3/minified.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<style>
.map {
width: 100%;
height:400px;
}
#marker {
width: 20px;
height: 20px;
border: 1px solid #088;
border-radius: 10px;
background-color: #0FF;
opacity: 0.5;
}
#vienna {
text-decoration: none;
color: white;
font-size: 11pt;
font-weight: bold;
text-shadow: black 0.1em 0.1em 0.2em;
}
.popover-body {
min-width: 276px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<div style="display: none;">
<!-- Clickable label for Vienna -->
<a class="overlay" id="vienna" target="_blank" href="https://en.wikipedia.org/wiki/Vienna">Vienna</a>
<div id="marker" title="Marker"></div>
<!-- Popup -->
<div id="popup" title="Welcome to OpenLayers"></div>
</div>
<script src="main.js"></script>
</body>
</html>
{
"name": "overlay",
"dependencies": {
"ol": "6.14.1"
},
"devDependencies": {
"parcel": "^2.0.0"
},
"scripts": {
"start": "parcel index.html",
"build": "parcel build --public-url . index.html"
}
}