From 6f037d7935e29d2a537972125706015173cbe615 Mon Sep 17 00:00:00 2001
From: Alexander Chabin <nibach@ya.ru>
Date: Fri, 21 Jul 2023 18:30:37 +0500
Subject: [PATCH] Add mainpage widget with map

---
 .../Card/CardDynamic/CardMap.module.css       | 23 +++++++++++++++++++
 .../MainPage/Card/CardDynamic/CardMap.tsx     | 21 +++++++++++++++++
 client/components/MainPage/MainPage.tsx       |  3 +++
 .../MainContainer/MapMainContainer.module.css |  2 +-
 .../Map/MainContainer/MapMainContainer.tsx    | 10 ++++----
 5 files changed, 54 insertions(+), 5 deletions(-)
 create mode 100644 client/components/MainPage/Card/CardDynamic/CardMap.module.css
 create mode 100644 client/components/MainPage/Card/CardDynamic/CardMap.tsx

diff --git a/client/components/MainPage/Card/CardDynamic/CardMap.module.css b/client/components/MainPage/Card/CardDynamic/CardMap.module.css
new file mode 100644
index 00000000..be3055d7
--- /dev/null
+++ b/client/components/MainPage/Card/CardDynamic/CardMap.module.css
@@ -0,0 +1,23 @@
+.CardMap {
+}
+
+.CardMap,
+.CardMap__Widget,
+.CardMap__NonClick {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+}
+
+.CardMap__Widget {
+    z-index: -1;
+    overflow: hidden;
+    pointer-events: none;
+}
+
+.CardMap__Widget * {
+    pointer-events: none;
+}
diff --git a/client/components/MainPage/Card/CardDynamic/CardMap.tsx b/client/components/MainPage/Card/CardDynamic/CardMap.tsx
new file mode 100644
index 00000000..e114cd85
--- /dev/null
+++ b/client/components/MainPage/Card/CardDynamic/CardMap.tsx
@@ -0,0 +1,21 @@
+import classNames from 'classnames/bind';
+
+import { Map as MapComponent } from 'components/Map';
+
+import styles from './CardMap.module.css';
+
+const cn = classNames.bind(styles);
+
+export function CardMap() {
+    return (
+        <div className={cn(styles.CardMap)}>
+            <div className={cn(styles.CardMap__Widget)}>
+                <MapComponent
+                    zoom={16}
+                    showControls={false}
+                />
+            </div>
+            <div className={cn(styles.CardMap__NonClick)}></div>
+        </div>
+    )
+}
diff --git a/client/components/MainPage/MainPage.tsx b/client/components/MainPage/MainPage.tsx
index d72bdb8b..7865ece5 100644
--- a/client/components/MainPage/MainPage.tsx
+++ b/client/components/MainPage/MainPage.tsx
@@ -6,6 +6,7 @@ import { MainPageTypes } from './MainPage.types';
 import { Card } from './Card/Card';
 import { CardTrafficJams } from './Card/CardDynamic/CardTrafficJams';
 import { CardTransportA11y } from './Card/CardDynamic/CardTransportA11y';
+import { CardMap } from './Card/CardDynamic/CardMap';
 
 import Logo from './Logo.svg';
 
@@ -21,6 +22,8 @@ export function MainPage({ cards, cardsDynamicData, marqueeItems }: MainPageType
                 return <CardTransportA11y {...cardsDynamicData.a11yTransportCounters} />
             case 'traffic-jams':
                 return <CardTrafficJams score={cardsDynamicData.trafficJams} />
+            case 'map':
+                return <CardMap  />
         }
     }
 
diff --git a/client/components/Map/MainContainer/MapMainContainer.module.css b/client/components/Map/MainContainer/MapMainContainer.module.css
index e71abf72..4a30cdeb 100644
--- a/client/components/Map/MainContainer/MapMainContainer.module.css
+++ b/client/components/Map/MainContainer/MapMainContainer.module.css
@@ -1,4 +1,4 @@
 .Map {
-    width: 100vw;
+    width: 100%;
     height: 100%;
 }
diff --git a/client/components/Map/MainContainer/MapMainContainer.tsx b/client/components/Map/MainContainer/MapMainContainer.tsx
index e2337a9e..9967e406 100644
--- a/client/components/Map/MainContainer/MapMainContainer.tsx
+++ b/client/components/Map/MainContainer/MapMainContainer.tsx
@@ -16,7 +16,7 @@ import 'leaflet/dist/leaflet.css';
 
 const cn = classNames.bind(styles);
 
-function MapMainContainer() {
+function MapMainContainer({ zoom = 16, showControls = true }) {
     const position: [number, number] = COORDS_EKATERINBURG;
 
     const [sidebar, setSidebar] = useState<React.ReactElement>(null);
@@ -39,7 +39,7 @@ function MapMainContainer() {
             center={position}
             attributionControl={null}
             zoomControl={false}
-            zoom={16}
+            zoom={zoom}
             zoomDelta={0.6}
             scrollWheelZoom
             doubleClickZoom={false}
@@ -47,8 +47,10 @@ function MapMainContainer() {
         >
             <TileLayer url="https://tiles.ekaterinburg.io/styles/basic-white/{z}/{x}/{y}@2x.png" />
 
-            <MapLocation />
-            <MapZoomControl position="bottomright" />
+            {showControls && <>
+                <MapLocation />
+                <MapZoomControl position="bottomright" />
+            </>}
 
             <MapTransport />