diff --git a/data/van-100px.png b/data/van-100px.png new file mode 100644 index 0000000..0c3de5c Binary files /dev/null and b/data/van-100px.png differ diff --git a/main.js b/main.js index f787abd..6550e58 100644 --- a/main.js +++ b/main.js @@ -1,8 +1,9 @@ import './style.css'; import {Map, View} from 'ol'; -// import Feature from 'ol/Feature'; +import Feature from 'ol/Feature'; import GeoJSON from 'ol/format/GeoJSON'; import Overlay from 'ol/Overlay'; +import Point from 'ol/geom/Point'; import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'; import {Circle as CircleStyle, Fill, Icon, Stroke, Style} from 'ol/style'; import {OSM, Vector as VectorSource} from 'ol/source'; @@ -35,6 +36,14 @@ const styles = { src: 'data/icon.png', }), }), + iconVan: new Style({ + image: new Icon({ + anchor: [0.5, 16], + anchorXUnits: 'fraction', + anchorYUnits: 'pixels', + src: 'data/van-100px.png', + }), + }), circleBlack: new Style({ image: new CircleStyle({ radius: 7, @@ -47,6 +56,10 @@ const styles = { }) } +// +// Route +// + const lastStageFinished = 4; const stagesCompleted = geojsonRoute.features.slice(0, lastStageFinished); const stagesAhead = geojsonRoute.features.slice(lastStageFinished); @@ -70,6 +83,10 @@ const stagesAheadLayer = new VectorLayer({ style: styles.lineGrey }); +// +// Points of Interest +// + const vectorSourcePOI = new VectorSource({ features: new GeoJSON().readFeatures(geojsonPOI), }); @@ -79,6 +96,24 @@ const poiLayer = new VectorLayer({ style: styles.circleBlack, }); +const vectorSourceVan = new VectorSource(); + +const vanFeature= new Feature({ + geometry: new Point([ 12.498556, 45.780383 ]), + name: 'Support Van' +}); + +vectorSourceVan.addFeature(vanFeature); + +const vanLayer = new VectorLayer({ + source: vectorSourceVan, + style: styles.iconVan +}); + +// +// Map initialization +// + const view = new View({ center: [10.6, 46.9], zoom: 6.6 @@ -92,7 +127,8 @@ const map = new Map({ }), stagesCompletedLayer, stagesAheadLayer, - poiLayer + poiLayer, + vanLayer ], view: view });