add population layer

components/Layers/Filters.config.tsx

@@ -52,4 +52,9 @@ export const FILTERS_CONFIG: FilterConfig = {
         component: <LinesFilter />,
         isVerified: true,
     },
+    [FilterType.Population]: {
+        title: 'Население',
+        component: null,
+        isVerified: true,
+    },
 };

components/Layers/config.ts

@@ -39,4 +39,8 @@ export const MODEL_CONFIG = {
         cardContent: LinesCardContent,
         requests: { oneItemRequest: lines.getObject },
     },
+    [MapItemType.Population]: {
+        cardContent: LinesCardContent,
+        requests: { oneItemRequest: lines.getObject },
+    },
 } as const;

components/Map/Map.tsx

@@ -11,6 +11,7 @@ import { OknSource } from './layers/OknSource';
 import { DtpSource } from './layers/DtpSource';
 import { LinesSource } from './layers/LinesSource';
 import { DesignCodeSource } from './layers/DesignCodeSource';
+import { PopulationSource } from './layers/PopulationSource';
 import { MapContext } from './providers/MapProvider';
 
 import 'maplibre-gl/dist/maplibre-gl.css';
@@ -23,6 +24,7 @@ function MapLayers() {
             <DtpSource />
             <LinesSource />
             <DesignCodeSource />
+            <PopulationSource />
         </>
     );
 }

components/Map/layers/PopulationSource.tsx

@@ -0,0 +1,50 @@
+import { Source, Layer } from 'react-map-gl';
+import { useSelector } from 'react-redux';
+import React from 'react';
+import type { FillLayer } from 'react-map-gl';
+import { activeFilterSelector } from 'state/features/selectors';
+import { FilterType } from 'types/Filters.types';
+import useMapObjectState from '../providers/useMapObjectState';
+
+const layerId = 'ekb-population-layer';
+const sourceId = 'ekb-population-source';
+
+export function PopulationSource() {
+    const activeFilter = useSelector(activeFilterSelector);
+
+    useMapObjectState(layerId);
+
+    if (activeFilter !== FilterType.Population) {
+        return null;
+    }
+
+    const layerStyle: FillLayer = {
+        id: layerId,
+        type: 'fill',
+        source: sourceId,
+        paint: {
+            // @ts-ignore
+            'fill-color': [
+                'interpolate',
+                ['linear'],
+                ['get', 'population'],
+                0,
+                'green',
+                8000,
+                'red',
+            ],
+            'fill-opacity': 0.5,
+        },
+    };
+
+    return (
+        <Source
+            id={sourceId}
+            data="https://map-backend.netlify.app/kontur-population.json"
+            type="geojson"
+            generateId
+        >
+            <Layer {...layerStyle} />
+        </Source>
+    );
+}

types/Filters.types.ts

@@ -14,6 +14,7 @@ export enum FilterType {
     DesignCode = 'designCode',
     DTP = 'dtp',
     Line = 'line',
+    Population = 'population',
 }
 
 export interface FilterConfigItem {

types/map-item.ts

@@ -6,4 +6,5 @@ export enum MapItemType {
     PinkLines = 'pinkLines',
     BlueLines = 'blueLines',
     OKN = 'okn',
+    Population = 'population',
 }