From 46cffdcc4c042ec50a47659fe9e87276217a4caa Mon Sep 17 00:00:00 2001 From: evlist Date: Tue, 20 Sep 2022 17:29:02 +0200 Subject: [PATCH] Button to center the map on the current location. --- src/components/map/get-location.tsx | 32 +++++++++++++++ src/components/map/map.tsx | 7 +++- src/components/slippy/slippy.tsx | 9 ++++- src/store/map.ts | 5 +++ src/theme/get-location.css | 10 +++++ src/theme/icons/gps-location-svgrepo-com.svg | 42 ++++++++++++++++++++ src/theme/layer.css | 2 - src/theme/slippy.css | 3 +- 8 files changed, 103 insertions(+), 7 deletions(-) create mode 100644 src/components/map/get-location.tsx create mode 100644 src/theme/get-location.css create mode 100644 src/theme/icons/gps-location-svgrepo-com.svg diff --git a/src/components/map/get-location.tsx b/src/components/map/get-location.tsx new file mode 100644 index 0000000..29ab46d --- /dev/null +++ b/src/components/map/get-location.tsx @@ -0,0 +1,32 @@ +import React from 'react'; + +import { Geolocation } from '@awesome-cordova-plugins/geolocation'; +import { useDispatch } from 'react-redux'; + +import { mapActions } from '../../store/map'; + +import '../../theme/get-location.css'; +import location from '../../theme/icons/gps-location-svgrepo-com.svg'; + +const GetLocation: React.FC<{}> = () => { + const dispatch = useDispatch(); + + const onClickHandler = (event: any) => { + console.log('Click handler'); + Geolocation.getCurrentPosition().then((position) => { + console.log( + `Click handler, position: ${position.coords.latitude}, ${position.coords.longitude}` + ); + dispatch( + mapActions.setCenter({ + lat: position.coords.latitude, + lon: position.coords.longitude, + }) + ); + }); + }; + + return ; +}; + +export default GetLocation; diff --git a/src/components/map/map.tsx b/src/components/map/map.tsx index 37296f9..675d577 100644 --- a/src/components/map/map.tsx +++ b/src/components/map/map.tsx @@ -6,6 +6,7 @@ import _ from 'lodash'; import Layer from '../slippy/layer'; import Slippy from '../slippy/slippy'; import TiledMap from './tiled-map'; +import GetLocation from './get-location'; const Map: react.FC<{}> = (props: {}) => { const dispatch = useDispatch(); @@ -20,12 +21,14 @@ const Map: react.FC<{}> = (props: {}) => { useEffect(() => { window.addEventListener('resize', debouncedResizeHandler); -// dispatch(mapActions.shift({ x: -50, y: 0 })); + // dispatch(mapActions.shift({ x: -50, y: 0 })); }, []); return ( - + + + diff --git a/src/components/slippy/slippy.tsx b/src/components/slippy/slippy.tsx index d4961d1..60a6d43 100644 --- a/src/components/slippy/slippy.tsx +++ b/src/components/slippy/slippy.tsx @@ -9,8 +9,11 @@ import { MapState } from '../../store/map'; import '../../theme/slippy.css'; +interface SlippyProps { + children?: any; +} -const Slippy: react.FC<{}> = () => { +const Slippy: react.FC = (props: SlippyProps) => { //console.log(`--- Rendering viewport, props: ${JSON.stringify(props)} ---`); const slippyState = useSelector( @@ -31,7 +34,9 @@ const Slippy: react.FC<{}> = () => { width: window.innerWidth + 'px', height: window.innerHeight + 'px', }} - /> + > + {props.children} + diff --git a/src/store/map.ts b/src/store/map.ts index 8bdf237..f5b5652 100644 --- a/src/store/map.ts +++ b/src/store/map.ts @@ -168,6 +168,11 @@ const mapSlice = createSlice({ resize: (state) => { evaluateStateFromScope(state); }, + setCenter: (state, action) => { + state.scope.center.lat = action.payload.lat; + state.scope.center.lon = action.payload.lon; + evaluateStateFromScope(state); + }, shift: (state, action) => { state.slippy.translation.x = state.slippy.translation.x + action.payload.x; diff --git a/src/theme/get-location.css b/src/theme/get-location.css new file mode 100644 index 0000000..0ebd999 --- /dev/null +++ b/src/theme/get-location.css @@ -0,0 +1,10 @@ + +.get-position { + position: absolute; + display: block; + height: 40px; + width: 40px; + bottom: 10px; + margin-left: 50%; + transform: translateX(-20px); +} diff --git a/src/theme/icons/gps-location-svgrepo-com.svg b/src/theme/icons/gps-location-svgrepo-com.svg new file mode 100644 index 0000000..6105b90 --- /dev/null +++ b/src/theme/icons/gps-location-svgrepo-com.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/theme/layer.css b/src/theme/layer.css index e3cf5f5..7b7bcd5 100644 --- a/src/theme/layer.css +++ b/src/theme/layer.css @@ -2,7 +2,5 @@ position: fixed; width: 4032px; height: 2268px; - z-index: -1; transform-origin: top left; } - diff --git a/src/theme/slippy.css b/src/theme/slippy.css index 50694f9..9975919 100644 --- a/src/theme/slippy.css +++ b/src/theme/slippy.css @@ -1,7 +1,8 @@ .slippy { - position: fixed; + position: relative; width: 100%; height: 100%; + z-index: 10; } .huge {