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 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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
width: 4032px;
|
||||
height: 2268px;
|
||||
z-index: -1;
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
.slippy {
|
||||
position: fixed;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.huge {
|
||||
|
|
Loading…
Reference in New Issue