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 {