feat: add map with peers to info page (#398)

* feat: fetch and process map data DB

* feat: add map

* feat: nodes-db should be sorted alphabetically by key

package-lock.json

@@ -23,6 +23,7 @@
         "buffer": "^6.0.3",
         "crypto": "npm:crypto-browserify",
         "crypto-browserify": "^3.12.0",
+        "dotted-map": "^2.2.3",
         "ethers": "^5.6.4",
         "file-saver": "^2.0.5",
         "formik": "2.2.9",
@@ -4702,6 +4703,37 @@
       "integrity": "sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==",
       "dev": true
     },
+    "node_modules/@turf/boolean-point-in-polygon": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-point-in-polygon/-/boolean-point-in-polygon-6.5.0.tgz",
+      "integrity": "sha512-DtSuVFB26SI+hj0SjrvXowGTUCHlgevPAIsukssW6BG5MlNSBQAo70wpICBNJL6RjukXg8d2eXaAWuD/CqL00A==",
+      "dependencies": {
+        "@turf/helpers": "^6.5.0",
+        "@turf/invariant": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/helpers": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-6.5.0.tgz",
+      "integrity": "sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw==",
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
+    "node_modules/@turf/invariant": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/invariant/-/invariant-6.5.0.tgz",
+      "integrity": "sha512-Wv8PRNCtPD31UVbdJE/KVAWKe7l6US+lJItRR/HOEW3eh+U/JwRCSUl/KZ7bmjM/C+zLNoreM2TU6OoLACs4eg==",
+      "dependencies": {
+        "@turf/helpers": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
     "node_modules/@types/aria-query": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz",
@@ -8635,6 +8667,15 @@
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
       "dev": true
     },
+    "node_modules/dotted-map": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/dotted-map/-/dotted-map-2.2.3.tgz",
+      "integrity": "sha512-8hyOOHHLLVCcCisM3yb9hqp+3bJ7TSMcr1SfrUw8Wxp5UMqih35jIvUyagweCooJbz/EH1nC9GGuPysh7+YlAg==",
+      "dependencies": {
+        "@turf/boolean-point-in-polygon": "^6.0.1",
+        "proj4": "^2.6.1"
+      }
+    },
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -13913,6 +13954,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mgrs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/mgrs/-/mgrs-1.0.0.tgz",
+      "integrity": "sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA=="
+    },
     "node_modules/micromatch": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
@@ -16307,6 +16353,15 @@
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
     },
+    "node_modules/proj4": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/proj4/-/proj4-2.8.0.tgz",
+      "integrity": "sha512-baC+YcD4xsSqJ+CpCZljj2gcQDhlKb+J+Zjv/2KSBwWNjk4M0pafgQsE+mWurd84tflMIsP+7j7mtIpFDHzQfQ==",
+      "dependencies": {
+        "mgrs": "1.0.0",
+        "wkt-parser": "^1.3.1"
+      }
+    },
     "node_modules/promise": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/promise/-/promise-8.1.0.tgz",
@@ -19965,6 +20020,11 @@
       "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
       "dev": true
     },
+    "node_modules/wkt-parser": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/wkt-parser/-/wkt-parser-1.3.2.tgz",
+      "integrity": "sha512-A26BOOo7sHAagyxG7iuRhnKMO7Q3mEOiOT4oGUmohtN/Li5wameeU4S6f8vWw6NADTVKljBs8bzA8JPQgSEMVQ=="
+    },
     "node_modules/word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -23491,6 +23551,28 @@
       "integrity": "sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==",
       "dev": true
     },
+    "@turf/boolean-point-in-polygon": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/boolean-point-in-polygon/-/boolean-point-in-polygon-6.5.0.tgz",
+      "integrity": "sha512-DtSuVFB26SI+hj0SjrvXowGTUCHlgevPAIsukssW6BG5MlNSBQAo70wpICBNJL6RjukXg8d2eXaAWuD/CqL00A==",
+      "requires": {
+        "@turf/helpers": "^6.5.0",
+        "@turf/invariant": "^6.5.0"
+      }
+    },
+    "@turf/helpers": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-6.5.0.tgz",
+      "integrity": "sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw=="
+    },
+    "@turf/invariant": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/invariant/-/invariant-6.5.0.tgz",
+      "integrity": "sha512-Wv8PRNCtPD31UVbdJE/KVAWKe7l6US+lJItRR/HOEW3eh+U/JwRCSUl/KZ7bmjM/C+zLNoreM2TU6OoLACs4eg==",
+      "requires": {
+        "@turf/helpers": "^6.5.0"
+      }
+    },
     "@types/aria-query": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.2.tgz",
