Cleaning before switching to SoliJS
This commit is contained in:
vdv committed
1 parent
2fa6199979
commit
8bb8792ee2
28 files changed
-17519
No files matched your search
@@ -1,7 +0,0 @@
|
||||
.getLocation {
|
||||
--opacity: 0.6;
|
||||
--ion-background-color: white;
|
||||
margin-left: calc(50% - 20px);
|
||||
position: fixed;
|
||||
bottom: 6px;
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Geolocation } from '@awesome-cordova-plugins/geolocation';
|
||||
|
||||
import style from './GetLocation.module.css';
|
||||
import { IonButton, IonIcon } from '@ionic/react';
|
||||
import { locateOutline } from 'ionicons/icons';
|
||||
import { useAtom } from 'jotai';
|
||||
import { stateAtom } from '../map';
|
||||
import { locationAtom } from '../show-location';
|
||||
|
||||
// import { locationAtom } from '../map/CurrentLocation';
|
||||
|
||||
const GetLocation: React.FC<{}> = () => {
|
||||
const [state, setState] = useAtom(stateAtom);
|
||||
|
||||
const [, setLocation] = useAtom(locationAtom);
|
||||
|
||||
const onClickHandler = (event: any) => {
|
||||
console.log('Click handler');
|
||||
Geolocation.getCurrentPosition().then((position) => {
|
||||
console.log({ caller: 'GetLocation/onClickHandler', position, state });
|
||||
setState({
|
||||
zoom: state.zoom,
|
||||
rotation: state.rotation,
|
||||
center: [position.coords.longitude, position.coords.latitude],
|
||||
});
|
||||
setLocation([position.coords.longitude, position.coords.latitude]);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<IonButton
|
||||
className={style.getLocation}
|
||||
shape='round'
|
||||
size='small'
|
||||
fill='solid'
|
||||
onClick={onClickHandler}
|
||||
>
|
||||
<IonIcon slot='icon-only' icon={locateOutline} color='white' />
|
||||
</IonButton>
|
||||
);
|
||||
};
|
||||
|
||||
export default GetLocation;
|
||||
@@ -1 +0,0 @@
|
||||
export { default } from './GetLocation';
|
||||
@@ -1,17 +0,0 @@
|
||||
.ol-map {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.ol-control {
|
||||
position: absolute;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
border-radius: 4px;
|
||||
padding: 2px;
|
||||
}
|
||||
.ol-full-screen {
|
||||
top: 0.5em;
|
||||
right: 0.5em;
|
||||
}
|
||||
@@ -1,189 +0,0 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
|
||||
import { atom, useAtom } from 'jotai';
|
||||
import { atomWithHash } from 'jotai-location';
|
||||
|
||||
import OlMap from 'ol/Map';
|
||||
import View from 'ol/View';
|
||||
import TileLayer from 'ol/layer/Tile';
|
||||
import VectorLayer from 'ol/layer/Vector';
|
||||
import VectorSource from 'ol/source/Vector';
|
||||
import Feature from 'ol/Feature';
|
||||
import Attribution from 'ol/control/Attribution';
|
||||
import Rotate from 'ol/control/Rotate';
|
||||
import ScaleLine from 'ol/control/ScaleLine';
|
||||
import Control from 'ol/control/Control';
|
||||
import OSM from 'ol/source/OSM';
|
||||
import { useGeographic as olUseGeographic } from 'ol/proj';
|
||||
|
||||
import { isEqual } from 'lodash';
|
||||
|
||||
import './Map.css';
|
||||
import Collection from 'ol/Collection';
|
||||
import { Circle, Fill, Stroke, Style, Icon } from 'ol/style';
|
||||
import GetLocation from '../get-location';
|
||||
import ShowLocation, { locationAtom } from '../show-location';
|
||||
import { Point } from 'ol/geom';
|
||||
|
||||
export interface MapProperties {}
|
||||
|
||||
olUseGeographic();
|
||||
|
||||
const mapAtom = atom<OlMap | null>(null);
|
||||
const sourceAtom = atom<VectorSource | null>(null);
|
||||
|
||||
export const stateAtom = atomWithHash<any>('map', null);
|
||||
//atom(
|
||||
// (get) => {
|
||||
// const map = get(mapAtom);
|
||||
// const view = map?.getView();
|
||||
// return {
|
||||
// center: view?.getCenter(),
|
||||
// zoom: view?.getZoom(),
|
||||
// rotation: view?.getRotation(),
|
||||
// };
|
||||
// },
|
||||
// (get, set, state: any) => {
|
||||
// const map = get(mapAtom);
|
||||
// const view = map?.getView();
|
||||
// view?.setCenter(state.center);
|
||||
// view?.setZoom(state.zoom);
|
||||
// view?.setRotation(state.rotation);
|
||||
// }
|
||||
//);
|
||||
|
||||
export const Map: React.FC<MapProperties> = (props: MapProperties) => {
|
||||
const [map, setMap] = useAtom(mapAtom);
|
||||
const [source, setSource] = useAtom(sourceAtom);
|
||||
const [state, setState] = useAtom(stateAtom);
|
||||
const [location] = useAtom(locationAtom);
|
||||
|
||||
const target = useRef<HTMLDivElement>(null);
|
||||
const getLocation = useRef<HTMLDivElement>(null);
|
||||
const showLocation = useRef<SVGSVGElement>(null);
|
||||
|
||||
const previousState = useRef<any>(null);
|
||||
|
||||
if (state && map) {
|
||||
if (!isEqual(state, previousState.current)) {
|
||||
console.log({ caller: 'Map / updateView', state, map });
|
||||
previousState.current = state;
|
||||
const view = map.getView();
|
||||
// view.beginInteraction();
|
||||
// const view = new View(state);
|
||||
// map.setView(view);
|
||||
// map.renderSync();
|
||||
// view.setCenter(state.center);
|
||||
// view.setZoom(state.zoom);
|
||||
// view.setRotation(state.rotation);
|
||||
// view.resolveConstraints();
|
||||
// view.endInteraction();
|
||||
// map.setView(view);
|
||||
// map.getView().animate(state);
|
||||
// view.endInteraction();
|
||||
view.animate({ ...state, duration: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
if (source && location && showLocation.current) {
|
||||
console.log({ caller: 'Map / updateLocation', location, source, map });
|
||||
source.clear(true);
|
||||
const point = new Point(location);
|
||||
const style = new Style({
|
||||
image: new Icon({
|
||||
// size: [20, 20],
|
||||
imgSize: [24, 24],
|
||||
declutterMode: 'declutter',
|
||||
src: `data:image/svg+xml;utf8,${encodeURI(
|
||||
showLocation.current.outerHTML
|
||||
)}`,
|
||||
}),
|
||||
});
|
||||
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,
|
||||
map,
|
||||
style,
|
||||
feature,
|
||||
showLocation: showLocation.current,
|
||||
});
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
console.log({ caller: 'Map / useEffect', target, getLocation });
|
||||
|
||||
const changeListener = (event: any) => {
|
||||
const view = olMap?.getView();
|
||||
const newState = {
|
||||
center: view?.getCenter(),
|
||||
zoom: view?.getZoom(),
|
||||
rotation: view?.getRotation(),
|
||||
};
|
||||
setState(newState);
|
||||
|
||||
console.log({
|
||||
caller: 'Map / changeListener',
|
||||
event,
|
||||
newState,
|
||||
olMap,
|
||||
});
|
||||
};
|
||||
|
||||
const controls = new Collection([
|
||||
new Attribution({ collapsible: true }),
|
||||
new Rotate(),
|
||||
new ScaleLine({ bar: true }),
|
||||
new Control({ element: getLocation.current ?? undefined }),
|
||||
]);
|
||||
const newSource = new VectorSource();
|
||||
setSource(newSource);
|
||||
const olMap = new OlMap({
|
||||
view: new View(
|
||||
state ?? {
|
||||
center: [0, 0],
|
||||
zoom: 1,
|
||||
}
|
||||
),
|
||||
layers: [
|
||||
new TileLayer({
|
||||
source: new OSM(),
|
||||
}),
|
||||
new VectorLayer({ source: newSource }),
|
||||
],
|
||||
target: target.current ?? undefined,
|
||||
controls,
|
||||
});
|
||||
olMap.on(['moveend'], changeListener);
|
||||
setMap(olMap);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div ref={getLocation}>
|
||||
<GetLocation />
|
||||
</div>
|
||||
<svg
|
||||
ref={showLocation}
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width={24}
|
||||
height={24}
|
||||
version='1.1'
|
||||
>
|
||||
<ShowLocation />
|
||||
</svg>
|
||||
<div ref={target} className='ol-map'></div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Map;
|
||||
@@ -1 +0,0 @@
|
||||
export { default, stateAtom } from './Map';
|
||||
@@ -1,29 +0,0 @@
|
||||
import { atom, useAtom } from 'jotai';
|
||||
import react from 'react';
|
||||
|
||||
export interface ShowLocationProperties {}
|
||||
|
||||
const initialLocation: number[] | null = null;
|
||||
export const locationAtom = atom<number[] | null>(initialLocation);
|
||||
|
||||
export const ShowLocation: react.FC<ShowLocationProperties> = (
|
||||
props: ShowLocationProperties
|
||||
) => {
|
||||
const [location] = useAtom(locationAtom);
|
||||
console.log({ caller: 'ShowLocation', location });
|
||||
|
||||
return location !== null ? (
|
||||
<circle
|
||||
cx={8}
|
||||
cy={8}
|
||||
r={8}
|
||||
fill='blue'
|
||||
opacity='90%'
|
||||
stroke='white'
|
||||
strokeWidth={3}
|
||||
strokeOpacity='100%'
|
||||
/>
|
||||
) : null;
|
||||
};
|
||||
|
||||
export default ShowLocation;
|
||||
@@ -1 +0,0 @@
|
||||
export { default, locationAtom } from './ShowLocation';
|
||||
Reference in new issue
Block a user