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 @@
+
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([