`Merge branch 'master' of github.com:heritagemap/frontend-pwa

src/components/DefaultMap/index.tsx

@@ -7,7 +7,12 @@ const DefaultMap = () => {
   const prevPosition = JSON.parse(localStorage.getItem('viewport') || '{}');
 
   if (prevPosition.latitude && prevPosition.longitude) {
-    return (<Redirect to={`/lat/${prevPosition.latitude}/lon/${prevPosition.longitude}`} />);
+    const { latitude, longitude, zoom } = prevPosition;
+    return (
+      <Redirect
+        to={`/lat/${latitude}/lon/${longitude}/zoom/${zoom}`}
+      />
+    );
   }
 
   return (<FirstLoadingMap />);

src/components/FirstLoadingMap/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { Redirect, useHistory } from 'react-router-dom';
 import { useAlert } from 'react-alert';
-import { DEFAULT_LAT, DEFAULT_LON } from 'constants/map';
+import { DEFAULT_LAT, DEFAULT_LON, DEFAULT_ZOOM } from 'constants/map';
 
 const DefaultMap = () => {
   const history = useHistory();
@@ -17,15 +17,15 @@ const DefaultMap = () => {
         ) {
           alert.error('Данные геопозиции недоступны');
         } else {
-          history.push(`/lat/${position.coords.latitude}/lon/${position.coords.longitude}`);
+          history.push(`/lat/${position.coords.latitude}/lon/${position.coords.longitude}/zoom/${DEFAULT_ZOOM}`);
         }
       });
     };
 
     checkCurrentPosition();
   });
 
-  return (<Redirect to={`/lat/${DEFAULT_LAT}/lon/${DEFAULT_LON}`} />);
+  return (<Redirect to={`/lat/${DEFAULT_LAT}/lon/${DEFAULT_LON}/zoom/${DEFAULT_ZOOM}`} />);
 };
 
 export default DefaultMap;

src/components/Map/index.tsx

@@ -51,13 +51,13 @@ class MyMap extends Component<MapPropsInterface, MyMapParams> {
   constructor(props: MapPropsInterface) {
     super(props);
 
-    const { lat, lon } = this.props.match.params;
+    const { lat, lon, zoom } = this.props.match.params;
 
     this.state = {
       viewport: {
         latitude: lat,
         longitude: lon,
-        zoom: 15,
+        zoom,
         bearing: 0,
         pitch: 0,
         width: undefined,
@@ -106,17 +106,29 @@ class MyMap extends Component<MapPropsInterface, MyMapParams> {
 
     this.loadPointsWithDebounce({ latitude, longitude, zoom: maxZoom });
     if (lat !== latitude || lon !== longitude) {
-      this.props.history.push(getRoute({ lat: latitude, lon: longitude, id }));
+      this.props.history.push(getRoute({
+        lat: latitude, lon: longitude, zoom: maxZoom, id,
+      }));
     }
   };
 
   handleGeolocate = ({ coords }: CoordsInterface) => {
     const { longitude, latitude } = coords;
     const { id } = this.props.match.params;
     const { zoom } = this.state.viewport;
+    const currentZoom = zoom || MIN_ZOOM_LEVEL;
 
-    this.loadPointsWithDebounce({ latitude, longitude, zoom: zoom || MIN_ZOOM_LEVEL });
-    this.props.history.push(getRoute({ lat: latitude, lon: longitude, id }));
+    this.loadPointsWithDebounce({ latitude, longitude, zoom: currentZoom });
+    this.props.history.push(
+      getRoute(
+        {
+          lat: latitude,
+          lon: longitude,
+          id,
+          zoom: currentZoom,
+        },
+      ),
+    );
   };
 
   handleMapLoad = () => {

src/components/MarkerButton/index.tsx

@@ -16,14 +16,17 @@ const MarkerButton: FC<MarkerButtonProps> = ({ item }) => {
   const params: {
     id?: string,
     lat: string,
-    lon: string
+    lon: string,
+    zoom: string,
   } = useParams();
   const isActive = params?.id === item.id;
   const history = useHistory();
-  const { lat, lon } = params;
+  const { lat, lon, zoom } = params;
 
   const handleMarkerClick = () => {
-    history.push(getRoute({ lat, lon, id: item.id }));
+    history.push(getRoute({
+      lat, lon, zoom, id: item.id,
+    }));
   };
 
   return (

src/components/MonumentPage/index.tsx

@@ -40,7 +40,7 @@ const MonumentPage = () => {
   }
 
   return (
-    <Redirect to={`/lat/${info?.lat}/lon/${info?.long}/${params.id}`} />
+    <Redirect to={`/lat/${info?.lat}/lon/${info?.long}/zoom/12/${params.id}`} />
   );
 };
 

src/components/RedirectWithZoom/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Redirect, useParams } from 'react-router-dom';
+
+import { DEFAULT_ZOOM } from 'constants/map';
+
+const RedirectWithZoom = () => {
+  const params: { lat: string, lon: string, id?: string } = useParams();
+  const { lat, lon, id } = params;
+
+  return (
+    <Redirect to={`/lat/${lat}/lon/${lon}/zoom/${DEFAULT_ZOOM}/${id || ''}`} />
+  );
+};
+
+export default RedirectWithZoom;

src/components/Sidebar/index.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 
 import { InfoInterface } from 'interfaces/FullInfo';
+import { RouteInterface } from 'interfaces/Route';
 import getStatus from 'utils/getStatus';
 import getSource, { SOURCE } from 'utils/getSource';
 import getRoute from 'utils/getRoute';
@@ -34,11 +35,12 @@ const Sidebar = () => {
     id,
     lat,
     lon,
-  }: { id?: string | number; lat?: string; lon?: string } = useParams();
+    zoom,
+  }: RouteInterface = useParams();
   const history = useHistory();
 
   const handleClose = () => {
-    history.push(getRoute({ lat, lon }));
+    history.push(getRoute({ lat, lon, zoom }));
   };
 
   useEffect(() => {

src/constants/map.ts

@@ -1,5 +1,6 @@
 export const DEFAULT_LAT = 55.7522;
 export const DEFAULT_LON = 37.6155;
+export const DEFAULT_ZOOM = 12;
 export const ACCESS_TOKEN = 'pk.eyJ1IjoieXVsaWEtYXZkZWV2YSIsImEiOiJjazh0enUyOGEwNTR1M29va3I0YXMweXR5In0.6S0Dy1MTrzcgLlQEHtF2Aw';
 export const PAGES_RESOURCE = '/_api/heritage/?action=search&format=json&limit=5000&srcountry=ru&&props=id|name|address|municipality|lat|lon|image|source&bbox=';
 export const MIN_ZOOM_LEVEL = 0;

src/interfaces/Map.ts

@@ -4,7 +4,7 @@ import MonumentIntarface from './Monument';
 export interface ViewportInterface {
   latitude?: number | string,
   longitude?: number | string,
-  zoom?: number,
+  zoom?: number | string,
   bearing?: number,
   pitch?: number,
   width?: number,
@@ -20,7 +20,12 @@ export interface MapParamsInterface {
 export interface MapPropsInterface {
   alert: AlertManager,
   match: {
-    params: { lat: string; lon: string; id?: string }
+    params: {
+      lat: string;
+      lon: string;
+      zoom: string;
+      id?: string
+    }
   },
   history: { push: (route: string) => void },
 }

src/interfaces/Route.ts

@@ -0,0 +1,6 @@
+export interface RouteInterface {
+  id?: string;
+  lat?: string;
+  lon?: string,
+  zoom?: string,
+}

src/utils/getRoute.ts

@@ -2,12 +2,13 @@ interface RouteParamsInterface {
   lat?: string | number;
   lon?: string | number;
   id?: string | number;
+  zoom?: string | number;
 }
 
 const getRoute = (params: RouteParamsInterface) => (
-  Object.keys(params).reduce(
+  ['lat', 'lon', 'zoom', 'id'].reduce(
     // @ts-ignore
-    (acc: string, item: 'lat' | 'lon' | 'id') => {
+    (acc: string, item: 'lat' | 'lon' | 'id' | 'zoom') => {
       if (!params[item]) return acc;
 
       if (item === 'id') return `${acc}/${params[item]}`;