Merge branch 'main' into facades

components/Layers/DesignCode/CardContent/CardContent.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
-
-import { Section } from 'components/UI/Card/components/Section/Section';
 import { Header } from 'components/UI/Card/components/Header/Header';
 import { Label } from 'components/UI/Card/components/Label/Label';
+import { Section } from 'components/UI/Card/components/Section/Section';
 
 import { DESIGN_MAP_HOST } from 'components/Layers/DesignCode/designCode';
 import styles from 'styles/CardContent.module.css';
+import { Sources } from 'components/UI/Card/components/Sources/Sources';
 import { DESIGN_CODE_MARKER_COLOR_BY_TYPE } from '../MapData/MapData.constants';
 
 import { DesignCodeObject } from '../designCodeObject';
@@ -44,6 +43,9 @@ export function DesignCodeCardContent({ placemark }: { placemark?: DesignCodeObj
                     );
                 })}
             </Section>
+            <Section>
+                <Sources sources={['ekaterinburgdesign']} />
+            </Section>
         </div>
     ) : null;
 }

components/Layers/DesignCode/DesignCode.constants.ts

@@ -13,4 +13,5 @@ export const DESIGN_CODE_ITEMS_COLORS = {
     [DesignCodeItemType.TrafficLight]: '#965a14',
     [DesignCodeItemType.Transport]: '#006d4e',
     [DesignCodeItemType.WallPlate]: '#a00041',
+    [DesignCodeItemType.ColumnsWithArrows]: '#86e621',
 };

components/Layers/DesignCode/designCodeObject.ts

