Showing the current location.
This commit is contained in:
parent
1efdc30e5c
commit
2c79c74376
|
@ -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,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
@ -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 |
|
@ -1 +1 @@
|
|||
export { default } from './GetLocation';
|
||||
export { default, getCurrentLocation, setCurrentLocation } from './GetLocation';
|
||||
|
|
|
@ -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>([
|
||||
|
|
Loading…
Reference in New Issue