earth-map-3d-react 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +81 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,20 +1,14 @@
|
|
|
1
|
-
<div align=center>
|
|
2
|
-
|
|
3
|
-
[<img height="100px" src="https://raw.githubusercontent.com/ngvtuan/earth-map-3d-react/refs/heads/main/public/lumera.svg"/>](https://lumera.io/)
|
|
4
|
-
|
|
5
|
-
</div>
|
|
6
|
-
|
|
7
1
|
<p align=center>
|
|
8
|
-
<b>
|
|
2
|
+
<b>World Map in 3D</b>
|
|
9
3
|
</p>
|
|
10
4
|
|
|
11
5
|
---
|
|
12
6
|
|
|
13
|
-
|
|
7
|
+
# What is World Map in 3D？
|
|
14
8
|
|
|
15
|
-
|
|
9
|
+
A component for viewing the Earth in 3D. (World Map in 3D).
|
|
16
10
|
|
|
17
|
-
|
|
11
|
+
# Installation
|
|
18
12
|
|
|
19
13
|
### NPM
|
|
20
14
|
|
|
@@ -29,6 +23,83 @@ npm i earth-map-3d-react
|
|
|
29
23
|
yarn add earth-map-3d-react
|
|
30
24
|
```
|
|
31
25
|
|
|
26
|
+
# Usage
|
|
27
|
+
|
|
28
|
+
use in typescript file
|
|
29
|
+
|
|
30
|
+
```typescript
|
|
31
|
+
import { NetworkOverview, NodeData, EdgeData } from 'earth-map-3d-react';
|
|
32
|
+
|
|
33
|
+
const nodes: NodeData[] = [
|
|
34
|
+
{ id: 1, lat: 40.7128, lng: -74.0060, name: 'New York', country: 'USA', countryCode: 'us' },
|
|
35
|
+
{ id: 2, lat: 51.5074, lng: -0.1278, name: 'London', country: 'UK', countryCode: 'gb' },
|
|
36
|
+
{ id: 3, lat: 35.6895, lng: 139.6917, name: 'Tokyo', country: 'Japan', countryCode: 'jp' },
|
|
37
|
+
{ id: 4, lat: -33.8688, lng: 151.2093, name: 'Sydney', country: 'Australia', countryCode: 'au' },
|
|
38
|
+
{ id: 5, lat: 37.7749, lng: -122.4194, name: 'San Francisco', country: 'USA', countryCode: 'us' },
|
|
39
|
+
];
|
|
40
|
+
|
|
41
|
+
const edges: EdgeData[] = [
|
|
42
|
+
{ from: 1, to: 2 },
|
|
43
|
+
{ from: 1, to: 3 },
|
|
44
|
+
{ from: 2, to: 4 },
|
|
45
|
+
{ from: 3, to: 5 },
|
|
46
|
+
{ from: 4, to: 5 },
|
|
47
|
+
];
|
|
48
|
+
|
|
49
|
+
const countries: CountryData[] = Object.values(
|
|
50
|
+
nodes.reduce((acc: Record<string, { code: string; count: number; sumLat: number; sumLng: number; country: string }>, node) => {
|
|
51
|
+
const code = node.countryCode;
|
|
52
|
+
if (!acc[code]) {
|
|
53
|
+
acc[code] = { code, count: 0, sumLat: 0, sumLng: 0, country: node.country };
|
|
54
|
+
}
|
|
55
|
+
acc[code].count += 1;
|
|
56
|
+
acc[code].sumLat += node.lat;
|
|
57
|
+
acc[code].sumLng += node.lng;
|
|
58
|
+
return acc;
|
|
59
|
+
}, {})
|
|
60
|
+
).map(({ code, country, count, sumLat, sumLng }) => ({
|
|
61
|
+
code,
|
|
62
|
+
country,
|
|
63
|
+
count,
|
|
64
|
+
avgLat: sumLat / count,
|
|
65
|
+
avgLng: sumLng / count,
|
|
66
|
+
}));
|
|
67
|
+
|
|
68
|
+
const countryEdges: CountryEdgeData[] = edges
|
|
69
|
+
.map((edge) => {
|
|
70
|
+
const fromNode = nodes.find((n) => n.id === edge.from);
|
|
71
|
+
const toNode = nodes.find((n) => n.id === edge.to);
|
|
72
|
+
return { fromCode: fromNode?.countryCode || '', toCode: toNode?.countryCode || '' };
|
|
73
|
+
})
|
|
74
|
+
.filter((edge) => edge.fromCode && edge.toCode && edge.fromCode !== edge.toCode)
|
|
75
|
+
.reduce((acc: CountryEdgeData[], edge) => {
|
|
76
|
+
if (!acc.some((e) =>
|
|
77
|
+
(e.fromCode === edge.fromCode && e.toCode === edge.toCode) ||
|
|
78
|
+
(e.fromCode === edge.toCode && e.toCode === edge.fromCode)
|
|
79
|
+
)) {
|
|
80
|
+
acc.push(edge);
|
|
81
|
+
}
|
|
82
|
+
return acc;
|
|
83
|
+
}, []);
|
|
84
|
+
|
|
85
|
+
function App() {
|
|
86
|
+
return (
|
|
87
|
+
<div className="App">
|
|
88
|
+
<h1 style={{ textAlign: 'center' }}>Network Overview</h1>
|
|
89
|
+
<NetworkOverview
|
|
90
|
+
countryEdges={countryEdges}
|
|
91
|
+
countries={countries}
|
|
92
|
+
fov={80}
|
|
93
|
+
badgeBg="red"
|
|
94
|
+
/>
|
|
95
|
+
</div>
|
|
96
|
+
);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
export default App;
|
|
100
|
+
|
|
101
|
+
```
|
|
102
|
+
|
|
32
103
|
## Issues
|
|
33
104
|
|
|
34
105
|
Please, open an [issue](https://github.com/ngvtuan/earth-map-3d-react/issues) following one of the issues templates. We will do our best to fix them.
|