Button to center the map on the current location.

This commit is contained in:
Eric van der Vlist 2022-09-20 17:29:02 +02:00
parent 88755e35f9
commit 46cffdcc4c
8 changed files with 103 additions and 7 deletions

View File

@ -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;

View File

@ -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();
@ -25,7 +26,9 @@ const Map: react.FC<{}> = (props: {}) => {
return (
<Fragment>
<Slippy />
<Slippy>
<GetLocation />
</Slippy>
<Layer>
<TiledMap />
</Layer>

View File

@ -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>

View File

@ -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;

View File

@ -0,0 +1,10 @@
.get-position {
position: absolute;
display: block;
height: 40px;
width: 40px;
bottom: 10px;
margin-left: 50%;
transform: translateX(-20px);
}

View File

@ -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>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

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

View File

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