Using geographic coordinates for the map view.
Calling the useGeographic
function in the 'ol/proj'
module makes it so the map view uses geographic coordinates (even if the view projection is not geographic).
import Feature from 'ol/Feature.js';
import Map from 'ol/Map.js';
import Overlay from 'ol/Overlay.js';
import View from 'ol/View.js';
import Point from 'ol/geom/Point.js';
import TileLayer from 'ol/layer/Tile.js';
import VectorLayer from 'ol/layer/Vector.js';
import {useGeographic} from 'ol/proj.js';
import OSM from 'ol/source/OSM.js';
import VectorSource from 'ol/source/Vector.js';
useGeographic();
const place = [-110, 45];
const point = new Point(place);
const map = new Map({
target: 'map',
view: new View({
center: place,
zoom: 8,
}),
layers: [
new TileLayer({
source: new OSM(),
}),
new VectorLayer({
source: new VectorSource({
features: [new Feature(point)],
}),
style: {
'circle-radius': 9,
'circle-fill-color': 'red',
},
}),
],
});
const element = document.getElementById('popup');
const popup = new Overlay({
element: element,
stopEvent: false,
});
map.addOverlay(popup);
function formatCoordinate(coordinate) {
return `
<table>
<tbody>
<tr><th>lon</th><td>${coordinate[0].toFixed(2)}</td></tr>
<tr><th>lat</th><td>${coordinate[1].toFixed(2)}</td></tr>
</tbody>
</table>`;
}
const info = document.getElementById('info');
map.on('moveend', function () {
const view = map.getView();
const center = view.getCenter();
info.innerHTML = formatCoordinate(center);
});
let popover;
map.on('click', function (event) {
if (popover) {
popover.dispose();
popover = undefined;
}
const feature = map.getFeaturesAtPixel(event.pixel)[0];
if (!feature) {
return;
}
const coordinate = feature.getGeometry().getCoordinates();
popup.setPosition([
coordinate[0] + Math.round(event.coordinate[0] / 360) * 360,
coordinate[1],
]);
popover = new bootstrap.Popover(element, {
container: element.parentElement,
content: formatCoordinate(coordinate),
html: true,
offset: [0, 20],
placement: 'top',
sanitize: false,
});
popover.show();
});
map.on('pointermove', function (event) {
const type = map.hasFeatureAtPixel(event.pixel) ? 'pointer' : 'inherit';
map.getViewport().style.cursor = type;
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Geographic Coordinates</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/ol/ol.css">
<style>
.map {
width: 100%;
height: 400px;
}
td {
padding: 0 0.5em;
text-align: right;
}
</style>
</head>
<body>
<div id="map" class="map">
<div id="popup"></div>
</div>
<div id="info"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script type="module" src="main.js"></script>
</body>
</html>
{
"name": "geographic",
"dependencies": {
"ol": "10.4.0"
},
"devDependencies": {
"vite": "^3.2.3"
},
"scripts": {
"start": "vite",
"build": "vite build"
}
}