Button to center the map on the current location.
This commit is contained in:
parent
88755e35f9
commit
46cffdcc4c
|
@ -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;
|
|
@ -6,6 +6,7 @@ import _ from 'lodash';
|
||||||
import Layer from '../slippy/layer';
|
import Layer from '../slippy/layer';
|
||||||
import Slippy from '../slippy/slippy';
|
import Slippy from '../slippy/slippy';
|
||||||
import TiledMap from './tiled-map';
|
import TiledMap from './tiled-map';
|
||||||
|
import GetLocation from './get-location';
|
||||||
|
|
||||||
const Map: react.FC<{}> = (props: {}) => {
|
const Map: react.FC<{}> = (props: {}) => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
|
@ -25,7 +26,9 @@ const Map: react.FC<{}> = (props: {}) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<Slippy />
|
<Slippy>
|
||||||
|
<GetLocation />
|
||||||
|
</Slippy>
|
||||||
<Layer>
|
<Layer>
|
||||||
<TiledMap />
|
<TiledMap />
|
||||||
</Layer>
|
</Layer>
|
||||||
|
|
|
@ -9,8 +9,11 @@ import { MapState } from '../../store/map';
|
||||||
|
|
||||||
import '../../theme/slippy.css';
|
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)} ---`);
|
//console.log(`--- Rendering viewport, props: ${JSON.stringify(props)} ---`);
|
||||||
|
|
||||||
const slippyState = useSelector(
|
const slippyState = useSelector(
|
||||||
|
@ -31,7 +34,9 @@ const Slippy: react.FC<{}> = () => {
|
||||||
width: window.innerWidth + 'px',
|
width: window.innerWidth + 'px',
|
||||||
height: window.innerHeight + 'px',
|
height: window.innerHeight + 'px',
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
|
{props.children}
|
||||||
|
</div>
|
||||||
</WheelHandler>
|
</WheelHandler>
|
||||||
</DoubleTouchHandler>
|
</DoubleTouchHandler>
|
||||||
</SingleTouchHandler>
|
</SingleTouchHandler>
|
||||||
|
|
|
@ -168,6 +168,11 @@ const mapSlice = createSlice({
|
||||||
resize: (state) => {
|
resize: (state) => {
|
||||||
evaluateStateFromScope(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) => {
|
shift: (state, action) => {
|
||||||
state.slippy.translation.x =
|
state.slippy.translation.x =
|
||||||
state.slippy.translation.x + action.payload.x;
|
state.slippy.translation.x + action.payload.x;
|
||||||
|
|
|
@ -0,0 +1,10 @@
|
||||||
|
|
||||||
|
.get-position {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
bottom: 10px;
|
||||||
|
margin-left: 50%;
|
||||||
|
transform: translateX(-20px);
|
||||||
|
}
|
|
@ -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 |
|
@ -2,7 +2,5 @@
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 4032px;
|
width: 4032px;
|
||||||
height: 2268px;
|
height: 2268px;
|
||||||
z-index: -1;
|
|
||||||
transform-origin: top left;
|
transform-origin: top left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
.slippy {
|
.slippy {
|
||||||
position: fixed;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.huge {
|
.huge {
|
||||||
|
|
Loading…
Reference in New Issue