Add van

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
 });