Переработан вид страницы "Карта"

src/pages/Deposit/Map.jsx

@@ -1,13 +1,16 @@
 import { memo, useMemo, useCallback } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import { Map as PigeonMap, Overlay } from 'pigeon-maps'
-import { Popover, Badge } from 'antd'
+import { Popover, Button } from 'antd'
 
-import { useDepositList } from '@asb/context'
-import { PointerIcon } from '@components/icons'
+import { useDepositList, useLayoutProps } from '@asb/context'
 import { limitValue, withPermissions } from '@utils'
 
-import '@styles/index.css'
+import { ClusterMapIcon } from '@images/pages/deposit/ClusterMapIcon'
+import { ReactComponent as MapPointer } from '@images/pages/deposit/MapPointer.svg'
+import { ReactComponent as WellMapIcon } from '@images/pages/deposit/WellMapIcon.svg'
+
+import '@styles/pages/deposit_map.less'
 
 const zoomLimit = limitValue(5, 15)
 
@@ -39,18 +42,19 @@ const calcViewParams = (clusters) => {
 const Map = memo(() => {
     const deposits = useDepositList()
     const location = useLocation()
+    const { openWellTreeSelector } = useLayoutProps()
 
-    const makeDepositLinks = useCallback((clusters) => (
+    const makeClusterLinks = useCallback((wells) => (
         <div>
-            {clusters.map(cluster => (
+            {wells.map(well => (
                 <Link
-                    key={cluster.id}
+                    key={well.id}
                     to={{
-                        pathname: `/cluster/${cluster.id}`,
+                        pathname: `/well/${well.id}`,
                         state: { from: location.pathname }
                     }}
                 >
-                    <div>{cluster.caption}</div>
+                    <div>{well.caption}</div>
                 </Link>
             ))}
         </div>
@@ -61,31 +65,39 @@ const Map = memo(() => {
     return (
         <div className={'deposit-page'}>
             <PigeonMap {...viewParams}>
-                {deposits.map(deposit => {
-                    const anchor = [deposit.latitude, deposit.longitude]
-                    const links = makeDepositLinks(deposit.clusters)
+                {deposits.map(deposit => deposit.clusters.map(cluster => {
+                    const anchor = [cluster.latitude, cluster.longitude]
+                    const count = cluster.wells.length
+                    const title = `${deposit.caption} / ${cluster.caption}`
+                    const links = makeClusterLinks(cluster.wells)
 
                     return (
-                        <Overlay width={32} anchor={anchor} key={anchor.join(' ')}>
+                        <Overlay width={65} anchor={anchor} key={anchor.join(' ')}>
                             <Popover
                                 content={links}
                                 trigger={['click']}
                                 title={(
-                                    <Link to={{ pathname: `/deposit/${deposit.id}` }}>
-                                        {deposit.caption}
+                                    <Link to={{ pathname: `/cluster/${cluster.id}` }}>
+                                        {title}
                                     </Link>
                                 )}
                             >
-                                <div className={'pointer'}>
-                                    <Badge count={deposit.clusters.length}>
-                                        <PointerIcon state={'active'} width={48} height={59} />
-                                    </Badge>
+                                <div className={'pointer'} title={title}>
+                                    {count <= 1 ? (
+                                        <WellMapIcon />
+                                    ) : (
+                                        <ClusterMapIcon count={count} />
+                                    )}
                                 </div>
                             </Popover>
                         </Overlay>
                     )
-                })}
+                }))}
             </PigeonMap>
+            <button className={'dd-deposit-open-selector-btn'} onClick={openWellTreeSelector}>
+                <MapPointer />
+                <span>Выберите месторождение</span>
+            </button>
         </div>
     )
 })

src/styles/pages/deposit_map.less

@@ -0,0 +1,47 @@
+.deposit-page {
+    @bg-color: #232323;
+
+    height: 100vh;
+    overflow: hidden;
+
+    & .pigeon-tiles-box > .pigeon-tiles > * {
+        filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
+        background: @bg-color !important;
+    }
+
+    & .pigeon-attribution {
+        background: fade(@bg-color, 70%) !important;
+        color: white !important;
+    }
+
+    & .dd-deposit-open-selector-btn {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        padding: 10px 25px;
+        color: white;
+        font-weight: 700;
+        font-size: 16px;
+        font-style: normal;
+        position: absolute;
+        gap: 10px;
+        top: 35px;
+        right: 60px;
+        border: 1px solid #4A4A4A;
+        background: @bg-color;
+        border-radius: 6px;
+        box-sizing: border-box;
+        transition: all .1s ease-in-out;
+
+        &:hover {
+            color: @bg-color;
+            background: white;
+        }
+
+        &:active {
+            background: rgba(255,255,255,.6);
+            color: @bg-color;
+        }
+    }
+}