@@ -26622,6 +26704,15 @@
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
       "dev": true
     },
+    "dotted-map": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/dotted-map/-/dotted-map-2.2.3.tgz",
+      "integrity": "sha512-8hyOOHHLLVCcCisM3yb9hqp+3bJ7TSMcr1SfrUw8Wxp5UMqih35jIvUyagweCooJbz/EH1nC9GGuPysh7+YlAg==",
+      "requires": {
+        "@turf/boolean-point-in-polygon": "^6.0.1",
+        "proj4": "^2.6.1"
+      }
+    },
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -30564,6 +30655,11 @@
       "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
       "dev": true
     },
+    "mgrs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/mgrs/-/mgrs-1.0.0.tgz",
+      "integrity": "sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA=="
+    },
     "micromatch": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
@@ -32170,6 +32266,15 @@
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="
     },
+    "proj4": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/proj4/-/proj4-2.8.0.tgz",
+      "integrity": "sha512-baC+YcD4xsSqJ+CpCZljj2gcQDhlKb+J+Zjv/2KSBwWNjk4M0pafgQsE+mWurd84tflMIsP+7j7mtIpFDHzQfQ==",
+      "requires": {
+        "mgrs": "1.0.0",
+        "wkt-parser": "^1.3.1"
+      }
+    },
     "promise": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/promise/-/promise-8.1.0.tgz",
@@ -34945,6 +35050,11 @@
       "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
       "dev": true
     },
+    "wkt-parser": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/wkt-parser/-/wkt-parser-1.3.2.tgz",
+      "integrity": "sha512-A26BOOo7sHAagyxG7iuRhnKMO7Q3mEOiOT4oGUmohtN/Li5wameeU4S6f8vWw6NADTVKljBs8bzA8JPQgSEMVQ=="
+    },
     "word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",

package.json

@@ -40,6 +40,7 @@
     "buffer": "^6.0.3",
     "crypto": "npm:crypto-browserify",
     "crypto-browserify": "^3.12.0",
+    "dotted-map": "^2.2.3",
     "ethers": "^5.6.4",
     "file-saver": "^2.0.5",
     "formik": "2.2.9",
@@ -132,7 +133,8 @@
     "depcheck": "depcheck .",
     "lint": "eslint --fix \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --write \"src/**/*.ts\" \"src/**/*.tsx\"",
     "lint:check": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" && prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"",
