asb_cloud_front/src/pages/Deposit.jsx

import { Map, Overlay } from "pigeon-maps"
import { PointerIcon } from '../components/icons/PointerIcon'
import { Link } from "react-router-dom";
import LoaderPortal from '../components/LoaderPortal'
import { useState, useEffect } from "react";
import { ClusterService } from '../services/api'
import { invokeWebApiWrapperAsync } from "../components/factory"

const calcViewParams = (clusters) => {
  if ((!clusters) || clusters.length === 0)
    return { center: [60.81226, 70.0562], zoom: 5 }

  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
  let zoom = 5 + 5 / (maxDeg + 0.5)
  zoom = zoom < 5 ? 5 : zoom
  zoom = zoom > 15 ? 15 : zoom

  return { center, zoom }
}

export default function Deposit() {
  const [clustersData, setClustersData] = useState([])
  const [showLoader, setShowLoader] = useState(false)

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

  const viewParams = calcViewParams(clustersData)

  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}/all`}>
                <PointerIcon state={'active'} width={48} height={59}/>
                <span>{cluster.caption}</span>
              </Link>
            </Overlay >
          )}
        </Map>
      </div>
    </LoaderPortal>
  )
}