Showing the current location.

src/components/map/Map.tsx

@@ -1,10 +1,5 @@
 import { Component, createEffect, createSignal, onMount } from 'solid-js';
-import {
-  useParams,
-  useNavigate,
-  useRouteData,
-  useBeforeLeave,
-} from '@solidjs/router';
+import { useParams, useNavigate } from '@solidjs/router';
 import OlMap from 'ol/Map';
 import View from 'ol/View';
 import TileLayer from 'ol/layer/Tile';
@@ -21,7 +16,10 @@ import { useGeographic as olUseGeographic } from 'ol/proj';
 import 'ol/ol.css';
 import './Map.css';
 import { Collection } from 'ol';
-import GetLocation from '../get-location';
+import { Point } from 'ol/geom';
+import { Circle, Fill, Stroke, Style, Icon } from 'ol/style';
+import GetLocation, { getCurrentLocation } from '../get-location';
+import ShowLocationIcon from '../get-location/ShowLocationIcon.svg';
 
 const [getState, setState] = createSignal({
   lon: 0,
@@ -40,7 +38,6 @@ const Map: Component = () => {
   let target: HTMLDivElement;
   console.log({ caller: 'Map', center: params.center });
 
-
   createEffect(() => {
     setState({
       lon: +params.lon,
@@ -58,6 +55,47 @@ const Map: Component = () => {
     });
   });
 
+  createEffect(() => {
+    const location = getCurrentLocation();
+    if (location) {
+      console.log({
+        caller: 'Map / updateLocation',
+        location,
+      });
+      const source = getMap()
+        ?.getAllLayers()
+        .at(1)
+        ?.getSource() as VectorSource;
+      source!.clear(true);
+      const point = new Point([location.lon, location.lat]);
+      const style = new Style({
+        image: new Icon({
+          //      size: [20, 20],
+          imgSize: [24, 24],
+          declutterMode: 'declutter',
+          // @ts-ignore
+          src: ShowLocationIcon,
+        }),
+      });
+      const feature = new Feature({
+        geometry: point,
+        //      labelPoint: point,
+        //      name: 'current location',
+        style: style,
+      });
+      feature.setStyle(style);
+      source.addFeature(feature);
+      //    source.changed();
+      console.log({
+        caller: 'Map / updateLocation',
+        location,
+        source,
+        style,
+        feature,
+      });
+    }
+  });
+
   onMount(() => {
     olUseGeographic();
 
@@ -90,7 +128,7 @@ const Map: Component = () => {
         new TileLayer({
           source: new OSM(),
         }),
-        //new VectorLayer({ source: newSource }),
+        new VectorLayer({ source: new VectorSource() }),
       ],
       target: target,
       controls: new Collection<Control>([