asb_cloud_front/src/pages/Deposit.jsx

import { Map, Overlay } from "pigeon-maps"
import pointer from '../images/pointer.svg'
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
  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)
  const markers = clustersData.map(cluster =>
    <Overlay  
      width={32} 
      anchor={[cluster.latitude, cluster.longitude]} 
      key={`${cluster.latitude}  ${cluster.longitude}`}>
        <Link to={`/cluster/${cluster.id}/all`}>
          <img width={40} src={pointer} alt="+"/>
          <span>{cluster.caption}</span>
        </Link>
    </Overlay >)

  return (
    <LoaderPortal show={showLoader}>
      <div className={'h-100vh'}>
        <Map {...viewParams}>
          {markers}
        </Map>
      </div>
    </LoaderPortal>
  );
}