Button to center the map on the current location.

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 <input className='get-position' type='image' src={location} onClick={onClickHandler} />;
+};
+
+export default GetLocation;

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 (
     <Fragment>
-      <Slippy />
+      <Slippy>
+        <GetLocation />
+      </Slippy>
       <Layer>
         <TiledMap />
       </Layer>

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<SlippyProps> = (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}
+              </div>
             </WheelHandler>
           </DoubleTouchHandler>
         </SingleTouchHandler>

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;

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);
+}

src/theme/icons/gps-location-svgrepo-com.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 297 297" style="enable-background:new 0 0 297 297;" xml:space="preserve">
+<path d="M148.5,0C66.653,0,0.067,66.616,0.067,148.499C0.067,230.383,66.653,297,148.5,297s148.433-66.617,148.433-148.501
+	C296.933,66.616,230.347,0,148.5,0z M158.597,276.411v-61.274c0-5.575-4.521-10.097-10.097-10.097s-10.097,4.521-10.097,10.097
+	v61.274c-62.68-4.908-112.845-55.102-117.747-117.814h61.207c5.575,0,10.097-4.521,10.097-10.097s-4.522-10.097-10.097-10.097
+	H20.656C25.558,75.69,75.723,25.497,138.403,20.589v61.274c0,5.575,4.521,10.097,10.097,10.097s10.097-4.521,10.097-10.097V20.589
+	c62.681,4.908,112.846,55.102,117.747,117.814h-61.207c-5.575,0-10.097,4.521-10.097,10.097s4.521,10.097,10.097,10.097h61.207
+	C271.441,221.31,221.276,271.503,158.597,276.411z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/theme/layer.css

@@ -2,7 +2,5 @@
   position: fixed;
   width: 4032px;
   height: 2268px;
-  z-index: -1;
   transform-origin: top left;
 }
-

src/theme/slippy.css

@@ -1,7 +1,8 @@
 .slippy {
-  position: fixed;
+  position: relative;
   width: 100%;
   height: 100%;
+  z-index: 10;
 }
 
 .huge {