pezkuwichain/pezkuwi-telemetry
1
0
Fork 0
mirror of https://github.com/pezkuwichain/pezkuwi-telemetry.git synced 2026-06-19 06:31:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use a more accurate map, fix node positions

Browse Source
This commit is contained in:
maciejhirsz
2018-07-19 12:40:33 +02:00
parent 80f0eabcc9
commit ff6495fef9
3 changed files with 6 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/assets/world-map.svg
-6
View File
File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 20 KiB

packages/frontend/src/components/Chain.css
+1 -1
View File
@@ -44,7 +44,7 @@
.Chain-map { .Chain-map {
min-width: 1350px; min-width: 1350px;
background: url('../assets/world-map.svg') no-repeat; background: url('../assets/flat-map-mini.svg') no-repeat;
background-size: contain; background-size: contain;
background-position: center; background-position: center;
position: absolute; position: absolute;
packages/frontend/src/components/Chain.tsx
+5 -11
View File
@@ -9,7 +9,7 @@ import blockTimeIcon from '../icons/history.svg';
import lastTimeIcon from '../icons/watch.svg'; import lastTimeIcon from '../icons/watch.svg';
import worldIcon from '../icons/globe.svg'; import worldIcon from '../icons/globe.svg';
const MAP_RATIO = 495 / 266; // width / height const MAP_RATIO = 2;
const HEADER = 148; const HEADER = 148;
import './Chain.css'; import './Chain.css';
@@ -112,17 +112,9 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
private renderMap() { private renderMap() {
return ( return (
<div className="Chain-map"> <div className="Chain-map">
{
// Debug rect
// <div style={{ position: 'absolute', background: 'rgba(0,255,0,0.5)', ...this.state.map}} />
}
{ {
this.nodes().map((node) => { this.nodes().map((node) => {
const location = node.location || [0, 0, ''] as Types.NodeLocation; const location = node.location || [0, 0, ''] as Types.NodeLocation;
// const location = [51.4825891, -0.0164137] as Types.NodeLocation; // Greenwich
// const location = [52.2330653, 20.921111] as Types.NodeLocation; // Warsaw
// const location = [48.8589507, 2.2770201] as Types.NodeLocation; // Paris
// const location = [36.7183391, -4.5193071]as Types.NodeLocation; // Malaga
const { left, top } = this.pixelPosition(location[0], location[1]); const { left, top } = this.pixelPosition(location[0], location[1]);
@@ -155,8 +147,10 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
private pixelPosition(lat: Types.Latitude, lon: Types.Longitude): Node.PixelPosition { private pixelPosition(lat: Types.Latitude, lon: Types.Longitude): Node.PixelPosition {
const { map } = this.state; const { map } = this.state;
const left = Math.round(((lon + 180) / 360) * map.width + map.left) - 35; // Longitude ranges -180 (west) to +180 (east)
const top = Math.round(((-lat + 90) / 180) * map.height + map.top) + 4; // Latitude ranges +90 (north) to -90 (south)
const left = Math.round(((180 + lon) / 360) * map.width + map.left);
const top = Math.round(((90 - lat) / 180) * map.height + map.top);
return { left, top } return { left, top }
} }