From 2c79c74376d3d6b9cc6656df73e167d58a2f8cad Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Fri, 25 Nov 2022 22:12:44 +0100
Subject: [PATCH] Showing the current location.

---
 src/components/get-location/GetLocation.tsx   | 12 +++-
 .../get-location/ShowLocationIcon.svg         | 12 ++++
 src/components/get-location/index.ts          |  2 +-
 src/components/map/Map.tsx                    | 56 ++++++++++++++++---
 4 files changed, 70 insertions(+), 12 deletions(-)
 create mode 100644 src/components/get-location/ShowLocationIcon.svg

diff --git a/src/components/get-location/GetLocation.tsx b/src/components/get-location/GetLocation.tsx
index 3b151ac..5fcc2ea 100644
--- a/src/components/get-location/GetLocation.tsx
+++ b/src/components/get-location/GetLocation.tsx
@@ -1,5 +1,4 @@
-//import React from 'react';
-import { Component } from 'solid-js';
+import { Component, createEffect, createSignal } from 'solid-js';
 import { useNavigate } from '@solidjs/router';
 import { Geolocation } from '@awesome-cordova-plugins/geolocation';
 
@@ -8,6 +7,11 @@ import LocationSearchingIcon from '@suid/icons-material/LocationSearching';
 import { IconButton } from '@suid/material';
 import { getState } from '../map';
 
+export const [getCurrentLocation, setCurrentLocation] = createSignal<{
+  lon: number;
+  lat: number;
+} | null>(null);
+
 const GetLocation: Component = () => {
   const navigate = useNavigate();
 
@@ -19,6 +23,10 @@ const GetLocation: Component = () => {
       navigate(
         `/map/${position.coords.longitude}/${position.coords.latitude}/${state.zoom}/${state.rotation}`
       );
+      setCurrentLocation({
+        lon: position.coords.longitude,
+        lat: position.coords.latitude,
+      });
     });
   };
 
diff --git a/src/components/get-location/ShowLocationIcon.svg b/src/components/get-location/ShowLocationIcon.svg
new file mode 100644
index 0000000..bb678ac
--- /dev/null
+++ b/src/components/get-location/ShowLocationIcon.svg
@@ -0,0 +1,12 @@
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" version="1.1">
+      <circle
+    cx="12"
+    cy="12"
+    r="6"
+    fill='blue'
+    opacity='90%'
+    stroke='white'
+    stroke-width="4"
+    stroke-opacity='100%'
+  />
+  </svg>
diff --git a/src/components/get-location/index.ts b/src/components/get-location/index.ts
index 4a0e844..e83788f 100644
--- a/src/components/get-location/index.ts
+++ b/src/components/get-location/index.ts
@@ -1 +1 @@
-export { default } from './GetLocation';
+export { default, getCurrentLocation, setCurrentLocation } from './GetLocation';
diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx
index 5c0d877..39be826 100644
--- a/src/components/map/Map.tsx
+++ b/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>([