-    "check:types": "tsc --project tsconfig.lib.json"
+    "check:types": "tsc --project tsconfig.lib.json",
+    "update-map-data": "node ./utils/update-map-data.js"
   },
   "files": [
     "lib",

src/assets/data/map-data.json

@@ -0,0 +1 @@
+"{\"points\":{\"6;0\":{\"x\":6.5,\"y\":0},\"16;0\":{\"x\":16.5,\"y\":0},\"18;0\":{\"x\":18.5,\"y\":0},\"19;0\":{\"x\":19.5,\"y\":0},\"20;0\":{\"x\":20.5,\"y\":0},\"21;0\":{\"x\":21.5,\"y\":0},\"24;0\":{\"x\":24.5,\"y\":0},\"26;0\":{\"x\":26.5,\"y\":0},\"27;0\":{\"x\":27.5,\"y\":0},\"28;0\":{\"x\":28.5,\"y\":0},\"29;0\":{\"x\":29.5,\"y\":0},\"30;0\":{\"x\":30.5,\"y\":0},\"31;0\":{\"x\":31.5,\"y\":0},\"37;0\":{\"x\":37.5,\"y\":0},\"38;0\":{\"x\":38.5,\"y\":0},\"39;0\":{\"x\":39.5,\"y\":0},\"40;0\":{\"x\":40.5,\"y\":0},\"41;0\":{\"x\":41.5,\"y\":0},\"42;0\":{\"x\":42.5,\"y\":0},\"43;0\":{\"x\":43.5,\"y\":0},\"44;0\":{\"x\":44.5,\"y\":0},\"45;0\":{\"x\":45.5,\"y\":0},\"60;0\":{\"x\":60.5,\"y\":0},\"68;0\":{\"x\":68.5,\"y\":0},\"72;0\":{\"x\":72.5,\"y\":0},\"73;0\":{\"x\":73.5,\"y\":0},\"74;0\":{\"x\":74.5,\"y\":0},\"75;0\":{\"x\":75.5,\"y\":0},\"76;0\":{\"x\":76.5,\"y\":0},\"77;0\":{\"x\":77.5,\"y\":0},\"78;0\":{\"x\":78.5,\"y\":0},\"79;0\":{\"x\":79.5,\"y\":0},\"80;0\":{\"x\":80.5,\"y\":0},\"81;0\":{\"x\":81.5,\"y\":0},\"82;0\":{\"x\":82.5,\"y\":0},\"83;0\":{\"x\":83.5,\"y\":0},\"84;0\":{\"x\":84.5,\"y\":0},\"85;0\":{\"x\":85.5,\"y\":0},\"86;0\":{\"x\":86.5,\"y\":0},\"87;0\":{\"x\":87.5,\"y\":0},\"88;0\":{\"x\":88.5,\"y\":0},\"89;0\":{\"x\":89.5,\"y\":0},\"90;0\":{\"x\":90.5,\"y\":0},\"91;0\":{\"x\":91.5,\"y\":0},\"92;0\":{\"x\":92.5,\"y\":0},\"93;0\":{\"x\":93.5,\"y\":0},\"94;0\":{\"x\":94.5,\"y\":0},\"95;0\":{\"x\":95.5,\"y\":0},\"96;0\":{\"x\":96.5,\"y\":0},\"98;0\":{\"x\":98.5,\"y\":0},\"5;1\":{\"x\":5,\"y\":0.8660254037844386},\"6;1\":{\"x\":6,\"y\":0.8660254037844386},\"7;1\":{\"x\":7,\"y\":0.8660254037844386},\"8;1\":{\"x\":8,\"y\":0.8660254037844386},\"9;1\":{\"x\":9,\"y\":0.8660254037844386},\"15;1\":{\"x\":15,\"y\":0.8660254037844386},\"16;1\":{\"x\":16,\"y\":0.8660254037844386},\"19;1\":{\"x\":19,\"y\":0.8660254037844386},\"20;1\":{\"x\":20,\"y\":0.8660254037844386},\"21;1\":{\"x\":21,\"y\":0.8660254037844386},\"22;1\":{\"x\":22,\"y\":0.8660254037844386},\"25;1\":{\"x\":25,\"y\":0.8660254037844386},\"28;1\":{\"x\":28,\"y\":0.8660254037844386},\"29;1\":{\"x\":29,\"y\":0.8660254037844386},\"30;1\":{\"x\":30,\"y\":0.8660254037844386},\"31;1\":{\"x\":31,\"y\":0.8660254037844386},\"32;1\":{\"x\":32,\"y\":0.8660254037844386},\"37;1\":{\"x\":37,\"y\":0.8660254037844386},\"38;1\":{\"x\":38,\"y\":0.8660254037844386},\"39;1\":{\"x\":39,\"y\":0.8660254037844386},\"40;1\":{\"x\":40,\"y\":0.8660254037844386},\"41;1\":{\"x\":41,\"y\":0.8660254037844386},\"42;1\":{\"x\":42,\"y\":0.8660254037844386},\"43;1\":{\"x\":43,\"y\":0.8660254037844386},\"44;1\":{\"x\":44,\"y\":0.8660254037844386},\"45;1\":{\"x\":45,\"y\":0.8660254037844386},\"59;1\":{\"x\":59,\"y\":0.8660254037844386},\"60;1\":{\"x\":60,\"y\":0.8660254037844386},\"61;1\":{\"x\":61,\"y\":0.8660254037844386},\"73;1\":{\"x\":73,\"y\":0.8660254037844386},\"75;1\":{\"x\":75,\"y\":0.8660254037844386},\"76;1\":{\"x\":76,\"y\":0.8660254037844386},\"77;1\":{\"x\":77,\"y\":0.8660254037844386},\"78;1\":{\"x\":78,\"y\":0.8660254037844386},\"79;1\":{\"x\":79,\"y\":0.8660254037844386},\"80;1\":{\"x\":80,\"y\":0.8660254037844386},\"81;1\":{\"x\":81,\"y\":0.8660254037844386},\"82;1\":{\"x\":82,\"y\":0.8660254037844386},\"83;1\":{\"x\":83,\"y\":0.8660254037844386},\"84;1\":{\"x\":84,\"y\":0.8660254037844386},\"85;1\":{\"x\":85,\"y\":0.8660254037844386},\"86;1\":{\"x\":86,\"y\":0.8660254037844386},\"87;1\":{\"x\":87,\"y\":0.8660254037844386},\"88;1\":{\"x\":88,\"y\":0.8660254037844386},\"89;1\":{\"x\":89,\"y\":0.8660254037844386},\"90;1\":{\"x\":90,\"y\":0.8660254037844386},\"91;1\":{\"x\":91,\"y\":0.8660254037844386},\"92;1\":{\"x\":92,\"y\":0.8660254037844386},\"93;1\":{\"x\":93,\"y\":0.8660254037844386},\"94;1\":{\"x\":94,\"y\":0.8660254037844386},\"95;1\":{\"x\":95,\"y\":0.8660254037844386},\"96;1\":{\"x\":96,\"y\":0.8660254037844386},\"97;1\":{\"x\":97,\"y\":0.8660254037844386},\"98;1\":{\"x\":98,\"y\":0.8660254037844386},\"99;1\":{\"x\":99,\"y\":0.8660254037844386},\"4;2\":{\"x\":4.5,\"y\":1.7320508075688772},\"5;2\":{\"x\":5.5,\"y\":1.7320508075688772},\"6;2\":{\"x\":6.5,\"y\":1.7320508075688772},\"7;2\":{\"x\":7.5,\"y\":1.7320508075688772},\"8;2\":{\"x\":8.5,\"y\":1.7320508075688772},\"9;2\":{\"x\":9.5,\"y\":1.7320508075688772},\"10;2\":{\"x\":10.5,\"y\":1.7320508075688772},\"11;2\":{\"x\":11.5,\"y\":1.7320508075688772},\"13;2\":{\"x\":13.5,\"y\":1.7320508075688772},\"14;2\":{\"x\":14.5,\"y\":1.7320508075688772},\"15;2\":{\"x\":15.5,\"y\":1.7320508075688772},\"16;2\":{\"x\":16.5,\"y\":1.7320508075688772},\"17;2\":{\"x\":17.5,\"y\":1.7320508075688772},\"19;2\":{\"x\":19.5,\"y\":1.7320508075688772},\"20;2\":{\"x\":20.5,\"y\":1.7320508075688772},\"22;2\":{\"x\":22.5,\"y\":1.7320508075688772},\"25;2\":{\"x\":25.5,\"y\":1.7320508075688772},\"27;2\":{\"x\":27.5,\"y\":1.7320508075688772},\"28;2\":{\"x\":28.5,\"y\":1.7320508075688772},\"30;2\":{\"x\":30.5,\"y\":1.7320508075688772},\"31;2\":{\"x\":31.5,\"y\":1.7320508075688772},\"32;2\":{\"x\":32.5,\"y\":1.7320508075688772},Line truncated

src/components/Map.tsx

@@ -1,9 +1,86 @@
-import { ReactElement, CSSProperties } from 'react'
+import { ReactElement, CSSProperties, useContext, useState, useEffect } from 'react'
+import type { Peer } from '@ethersphere/bee-js'
+import DottedMap, { DottedMapWithoutCountriesLib } from 'dotted-map/without-countries'
+import nodesDb from '../assets/data/nodes-db.json'
+import { Context } from '../providers/Bee'
+import mapData from '../assets/data/map-data.json'
 
 interface Props {
   style?: CSSProperties
 }
 
+interface MapRecord {
+  lat: number
+  lng: number
+}
+
+type MapDB = Record<string, MapRecord>
+
+const fullMapDb = nodesDb as unknown as MapDB
+const deduplicatedRecords = deduplicate(fullMapDb)
+
+function deduplicate(db: MapDB): MapRecord[] {
+  const noDuplicates: Record<string, MapRecord> = {}
+
+  Object.entries(fullMapDb).forEach(([key, record]) => {
+    noDuplicates[`${record.lat} ${record.lng}`] = record
+  })
+
+  return Object.values(noDuplicates)
+}
+
+function findIntersection(db: MapDB, peers: Peer[]): MapRecord[] {
+  const noDuplicates: Record<string, MapRecord> = {}
+  peers.forEach(({ address }) => {
+    const record = db[address]
+
+    if (record) noDuplicates[`${record.lat} ${record.lng}`] = record
+  })
+
+  return Object.values(noDuplicates)
+}
+
+function addPins(map: DottedMap, pins: MapRecord[], color: string) {
+  pins.forEach(({ lat, lng }) => {
+    map.addPin({ lat, lng, svgOptions: { color } })
+  })
+}
+
+const mapPrecomputed = new DottedMap({ map: JSON.parse(mapData) })
+addPins(mapPrecomputed, deduplicatedRecords, '#dd7200')
+
+const mapSvgOptions: DottedMapWithoutCountriesLib.SvgSettings = { shape: 'hexagon', radius: 0.21, color: '#dadada' }
+
 export default function Card({ style }: Props): ReactElement {
-  return <div style={Object.assign({}, style, { width: '100%', height: '380px', backgroundColor: '#f3f3f3' })}></div>
+  const { peers } = useContext(Context)
+  const [map, setMap] = useState<string>(mapPrecomputed.getSVG(mapSvgOptions))
+
+  useEffect(() => {
+    if (!peers) return
+
+    const points = findIntersection(fullMapDb, peers)
+    const mapNew = Object.create(mapPrecomputed)
+    addPins(mapNew, points, '#67BE68')
+    setMap(mapNew.getSVG(mapSvgOptions))
+  }, [peers])
+
+  return (
+    <div
+      style={Object.assign({}, style, {
+        width: '100%',
+        height: '380px',
+        backgroundColor: '#f3f3f3',
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      })}
+    >
+      <img
+        alt="world map"
+        src={`data:image/svg+xml;utf8,${encodeURIComponent(map)}`}
+        style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
+      />
+    </div>
+  )
 }

utils/update-map-data.js

@@ -0,0 +1,54 @@
+#!/usr/bin/env node
+
+const axios = require('axios')
+const fs = require('fs')
+const getMapJSON = require('dotted-map').getMapJSON
+
+const DATA_SOURCE = 'https://swarmscan-api.resenje.org/v1/network/dump'
+const DATA_DESTINATION = './src/assets/data/nodes-db.json'
+const MAP_HEIGHT = 50
+const MAP_DESTINATION = './src/assets/data/map-data.json'
+
+async function getData(url) {
+  const res = await axios.get(url)
+
+  return res.data
+}
+
+function processData(data) {
+  const db = new Map()
+  data.nodes.forEach(node => {
+    db.set(node.overlay, { lat: node.location.latitude, lng: node.location.longitude })
+  })
+
+  return Object.fromEntries([...db.entries()].sort())
+}
+
+function saveFile(db, path) {
+  return fs.writeFileSync(path, JSON.stringify(db, null, 2))
+}
+
+function preComputeMap() {
+  return getMapJSON({ height: MAP_HEIGHT, grid: 'diagonal' })
+}
+
+async function main() {
+  console.log('Fetching DB data')
+  const dataDump = await getData(DATA_SOURCE)
+
+  console.log('Processing DB data')
+  const db = processData(dataDump)
+
+  console.log('Saving DB data')
+  saveFile(db, DATA_DESTINATION)
+
+  console.log('Pre-computing the word map')
+  const map = preComputeMap()
+
+  console.log('Saving map data')
+  saveFile(map, MAP_DESTINATION)
+
+  console.log('Done')
+}
+
+main()