Add mainpage widget with map (#71)

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;
+}

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>
+    )
+}

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  />
         }
     }
 

client/components/Map/MainContainer/MapMainContainer.module.css

@@ -1,4 +1,4 @@
 .Map {
-    width: 100vw;
+    width: 100%;
     height: 100%;
 }

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,16 +39,18 @@ function MapMainContainer() {
             center={position}
             attributionControl={null}
             zoomControl={false}
-            zoom={16}
+            zoom={zoom}
             zoomDelta={0.6}
             scrollWheelZoom
             doubleClickZoom={false}
             className={cn(styles.Map)}
         >
             <TileLayer url="https://tiles.ekaterinburg.io/styles/basic-white/{z}/{x}/{y}@2x.png" />
 
-            <MapLocation />
-            <MapZoomControl position="bottomright" />
+            {showControls && <>
+                <MapLocation />
+                <MapZoomControl position="bottomright" />
+            </>}
 
             <MapTransport />