diff --git a/src/pages/Deposit/Map.jsx b/src/pages/Deposit/Map.jsx
index 911c137..6aaf591 100644
--- a/src/pages/Deposit/Map.jsx
+++ b/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) => (
- {clusters.map(cluster => (
+ {wells.map(well => (
-
{cluster.caption}
+
{well.caption}
))}
@@ -61,31 +65,39 @@ const Map = memo(() => {
return (
- {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 (
-
+
- {deposit.caption}
+
+ {title}
)}
>
-
-
-
-
+
+ {count <= 1 ? (
+
+ ) : (
+
+ )}
)
- })}
+ }))}
+
)
})
diff --git a/src/styles/pages/deposit_map.less b/src/styles/pages/deposit_map.less
new file mode 100644
index 0000000..6291307
--- /dev/null
+++ b/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;
+ }
+ }
+}