From 82b9e69da14bb2809d9077dba5ff3cd8f4671976 Mon Sep 17 00:00:00 2001
From: Anton Akhatov <anton@gcor.ru>
Date: Tue, 26 Sep 2023 02:07:44 +0100
Subject: [PATCH] add population layer

---
 components/Layers/Filters.config.tsx       |  5 +++
 components/Layers/config.ts                |  4 ++
 components/Map/Map.tsx                     |  2 +
 components/Map/layers/PopulationSource.tsx | 50 ++++++++++++++++++++++
 types/Filters.types.ts                     |  1 +
 types/map-item.ts                          |  1 +
 6 files changed, 63 insertions(+)
 create mode 100644 components/Map/layers/PopulationSource.tsx

diff --git a/components/Layers/Filters.config.tsx b/components/Layers/Filters.config.tsx
index 9fa789c3..743ca255 100644
--- a/components/Layers/Filters.config.tsx
+++ b/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,
+    },
 };
diff --git a/components/Layers/config.ts b/components/Layers/config.ts
index d98e4a5f..034a51a1 100644
--- a/components/Layers/config.ts
+++ b/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;
diff --git a/components/Map/Map.tsx b/components/Map/Map.tsx
index 58debece..7b03aec8 100644
--- a/components/Map/Map.tsx
+++ b/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 />
         </>
     );
 }
diff --git a/components/Map/layers/PopulationSource.tsx b/components/Map/layers/PopulationSource.tsx
new file mode 100644
index 00000000..bf804012
--- /dev/null
+++ b/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>
+    );
+}
diff --git a/types/Filters.types.ts b/types/Filters.types.ts
index a0a4a4af..870cc5f2 100644
--- a/types/Filters.types.ts
+++ b/types/Filters.types.ts
@@ -14,6 +14,7 @@ export enum FilterType {
     DesignCode = 'designCode',
     DTP = 'dtp',
     Line = 'line',
+    Population = 'population',
 }
 
 export interface FilterConfigItem {
diff --git a/types/map-item.ts b/types/map-item.ts
index 4e958562..ecfcc27e 100644
--- a/types/map-item.ts
+++ b/types/map-item.ts
@@ -6,4 +6,5 @@ export enum MapItemType {
     PinkLines = 'pinkLines',
     BlueLines = 'blueLines',
     OKN = 'okn',
+    Population = 'population',
 }