feat: Funding Geographic Visualisation

package.json

@@ -37,6 +37,8 @@
     "@loadable/component": "^5.15.3",
     "@react-hookz/web": "^23.0.0",
     "@react-pdf/renderer": "^3.1.14",
+    "@react-three/drei": "^9.92.3",
+    "@react-three/fiber": "^8.15.12",
     "@remirror/extension-node-formatting": "^2.0.13",
     "@remirror/pm": "^2.0.5",
     "@remirror/react": "^2.0.28",
@@ -91,6 +93,8 @@
     "serve": "^14.2.0",
     "serve-handler": "^6.1.5",
     "sort-by": "^1.2.0",
+    "three": "^0.159.0",
+    "three-globe": "^2.30.0",
     "turndown": "^7.1.2",
     "vite-plugin-package-version": "^1.0.2",
     "webln": "^0.3.2",

src/components/canvas/MapCanvas.tsx

@@ -0,0 +1,176 @@
+// import { OrbitControls as OC } from '@react-three/drei'
+import { Canvas } from '@react-three/fiber'
+import * as THREE from 'three'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
+import ThreeGlobe from 'three-globe'
+
+import countries from '../../../src/pages/map/custom.geo.json'
+import map from '../../../src/pages/map/map.json'
+import lines from '../../../src/pages/map/project_funding_lines.json'
+
+let renderer: any
+let scene: {
+  add: (arg0: ThreeGlobe) => void
+  background: any
+  fog: any
+  position: { x: number; y: number; z: number }
+}
+let camera: any
+let controls: any
+
+let mouseX = 0
+let mouseY = 0
+let windowHalfX = window.innerWidth / 2
+let windowHalfY = window.innerHeight / 2
+let Globe
+
+init()
+initGlobe()
+onWindowResize()
+animate()
+
+function init() {
+  renderer = new THREE.WebGLRenderer({ antialias: true })
+  renderer.setPixelRatio(window.devicePixelRatio)
+  renderer.setSize(window.innerWidth, window.innerHeight)
+  document.body.appendChild(renderer.domElement)
+
+  scene = new THREE.Scene()
+
+  const ambientLight = new THREE.AmbientLight(0xbbbbbb, 0.3)
+  scene.add(ambientLight)
+  scene.background = new THREE.Color(0x040d21)
+
+  camera = new THREE.PerspectiveCamera()
+  camera.aspect = window.innerWidth / window.innerHeight
+  camera.updateProjectionMatrix()
+
+  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8)
+  directionalLight.position.set(-800, 2000, 400)
+  camera.add(directionalLight)
+
+  const dlight1 = new THREE.DirectionalLight(0x7982f6, 1)
+  dlight1.position.set(-200, 500, 200)
+  camera.add(dlight1)
+
+  const dlight2 = new THREE.DirectionalLight(0x8566cc, 1)
+  dlight2.position.set(200, 500, 200)
+  camera.add(dlight2)
+
+  camera.position.z = 400
+  camera.position.x = 0
+  camera.position.y = 0
+
+  scene.add(camera)
+
+  scene.fog = new THREE.Fog(0x535ef3, 400, 2000)
+
+  controls = new OrbitControls(camera, renderer.domElement)
+  controls.enableDamping = true
+  controls.dynamicDampingFactor = 0.01
+  controls.enablePan = false
+  controls.minDistance = 400
+  controls.maxDistance = 500
+  controls.rotateSpeed = 0.8
+  controls.zoomSpeed = 1
+  controls.autoRotate = false
+
+  controls.minPolarAngle = Math.PI / 3.5
+  controls.maxPolarAngle = Math.PI - Math.PI / 3
+
+  window.addEventListener('resize', onWindowResize, false)
+  document.addEventListener('mousemove', onMouseMove)
+}
+
+function initGlobe() {
+  Globe = new ThreeGlobe({
+    waitForGlobeReady: true,
+    animateIn: true,
+  })
+
+    .hexPolygonsData(countries.features)
+    .hexPolygonResolution(4)
+    .hexPolygonMargin(0.7)
+    .showAtmosphere(true)
+    .atmosphereColor('#3a228a')
+    .atmosphereAltitude(0.5)
+
+  setTimeout(() => {
+    Globe.arcsData(lines.projects)
+      .arcColor((e) => {
+        return e.status ? '#00866D' : '#20ECC7'
+      })
+      .arcAltitude((e) => {
+        return e.arcAlt
+      })
+      .arcStroke((e) => {
+        return 0.5
+      })
+      .arcDashLength(0.9)
+      .arcDashGap(4)
+      .arcDashAnimateTime(1000)
+      .arcsTransitionDuration(1000)
+      .arcDashInitialGap((e) => Number(e.order))
+
+      .labelsData(map.countries)
+      .labelColor(() => '#20ECC7')
+
+      .labelDotRadius(0.5)
+      .labelSize((e) => {
+        return e.size
+      })
+      .labelText((e) => {
+        return e.city
+      })
+      .labelResolution(6)
+      .labelAltitude(0.01)
+
+      .pointsData(map.countries)
+      .pointAltitude(0.01)
+      .pointColor(() => '#20ECC7')
+      .pointRadius(0.05)
+      .pointsMerge(true)
+  }, 1000)
+
+  const globeMaterial = Globe.globeMaterial()
+  globeMaterial.color = new THREE.Color(0x3a228a)
+  globeMaterial.emissive = new THREE.Color(0x220038)
+  globeMaterial.emissiveIntensity = 0.1
+  globeMaterial.shininess = 0.7
+  scene.add(Globe)
+}
+
+function onMouseMove(event: { clientX: number; clientY: number }) {
+  mouseX = event.clientX - windowHalfX
+  mouseY = event.clientY - windowHalfY
+}
+
+function onWindowResize() {
+  camera.aspect = window.innerWidth / window.innerHeight
+  camera.updateProjectionMatrix()
+  windowHalfX = window.innerWidth / 1.5
+  windowHalfY = window.innerHeight / 1.5
+  renderer.setSize(window.innerWidth, window.innerHeight)
+}
+
+function animate() {
+  camera.position.x +=
+    Math.abs(mouseX) <= windowHalfX / 2
+      ? (mouseX / 2 - camera.position.x) * 0.005
+      : 0
+  camera.position.y += (-mouseY / 2 - camera.position.y) * 0.005
+  camera.lookAt(scene.position)
+  controls.update()
+  renderer.render(scene, camera)
+  requestAnimationFrame(animate)
+}
+
+function mapCanvas() {
+  return (
+    <Canvas>
+      <OrbitControls />
+    </Canvas>
+  )
+}
+
+export default mapCanvas

