60 lines
1.8 KiB
HTML
60 lines
1.8 KiB
HTML
<head>
|
|
<style> body { margin: 0; } </style>
|
|
|
|
<script src="/react.production.min.js"></script>
|
|
<!-- <script src="//unpkg.com/react/umd/react.production.min.js"></script>-->
|
|
<script src="/react-dom.production.min.js"></script>
|
|
<!-- <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>-->
|
|
<!-- <script src="//unpkg.com/babel-standalone"></script>-->
|
|
<script src="/babel.js"></script>
|
|
|
|
<script src="/react-globe.js"></script>
|
|
<!-- <script src="//unpkg.com/react-globe.gl"></script>-->
|
|
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
|
|
<script src="/axios.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="globeViz"></div>
|
|
|
|
<script type="text/jsx">
|
|
// Gen random data
|
|
var data = {};
|
|
axios.get("http://localhost:3100/alerts").then(res => {
|
|
data = res.data;
|
|
console.log(data)
|
|
ReactDOM.render(
|
|
<Globe
|
|
globeImageUrl="/images/earth-night.jpg"
|
|
backgroundImageUrl="/images/night-sky.png"
|
|
// edges
|
|
arcsData={data.arc}
|
|
arcColor={(d) => [d.color[0], d.color[1]]}
|
|
arcDashLength={(d) => d.stroke - 0.1 + 0.3}
|
|
// arcDashLength={(d) => d.stroke - 0.1}
|
|
arcAltitudeAutoScale={0.5}
|
|
arcDashGap={(d) => 0.1 + (1 - (d.stroke - 0.1))}
|
|
arcDashAnimateTime={(d) => (1.1 - d.stroke) * 5000 + 2000}
|
|
arcStroke={0.4}
|
|
//arcCircularResolution={64}
|
|
// arcLabel={() => "test"}
|
|
// labels
|
|
labelsData={data.loc}
|
|
labelLat={(d) => d.lat}
|
|
labelLng={(d) => d.lng}
|
|
labelText={(d) => d.name}
|
|
// labelSize={(d) => 0.5 + d.size}
|
|
labelSize={0}
|
|
labelDotRadius={0.4}
|
|
// labelDotRadius={(d) => 0.5 + d.size}
|
|
labelColor={(d) => d.color}
|
|
labelResolution={2}
|
|
enablePointerInteraction={true}
|
|
/>,
|
|
document.getElementById('globeViz')
|
|
);
|
|
}).catch(err => alert(err))
|
|
|
|
|
|
</script>
|
|
</body> |