raucao/r2b22-map
raucao/r2b22-map
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Popups

Browse Source
This commit is contained in:
Râu Cao 2022-09-02 16:21:13 +02:00
parent 0e9aa5a27f
commit 0631c710d2
Signed by: raucao
GPG Key ID: 15E65F399D084BA9
3 changed files with 67 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
geo/poi.json
View File

@ -186,7 +186,7 @@
{
"type": "Feature",
"properties": {
"name": "Start/Finish in Straßbourg"
"name": "Finish in Straßbourg"
},
"geometry": {
"type": "Point",

4
index.html
View File

@ -5,9 +5,11 @@
<!-- <link rel="icon" type="image/x&#45;icon" href="https://openlayers.org/favicon.ico" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Road2Bitcoin Live Map</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
</head>
<body>
<div id="map"></div>
<div id="map"><div id="popup"></div></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<script type="module" src="./main.js"></script>
</body>
</html>

67
main.js
View File

@ -1,9 +1,10 @@
import './style.css';
import Feature from 'ol/Feature';
import GeoJSON from 'ol/format/GeoJSON';
import {Map, View} from 'ol';
// import Feature from 'ol/Feature';
import GeoJSON from 'ol/format/GeoJSON';
import Overlay from 'ol/Overlay';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {Icon, Stroke, Style} from 'ol/style';
import {Circle as CircleStyle, Fill, Icon, Stroke, Style} from 'ol/style';
import {OSM, Vector as VectorSource} from 'ol/source';
import {useGeographic} from 'ol/proj';
import geojsonRoute from './geo/route.json'
@ -33,6 +34,16 @@ const styles = {
anchorYUnits: 'pixels',
src: 'data/icon.png',
}),
}),
circleBlack: new Style({
image: new CircleStyle({
radius: 7,
fill: new Fill({color: '#FF9900'}),
stroke: new Stroke({
color: 'white',
width: 2,
}),
})
})
}
@ -65,7 +76,7 @@ const vectorSourcePOI = new VectorSource({
const poiLayer = new VectorLayer({
source: vectorSourcePOI,
style: styles.iconStop,
style: styles.circleBlack,
});
const view = new View({
@ -85,3 +96,51 @@ const map = new Map({
],
view: view
});
//
// Popups
//
const popupEl = document.getElementById('popup');
const popup = new Overlay({
element: popupEl,
positioning: 'bottom-center',
stopEvent: false,
});
map.addOverlay(popup);
let popover;
function disposePopover() {
if (popover) {
popover.dispose();
popover = undefined;
}
}
// display popup on click
map.on('click', function (evt) {
const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
return feature;
});
disposePopover();
if (!feature) {
return;
}
popup.setPosition(evt.coordinate);
popover = new bootstrap.Popover(popupEl, {
placement: 'top',
html: true,
content: feature.get('name'),
});
popover.show();
});
// change mouse cursor when over marker
map.on('pointermove', function (evt) {
map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel)
? 'pointer'
: '';
});
// Close the popup when the map is moved
map.on('movestart', disposePopover);