Use a more accurate map, fix node positions

packages/frontend/src/assets/world-map.svg

@@ -1,6 +0,0 @@
-<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" height="265.7" width="494.7" xmlns:xlink="http://www.w3.org/1999/xlink">
-<g stroke-linejoin="bevel" stroke-width="0.25" stroke="#000">
-<use stroke-width="1.5" xlink:href="#a"/>
-<g id="a" fill="#bcbec0"><path d="m275.9 201.8-1.4 1.46h-2.36v-2.15l1.83-1.18h1.93v1.87zm4.05-6.3v2.12l-1.8-1.08v-1.65h1.8v-5.97h-4.6l-10.94 7.33-2.69-3.09v6.07h-6.65l3.86 10.57h12.67l9.75-11.28 0.44-3.05-1.84 0.03zm-171.6-119.4 2.52-1.719h3.04l-2.51 1.719h-3.05zm22.97-9.127-3.22 2.792h-7.46l-2.31 1.582h1.78l-2.48 1.692h-1.77l2.47-1.692h-4.87l-2.11 1.64-2.15 0.215 0.43-3.705h-1.66l-1.94 1.289-3.6 5.315h-2.12l4.08-6.604 4.81-1.029-0.27-0.903-3.17-0.108-1.5-0.913-1.88 0.913h-2.2l0.9-1.945-4.551-2.082h-38.81l-12.78 13.48v10.36l4.666 4.667 16.32 2.098 2.177 3.302 4.59-0.161 3.788 7.44 7.058-8.861 16.78 0.053 1.11 8.388 2.66 0.07 0.07-10.44 27.16-23.22 1.85-0.32 1.05-3.307h-2.9zm16.06-1.435h9.48l-1.97-3.138-1.78-0.425v-2.251zm-70.28 50.76-3.657-7.88 3.036-3.81-3.787-7.442-4.59 0.161-2.177-3.301-16.32-2.098 0.031 0.032 0.695 7.348 5.02 9.5 2.057-1.59-3.959-8.441v-4.751h2.335l0.091 4.419 7.5 17.62 12.23 5.1 3.052-0.81 2.686 2.74 1.338-2.38h2.818l-0.402-3.09h2.415l3.141-2.34 0.133-3.41-3.435-0.06-2.731 4.48zm135.4-76.39 4.54-2.209v-0.622l-2.25-2.282-3.15 1.046-3.78-0.08-0.8 1.09-2.15-0.05v2.02zm40.41 47.95 0.01-2.144-2.43-0.064-0.02 1.58zm-92.08-68.56v2.26l11.28 0.161 2.89 4.987v4.51l-5.41 3.073 0.16 6.12 3.4 3.437h4.02l6.14-6.489 8.67-2.557 3.25-2.489 6.56-0.405 4.59-1.355 8.65-13.75 5.33-1.09 1.88-1.89-15.37-1.546-13.28 1.546h-16.08l-9.27 3.221zm261.6 87.05-1.31-1.37-2.15 3.06 2.15 2.01zm-20.64-37.93 0.43-2.416-4.51-0.725-1.72-2.819h-8.59l-17.56-4.348-1.93 4.348-7.14-2.174-5.33 4.06 17.36 10.14 20.08 0.215 2.42-4.924zm3.81 45.98-2.58 0.57v1.52l1.05 1.27 1.53-1.91zm-9.61-51.94 1.72 2.819 4.51 0.725-0.43 2.416-6.48 1.357-2.43 4.924-20.08-0.215-17.36-10.14-7.51 5.725 1.25 5.811-7.52 2.793 2.15 5.26 8 3.65 0.32 6.443 20.94 7.242 3.86-3.538 8.22 3.538-1.13 3.06 4.35 7.25 7.62-3.86 4.98 4.26 2.11-1.2 0.08 2.05 12.48-4.46 4.08-9.132-7.28-11.98 3.74-4.079h-4.3l-1.38 0.893-2.7-4.435 3.44-3.007 2.36 4.504 3.31-2.277 6.35-4.374v-8.483l-10.52-2.684-7.73-7.571h-7.51l1.71 6.067zm43.39 12.76 2.94-0.04 1.25-2.134-6.53-2.738 0.13 5.395 1.29 0.765zm-8.12 12.47-0.48 1.659 6.47-0.955 0.5 2.498 1.47-0.624 0.16-1.966 4.34-1.115-0.23-5.673-1.97-3.439-1.96-0.568 1.12 5.154-4.01 3.637zm-1.14 3.202 2.34-0.295 0.76 1.128-0.84 2.657zm6.24-1.1-1.13 2.053-1.49-1.691zm-7.08 35.04-3.55-0.37-1.29-1.61 1.29-2.96-1.28-2.84-2.34-0.05-0.57 5 3.31 3.99 3.88 0.49zm-11.18 8.87 1.57 0.31 2.79-2.32-0.06-1.9zm12.25 3.59v2.23l2.33-0.7-0.79-1.44 1.88-0.48-1.6-4.99-1.18 3.08h-3.86zm-6.87-11.13 1.66 1.63-0.54 1-1.34-1.31zm1.66 3.99 1.18 0.8 1.29-1.95-1.72-0.21zm4.4-2.04 1.62 2.09h1.77l-1.69-2.72zm0 1.76 0.91 1.59-0.73 0.97-1.28-1.93zm-1.93 1.61 0.83 1.25-0.83 1-0.95-1.16zm3.15 32.76 1.09 1.5 3.06-0.37v-1.13zm-24.59-17.64 0.15 4.32 2.46 4.3h7.82l3.87-4.94v-8.96l-2.79 0.29-2.26 4.27-7.57 1.69-1.63-0.99zm-5.56 11.28v-3.3l-12.89-13.37-4.41-1.69 14.93 20.33zm15.06 5.88 0.24 1.12-16.11-2.73 2.42-1.94 4.02 1.53 3.63-0.8zm10.3 0h-2.49l0.48 1.61h2.38l1-0.81zm-4.35 2.61 0.73 0.89h1.73l-0.6-1.29zm9.14-2.13-2.49 2.78 1.89 0.24 1.69-1.52zm-8.29-4.91 1.85-0.57-0.56-3.26 1.09-1.21 0.92 2.42 2.22 0.77v-1.74l-1.25-2.76 2.37-1.99-3.78 0.16-0.78-1.08 1.5-1.65 2.78 0.96 1.37-0.12 2.05-2.42-1.8-0.04-1.17 0.77-3.87-0.94-2.56 2.31 0.18 3.66-1.49 1.98zm13.89-5.19-0.43 1.51 4.19-0.43v-1.08zm0.97-9.75-1.4 1.38-0.53 3.44 1.93 0.47-0.43-3.05 1.12-1.4zm9.49 9.15-0.56-2.98-4.59 0.65zm-0.31 2.48 6.4 2.67 1.15 3.27-2.13 1.3 5.48 1.9v-10.79l-4.45-2.32-4.15 3.37-4.39-1.73-0.49 2.42zm-19.06-71.18-4.32-3.535-1.91 1.764 2.58 5.584 3.12-0.215zm-4.32-3.535-1.91-1.564 2.47-0.322-0.43-4.939-6.35 4.374 1.86 3.53 2.45 0.685zm-5.53 56.98-3.44 4.63-7.94 3.67 1.63 0.99 7.57-1.69 2.26-4.27 2.79-0.29v-3.28zm-26.32 0 1.38 4.48 5.68 4.84 0.44-1.72-5.36-7.92zm68.12 27.58 3.81-3.5 4.94 4.82 4.51 0.92-5.58-5.58 0.27-2.95-9.94-5.2v10.79zm10.46-5.78 2.01 1.2 3.47-1.95v-2.02zm2.8-5.67 4.05 2.9 1.62-0.55-4.11-2.45zm-84.29-42.84-4.35-7.25 1.12-3.06-2.52-1.08-3.38 2.43-1.59 10.99 2.51 2.1 0.96 5.02 1.77 0.53 1.27-1.59 2.36 2.66 1.31 4.86-0.31 5.02 2.03-3.98-3.65-13.16 2.47-1.79zm7.3 6.18 2.92 3.97-2.73 2.74h6.12v-1.56l-5.96-6.34-1.32-4.08-4.14-2.02-2.19 1.11v1.7l2.14 1.25v3.23zm-5.16 0v-3.23l-2.14-1.25-2.47 1.79 3.65 13.16-2.03 3.98-0.12 1.98 3.54 3 0.34 1.1 2.14-0.32-3.44-5.07 0.8-7.84 3.87 3.83v-3.21l3.94-3.95-2.92-3.97zm4.14 7.92v3.21l1.93 1.92 2.17-0.3 3.23-2.42v-3.62h-6.12zm1.37-9.11 5.96 6.34v5.18l-3.23 2.42 0.08 3.46 6.18-4.08-0.21-6.07-6.45-6.81 0.32-3.73 2.3-1.3-4.98-4.26-5.43 2.75 4.14 2.02zm-25.77-13.2-1.37 0.64 1.94 6.13 1.25-1.21 5.58 4.68 0.36-2.5-2.93-2.74-0.48-3.28-2.34 0.96zm2.01-0.42-3.38-0.84 0.47-2.12-0.97-0.336-2.07 3.296-11.37-4.306 0.03-3.632-2.84-0.984-0.32-6.443-2.48-1.13h-2.29l-3.4 2.416-0.09 2.057 2.06 1.167 0.98 4.021-4.47 4.114h-2.86v3.04l2.14 0.81v2.62l-3.86 1.03 0.33 0.39 3.19 1.01-1.49 1.53 1.41 1.83 2.53 0.3 0.45-2.1 1 0.01 8.13 23.38 5.16-3.17 0.8-9.4 11.77-11.37-1.94-6.13 1.37-0.64 2.01 2.68 2.34-0.96 0.48 3.28 2.93 2.74 1.23-8.49 3.38-2.43-5.69-2.458-3.86 3.538zm-17.29-7.938-0.03 Line truncated
-</g></g></svg>

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;

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<Chain.Props, Chain.State> {
   private renderMap() {
     return (
       <div className="Chain-map">
-      {
-        // Debug rect
-        // <div style={{ position: 'absolute', background: 'rgba(0,255,0,0.5)', ...this.state.map}} />
-      }
       {
         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<Chain.Props, Chain.State> {
   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 }
   }