diff --git a/src/components/map/current-location.tsx b/src/components/map/current-location.tsx
new file mode 100644
index 0000000..793af87
--- /dev/null
+++ b/src/components/map/current-location.tsx
@@ -0,0 +1,26 @@
+import React, { Fragment } from 'react';
+
+import { useSelector } from 'react-redux';
+
+import { MapState } from '../../store/map';
+
+const CurrentLocation: React.FC<{}> = () => {
+ const scale = useSelector(
+ (state: { map: MapState }) => state.map.whiteboard.scale
+ );
+ const CurrentLocationState = useSelector(
+ (state: { map: MapState }) => state.map.currentLocation
+ );
+
+ return (
+
+ );
+};
+
+export default CurrentLocation;
diff --git a/src/components/map/get-location.tsx b/src/components/map/get-location.tsx
index 29ab46d..293f59b 100644
--- a/src/components/map/get-location.tsx
+++ b/src/components/map/get-location.tsx
@@ -23,6 +23,12 @@ const GetLocation: React.FC<{}> = () => {
lon: position.coords.longitude,
})
);
+ dispatch(
+ mapActions.setCurrent({
+ lat: position.coords.latitude,
+ lon: position.coords.longitude,
+ })
+ );
});
};
diff --git a/src/components/map/map.tsx b/src/components/map/map.tsx
index 4a1ea0e..b6be5e0 100644
--- a/src/components/map/map.tsx
+++ b/src/components/map/map.tsx
@@ -8,6 +8,7 @@ import Slippy from '../slippy/slippy';
import TiledMap from './tiled-map';
import GetLocation from './get-location';
import Whiteboard from './whiteboard';
+import CurrentLocation from './current-location';
const Map: react.FC<{}> = (props: {}) => {
const dispatch = useDispatch();
@@ -29,7 +30,9 @@ const Map: react.FC<{}> = (props: {}) => {
-
+
+
+
diff --git a/src/components/map/whiteboard.tsx b/src/components/map/whiteboard.tsx
index 0d12dc8..3ec4a4e 100644
--- a/src/components/map/whiteboard.tsx
+++ b/src/components/map/whiteboard.tsx
@@ -16,12 +16,6 @@ const Whiteboard: React.FC = (props: WhiteboardProps) => {
-
{props.children}
diff --git a/src/store/map.ts b/src/store/map.ts
index 956962f..4431dbf 100644
--- a/src/store/map.ts
+++ b/src/store/map.ts
@@ -21,7 +21,7 @@ export interface MapScope {
}
var initialMapScope: MapScope = {
center: { lat: -37.8403508, lon: 77.5539501 },
- zoom: 17,
+ zoom: 15,
};
// Derived properties
@@ -45,37 +45,21 @@ export interface WhiteboardState {
translation: Point;
}
+// Current location
+
+export interface CurrentLocationState {
+ geo: geoPoint;
+ whiteboard: Point;
+}
+
// Global state
export interface MapState {
scope: MapScope;
tiles: TilesDescription;
slippy: SlippyState;
whiteboard: WhiteboardState;
+ currentLocation: CurrentLocationState;
}
-/*
-
-const nbTilesY = _.ceil(mapState.viewport.height / tileSize) + 4;
- const nbTilesX = _.ceil(mapState.viewport.width / tileSize) + 4;
- const [tileCenterY, reminderY] = lat2tile(
- mapState.scope.center.lat,
- mapState.scope.zoom
- );
- const [tileCenterX, reminderX] = lon2tile(
- mapState.scope.center.lon,
- mapState.scope.zoom
- );
- const firstTileY = tileCenterY - _.round(nbTilesY / 2);
- const firstTileX = tileCenterX - _.round(nbTilesX / 2);
- const locationY = (tileCenterY + reminderY - firstTileY) * tileSize;
- const locationX = (tileCenterX + reminderX - firstTileX) * tileSize;
- const targetLocationY = mapState.viewport.height / 2;
- const targetLocationX = mapState.viewport.width / 2;
- const deltaY = targetLocationY - locationY;
- const deltaX = targetLocationX - locationX;
-
-
-*/
-
export var initialMapState: MapState = {
scope: initialMapScope,
slippy: {
@@ -103,6 +87,16 @@ export var initialMapState: MapState = {
y: 0,
},
},
+ currentLocation: {
+ geo: {
+ lat: 0,
+ lon: 0,
+ },
+ whiteboard: {
+ x: 0,
+ y: 0,
+ },
+ },
};
const evaluateWhiteboardViewBox = (
@@ -211,6 +205,18 @@ const mapSlice = createSlice({
state.scope.center.lon = action.payload.lon;
evaluateStateFromScope(state);
},
+ setCurrent: (state, action) => {
+ state.currentLocation.geo.lat = action.payload.lat;
+ state.currentLocation.geo.lon = action.payload.lon;
+ state.currentLocation.whiteboard.x = lon2tile(
+ state.currentLocation.geo.lon,
+ zoom0
+ );
+ state.currentLocation.whiteboard.y = lat2tile(
+ state.currentLocation.geo.lat,
+ zoom0
+ );
+ },
shift: (state, action) => {
state.slippy.translation.x =
state.slippy.translation.x + action.payload.x;