diff --git a/geo/poi.json b/geo/poi.json index 615c172..0c2f93e 100644 --- a/geo/poi.json +++ b/geo/poi.json @@ -186,7 +186,7 @@ { "type": "Feature", "properties": { - "name": "Start/Finish in Straßbourg" + "name": "Finish in Straßbourg" }, "geometry": { "type": "Point", diff --git a/index.html b/index.html index 9516897..60d01ad 100644 --- a/index.html +++ b/index.html @@ -5,9 +5,11 @@ Road2Bitcoin Live Map + -
+
+ diff --git a/main.js b/main.js index 9778186..f787abd 100644 --- a/main.js +++ b/main.js @@ -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);