asb_cloud_front/src/pages/Deposit.jsx

import { Map, Overlay } from 'pigeon-maps'
import { Link } from 'react-router-dom'
import { useState, useEffect, memo } from 'react'

import { PointerIcon } from '../components/icons'
import LoaderPortal from '../components/LoaderPortal'
import { ClusterService } from '../services/api'
import { invokeWebApiWrapperAsync } from '../components/factory'

const defaultViewParams = { center: [60.81226, 70.0562], zoom: 5 }

const calcViewParams = (clusters) => {
  if ((clusters?.length ?? 0) <= 0)
    return defaultViewParams

  const center = clusters.reduce((sum, cluster) => {
    sum[0] += (cluster.latitude / clusters.length)
    sum[1] += (cluster.longitude / clusters.length)
    return sum
  }, [0, 0])

  const maxDeg = clusters.reduce((max, cluster) => {
    const dLatitude = Math.abs(center[0] - cluster.latitude)
    const dLongitude = Math.abs(center[1] - cluster.longitude)
    const d = dLatitude > dLongitude ? dLatitude : dLongitude
    return d > max ? d : max
  }, 0)

  // zoom max = 20 (too close)
  // zoom min = 1 (mega far)
  // 4 - full Russia (161.6 deg)
  // 13.5 - Khanty-Mansiysk
  const zoom = Math.min(Math.max(5, 5 + 5 / (maxDeg + 0.5)), 15)

  return { center, zoom }
}

export const Deposit = memo(() => {
  const [clustersData, setClustersData] = useState([])
  const [showLoader, setShowLoader] = useState(false)
  const [viewParams, setViewParams] = useState(defaultViewParams)

  useEffect(() => invokeWebApiWrapperAsync(
    async () => {
      const data = await ClusterService.getClusters()
      setClustersData(data)
      setViewParams(calcViewParams(data))
    },
    setShowLoader,
    `Не удалось загрузить список кустов`
  ), [])

  return (
    <LoaderPortal show={showLoader}>
      <div className={'h-100vh'}>
        <Map {...viewParams}>
          {clustersData.map(cluster =>
            <Overlay
              width={32}
              anchor={[cluster.latitude, cluster.longitude]}
              key={`${cluster.latitude}  ${cluster.longitude}`}
            >
              <Link to={`/cluster/${cluster.id}`}>
                <PointerIcon state={'active'} width={48} height={59} />
                <span>{cluster.caption}</span>
              </Link>
            </Overlay>
          )}
        </Map>
      </div>
    </LoaderPortal>
  )
})

export default Deposit