@@ -13,6 +13,7 @@ export enum DesignCodeItemType {
     CommemorativePlaque = 'Памятные таблички',
     Transport = 'Транспорт',
     WallPlate = 'Настенные таблички',
+    ColumnsWithArrows = 'Столбы со стрелками',
 }
 
 export interface DesignCodeObject {

components/Layers/Filters.config.tsx

@@ -26,7 +26,7 @@ export const FILTERS_CONFIG: FilterConfig = {
     [FilterType.HouseWearTear]: {
         title: 'Степень износа домов',
         component: <HouseWearTearFilter />,
-        source: [SOURCES_BY_TYPE.mingkh, SOURCES_BY_TYPE.howoldthishouse],
+        source: [SOURCES_BY_TYPE.mingkh, SOURCES_BY_TYPE.domaekb],
         isVerified: false,
     },
     [FilterType.OKN]: {

components/Layers/Houses/CardContent/CardContent.tsx

@@ -184,7 +184,7 @@ export function HousesCardContent() {
                 </Section>
             )}
             <Section>
-                <Sources sources={['howoldthishouse', 'mingkh', 'domaekb']} />
+                <Sources sources={['osm', 'howoldthishouse', 'mingkh', 'domaekb']} />
             </Section>
             <Section>
                 <EditObjectButtonLink address={placemark?.attributes.Address} />

components/Layers/Quarter/quarter.ts

@@ -2,9 +2,9 @@ import quarterObjects from 'public/quarter_inspectors.json';
 import { QuarterObject } from './quarterObject';
 
 export const quarter = {
-    getObject(quarterTitle: string): Promise<QuarterObject> {
+    getObject(quarterId: string): Promise<QuarterObject> {
         return Promise.resolve(
-            quarterObjects.features.find((f) => f.properties.quarterTitle === decodeURI(quarterTitle)).properties as unknown as QuarterObject,
+            quarterObjects.features.find((f) => f.properties.id === quarterId).properties as unknown as QuarterObject,
         );
     },
 };

components/Map/Map.tsx

@@ -5,6 +5,7 @@ import { useContext } from 'react';
 import maplibregl from 'maplibre-gl';
 import MapGl from 'react-map-gl';
 import { COORDS_EKATERINBURG } from 'constants/coords';
+import { MAX_ZOOM, MIN_ZOOM } from 'constants/map';
 
 import { BuildingSource } from './layers/BuildingSource';
 import { DesignCodeSource } from './layers/DesignCodeSource';
@@ -41,8 +42,8 @@ export function Map() {
                 zoom: 15,
                 pitch: 0,
             }}
-            minZoom={11}
-            maxZoom={20}
+            minZoom={MIN_ZOOM}
+            maxZoom={MAX_ZOOM}
             // hash
             style={{ width: '100vw', height: '100vh', color: 'black' }}
             mapStyle="https://map-backend.netlify.app/style.json"

components/Map/layers/DtpSource.tsx

@@ -1,17 +1,18 @@
 import React, { useEffect } from 'react';
 import { Source, Layer, useMap } from 'react-map-gl';
-import type { CircleLayer } from 'react-map-gl';
+import type { CircleLayer, HeatmapLayer } from 'react-map-gl';
 import { useSelector } from 'react-redux';
 import { activeFilterSelector, activeFilterParamsSelector } from 'state/features/selectors';
 import { FilterType } from 'types/Filters.types';
 import { SEVERITY_CONFIG } from 'components/Layers/DTP/DTP.constants';
 import { MapItemType } from 'types/map-item';
-import { getLayerStyle } from 'components/Map/helpers/getFeatureState';
+import { MAX_ZOOM, MIN_ZOOM } from 'constants/map';
 import dtp from '../../../public/ekb-dtp.json';
 import { usePopup } from '../providers/usePopup';
 import useMapObjectState from '../providers/useMapObjectState';
 
 const DTP_LAYER_ID = 'dtp-point';
+const DTP_LAYER_HEATMAP_ID = 'dtp-point-heatmap';
 
 export function DtpSource() {
     const ekbMap = useMap();
@@ -66,20 +67,54 @@ export function DtpSource() {
         type: 'circle',
         source: 'ekb-dtp-source',
         paint: {
-            'circle-radius': getLayerStyle<number>({ initial: 8, hover: 10, active: 12 }),
             // @ts-ignore
             'circle-color': ['case'].concat(...colors).concat(['rgba(0, 0, 0, 0)']),
-            // @ts-ignore
             'circle-stroke-width': 1,
             // @ts-ignore
             'circle-stroke-color': ['case'].concat(...strokeColors).concat(['rgba(0, 0, 0, 0)']),
+            'circle-radius': ['interpolate', ['linear'], ['zoom'], MIN_ZOOM, 1, MAX_ZOOM, 12],
+        },
+    };
+
+    const heatmapStyle: HeatmapLayer = {
+        id: DTP_LAYER_HEATMAP_ID,
+        source: 'ekb-dtp-source',
+        type: 'heatmap',
+        paint: {
+            'heatmap-weight': {
+                type: 'exponential',
+                property: 'weight',
+                stops: [
+                    [0, 0],
+                    [1, 1],
+                ],
+            },
+            'heatmap-intensity': 1,
+            'heatmap-color': [
+                'interpolate',
+                ['linear'],
+                ['heatmap-density'],
+                0,
+                'rgba(0, 0, 255, 0)',
+                0.2,
+                'rgb(0, 255, 0)',
+                0.4,
+                'rgb(255, 255, 0)',
+                0.6,
+                'rgb(255, 0, 0)',
+                1,
+                'rgb(255, 0, 0)',
+            ],
+            'heatmap-radius': ['interpolate', ['linear'], ['zoom'], MIN_ZOOM, 2, MAX_ZOOM, 50],
+            'heatmap-opacity': ['interpolate', ['linear'], ['zoom'], MIN_ZOOM, 1, MAX_ZOOM, 0],
         },
     };
 
     return (
         <>
             <Source generateId id="ekb-dtp-source" type="geojson" data={data}>
                 <Layer {...layerStyle} />
+                <Layer {...heatmapStyle} />
             </Source>
         </>
     );

components/Map/layers/QuarterSource.tsx

@@ -25,7 +25,7 @@ export function QuarterSource() {
         const handlePointClick = (e) => {
             const item = e.target.queryRenderedFeatures(e.point)[0];
 
-            openPopup(decodeURI(item?.properties?.quarterTitle), MapItemType.Quarter);
+            openPopup(item?.properties?.id, MapItemType.Quarter);
         };
 
         map.on('click', QUARTER_LAYER_ID, handlePointClick);

components/UI/Copyright/Copyright.tsx

@@ -1,7 +1,7 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import { useSelector } from 'react-redux';
-import { activeFilterSelector } from 'state/features/selectors';
 import { MapContext } from 'components/Map/providers/MapProvider';
+import { activeFilterSelector } from 'state/features/selectors';
 import { FILTERS_CONFIG } from '../../Layers/Filters.config';
 
 import styles from './Copyright.module.css';

components/UI/Filters/components/Filter/Filter.module.css

@@ -22,7 +22,3 @@
     visibility: visible;
     max-height: 100vh;
 }
-
-.filter_no_paddingTop {
-    padding-top: 0;
-}

constants/map.ts

@@ -0,0 +1,2 @@
+export const MIN_ZOOM = 11;
+export const MAX_ZOOM = 20;

constants/sources.ts

@@ -1,4 +1,9 @@
 export const SOURCES_BY_TYPE = {
+    osm: {
+        name: 'OpenStreetMap',
+        link: 'https://www.openstreetmap.org/',
+        data: null,
+    },
     okn: {
         name: 'Объекты культурного наследия Свердловской области',
         link: 'https://okn.midural.ru/kategorii/obekty-kulturnogo-naslediya-sverdlovskoy-oblasti',