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 (
+
+ )
+}
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
case 'traffic-jams':
return
+ case 'map':
+ return
}
}
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(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() {
>
-
-
+ {showControls && <>
+
+
+ >}