forked from ddrilling/asb_cloud_front
71 lines
2.1 KiB
JavaScript
71 lines
2.1 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'
|
||
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>
|
||
);
|
||
}
|