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>