Showing the current location.

This commit is contained in:
Eric van der Vlist 2022-11-25 22:12:44 +01:00
parent 1efdc30e5c
commit 2c79c74376
4 changed files with 70 additions and 12 deletions

View File

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

View File

@ -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>

After

Width:  |  Height:  |  Size: 240 B

View File

@ -1 +1 @@
export { default } from './GetLocation';
export { default, getCurrentLocation, setCurrentLocation } from './GetLocation';

View File

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