forked from ddrilling/asb_cloud_front
70 lines
1.9 KiB
JavaScript
70 lines
1.9 KiB
JavaScript
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'
|
|
|
|
const calcViewParams = (clusters) => {
|
|
if (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)
|
|
|
|
return {center, zoom: maxDeg*25}
|
|
}
|
|
|
|
export default function Deposit() {
|
|
const [clustersData, setClustersData] = useState([])
|
|
const [showLoader, setShowLoader] = useState(false)
|
|
|
|
const updateClusters = async()=>{
|
|
setShowLoader(true)
|
|
try{
|
|
const data = await ClusterService.getClusters()
|
|
setClustersData(data)
|
|
}catch{
|
|
//ignore
|
|
}
|
|
setShowLoader(false)
|
|
}
|
|
|
|
useEffect(()=>{updateClusters()}, [])
|
|
|
|
const viewParams = calcViewParams(clustersData)
|
|
|
|
return (
|
|
<LoaderPortal show={showLoader}>
|
|
<Map
|
|
height='100vh'
|
|
center={viewParams.center}
|
|
zoom={viewParams.zoom}
|
|
>
|
|
{clustersData.map(cluster =>
|
|
<Overlay
|
|
width={32}
|
|
anchor={[cluster.latitude, cluster.longitude]}
|
|
key={`${cluster.latitude} ${cluster.longitude}`}
|
|
>
|
|
<Link to={`/cluster/${cluster.id}`}>
|
|
<img width={40} src={pointer} alt="+"/>
|
|
<span>{cluster.name}</span>
|
|
</Link>
|
|
|
|
</Overlay >)}
|
|
</Map>
|
|
</LoaderPortal>
|
|
);
|
|
}
|