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", "type": "Feature",
"properties": { "properties": {
"name": "Start/Finish in Straßbourg" "name": "Finish in Straßbourg"
}, },
"geometry": { "geometry": {
"type": "Point", "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" /> --> <!-- <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Road2Bitcoin Live Map</title> <title>Road2Bitcoin Live Map</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
</head> </head>
<body> <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> <script type="module" src="./main.js"></script>
</body> </body>
</html> </html>

67
main.js
View File

@ -1,9 +1,10 @@
import './style.css'; import './style.css';
import Feature from 'ol/Feature';
import GeoJSON from 'ol/format/GeoJSON';
import {Map, View} from 'ol'; 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 {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 {OSM, Vector as VectorSource} from 'ol/source';
import {useGeographic} from 'ol/proj'; import {useGeographic} from 'ol/proj';
import geojsonRoute from './geo/route.json' import geojsonRoute from './geo/route.json'
@ -33,6 +34,16 @@ const styles = {
anchorYUnits: 'pixels', anchorYUnits: 'pixels',
src: 'data/icon.png', 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({ const poiLayer = new VectorLayer({
source: vectorSourcePOI, source: vectorSourcePOI,
style: styles.iconStop, style: styles.circleBlack,
}); });
const view = new View({ const view = new View({
@ -85,3 +96,51 @@ const map = new Map({
], ],
view: view 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);