diff --git a/packages/frontend/src/assets/world-map.svg b/packages/frontend/src/assets/world-map.svg deleted file mode 100644 index bd4a89b..0000000 --- a/packages/frontend/src/assets/world-map.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/packages/frontend/src/components/Chain.css b/packages/frontend/src/components/Chain.css index a10f18f..fb65c93 100644 --- a/packages/frontend/src/components/Chain.css +++ b/packages/frontend/src/components/Chain.css @@ -44,7 +44,7 @@ .Chain-map { min-width: 1350px; - background: url('../assets/world-map.svg') no-repeat; + background: url('../assets/flat-map-mini.svg') no-repeat; background-size: contain; background-position: center; position: absolute; diff --git a/packages/frontend/src/components/Chain.tsx b/packages/frontend/src/components/Chain.tsx index a6da4bc..40ebaa5 100644 --- a/packages/frontend/src/components/Chain.tsx +++ b/packages/frontend/src/components/Chain.tsx @@ -9,7 +9,7 @@ import blockTimeIcon from '../icons/history.svg'; import lastTimeIcon from '../icons/watch.svg'; import worldIcon from '../icons/globe.svg'; -const MAP_RATIO = 495 / 266; // width / height +const MAP_RATIO = 2; const HEADER = 148; import './Chain.css'; @@ -112,17 +112,9 @@ export class Chain extends React.Component { private renderMap() { return (
- { - // Debug rect - //
- } { this.nodes().map((node) => { 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]); @@ -155,8 +147,10 @@ export class Chain extends React.Component { private pixelPosition(lat: Types.Latitude, lon: Types.Longitude): Node.PixelPosition { const { map } = this.state; - const left = Math.round(((lon + 180) / 360) * map.width + map.left) - 35; - const top = Math.round(((-lat + 90) / 180) * map.height + map.top) + 4; + // Longitude ranges -180 (west) to +180 (east) + // 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 } }