src/config/routes/routes.tsx

@@ -4,8 +4,8 @@ import { App } from '../../App'
 import { AppLayout } from '../../AppLayout'
 import { __production__, getPath, PathName } from '../../constants'
 import { ExternalAuthSuccess, FailedAuth } from '../../pages/auth'
-import { PrivacyPolicy, TermsAndConditions } from '../../pages/legal';
 import { NotAuthorized, NotFoundPage } from '../../pages/fallback'
+import { PrivacyPolicy, TermsAndConditions } from '../../pages/legal'
 import { ErrorBoundary } from './ErrorBoundary'
 import { renderPrivateRoute } from './PrivateRoute'
 
@@ -17,6 +17,7 @@ const Project = () => import('../../pages/projectView')
 const ProfilePage = () => import('../../pages/profile/Profile')
 const Badges = () => import('../../pages/badges/BadgesPage')
 const Landing = () => import('../../pages/landing')
+const Map = () => import('../../pages/map/MapPage')
 const AboutPage = () => import('../../pages/about/About')
 
 export const platformRoutes: RouteObject[] = [
@@ -336,6 +337,13 @@ export const platformRoutes: RouteObject[] = [
       return { Component: BadgesPage }
     },
   },
+  {
+    path: getPath('map'),
+    async lazy() {
+      const MapPage = await Map().then((m) => m.MapPage)
+      return { Component: MapPage }
+    },
+  },
   {
     path: getPath('landingPage'),
     async lazy() {

src/constants/config/routerPaths.ts

@@ -39,13 +39,14 @@ export enum PathName {
 
   badges = 'badges',
   about = 'about',
+  map = 'map',
   projectId = ':projectId',
   userId = ':userId',
   entryId = ':entryId',
   grantId = ':grantId',
 
   legalTerms = 'terms-and-conditions',
-  legalPrivacy = 'privacy-policy'
+  legalPrivacy = 'privacy-policy',
 }
 
 // @TODO: These definitions are currently a WIP.
@@ -128,10 +129,10 @@ const pathsMap = {
     `/${PathName.project}/${projectID}/${PathName.projectDashboard}/${PathName.dashboardNostr}`,
 
   badges: () => `/${PathName.badges}`,
-
+  map: () => `/${PathName.map}`,
   about: () => `/${PathName.about}`,
   legalTerms: () => `/${PathName.legalTerms}`,
-  legalPrivacy: () => `/${PathName.legalPrivacy}`
+  legalPrivacy: () => `/${PathName.legalPrivacy}`,
 }
 
 export type PathsMap = typeof pathsMap

src/pages/map/MapPage.tsx

@@ -0,0 +1,30 @@
+import { Button, Container, Text, VStack } from '@chakra-ui/react'
+import { useTranslation } from 'react-i18next'
+import { FaArrowLeft } from 'react-icons/fa'
+import { useNavigate } from 'react-router-dom'
+
+import MapCanvas from '../../components/canvas/MapCanvas'
+
+export const MapPage = () => {
+  const { t } = useTranslation()
+  const navigate = useNavigate()
+
+  return (
+    <Container maxWidth="5xl" pt={10}>
+      <Button
+        mt={4}
+        size="sm"
+        bg="neutral.0"
+        variant="outline"
+        gap={2}
+        onClick={() => navigate(-1)}
+        fontSize="sm"
+      >
+        <FaArrowLeft /> {t('Back')}
+      </Button>
+      <MapCanvas />
+    </Container>
+  )
+}
+
+export default MapPage

src/pages/map/map.json

@@ -0,0 +1,21 @@
+{
+  "type": "Map",
+  "countries": [
+    {
+      "text": "KE",
+      "size": 1.0,
+      "country": "Kenya",
+      "city": "Nairobi",
+      "lat": -1.2833,
+      "lng": 36.8167
+    },
+    {
+      "text": "GB",
+      "size": 1.0,
+      "country": "United Kingdom",
+      "city": "London",
+      "lat": 51.5,
+      "lng": -0.1167
+    }
+  ]
+}

src/pages/map/project_funding_lines.json

@@ -0,0 +1,16 @@
+{
+  "type": "Map",
+  "projects": [
+    {
+      "type": "project",
+      "order": 1,
+      "from": "KE",
+      "to": "GB",
+      "startLat": "-1.2833",
+      "startLng": "36.8167",
+      "endLat": "51.5",
+      "endLng": "-0.1167",
+      "arcAlt": 0.15
+    }
+  ]
+}