fix: use geojson types

Author: Laurensvdmaas

package-lock.json

@@ -10,6 +10,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "eslint . --fix",
+    "dev": "vite",
     "build": "vite build",
     "prettier": "npx prettier . --write",
     "prepare": "husky",
@@ -40,6 +41,11 @@
       "@semantic-release/github"
     ]
   },
+  "peerDependencies": {
+    "@chargetrip/frontend-utilities": "^1.4.1",
+    "d3-geo": "^3.0.1",
+    "three": "^0.133.1"
+  },
   "devDependencies": {
     "@eslint/js": "^9.16.0",
     "@types/d3-geo": "^3.0.2",
@@ -56,9 +62,7 @@
     "vite-plugin-glsl": "^1.4.1"
   },
   "dependencies": {
-    "@chargetrip/frontend-utilities": "^1.4.1",
-    "d3-geo": "^3.0.1",
-    "three": "^0.133.1",
+    "geojson": "^0.5.0",
     "ts-deepmerge": "^7.0.3"
   }
 }

package.json

@@ -18,9 +18,13 @@ export default class Bar {
 
   draw(): THREE.Mesh {
     const targetVector = new THREE.Vector3(0, 0, 0)
+
+    const [lng, lat] = this.config.location.geometry.coordinates;
+
+    if(!lng || !lat) throw Error("Invalid coordinates");
+
     const position = calculateVec3FromLatLon(
-      this.config.location.geometry.coordinates[0],
-      this.config.location.geometry.coordinates[1],
+      lng, lat,
       600,
     )
 

src/components/bar.ts

@@ -15,7 +15,7 @@ import dotsFragmentShader from '../shaders/dots.frag.glsl'
 export default class Globe {
   readonly config: GlobeConfig
 
-  isAnimating = true
+  // isAnimating = true
   #camera: THREE.PerspectiveCamera
 
   constructor(config: GlobeConfig, camera: THREE.PerspectiveCamera) {

src/components/globe.ts

@@ -36,9 +36,13 @@ export default class Marker {
       depthTest: false,
     })
 
+    const [lng, lat] = this.config.location.geometry.coordinates;
+
+    if(!lng || !lat) throw Error("Invalid coordinates.");
+
     const position = calculateVec3FromLatLon(
-      this.config.location.geometry.coordinates[0],
-      this.config.location.geometry.coordinates[1],
+      lng,
+      lat,
       600,
     )
 

src/components/marker.ts

@@ -3,6 +3,5 @@ import Arc from './components/arc'
 import Marker from './components/marker'
 import Bar from './components/bar'
 
-import { GeoJSONType } from './types/geojson'
 
-export { GlobeScene, Arc, Bar, Marker, GeoJSONType }
+export { GlobeScene, Arc, Bar, Marker }

src/index.ts

@@ -1,9 +1,9 @@
 import { Vector3 } from 'three'
-import type { GeoJSON } from './geojson'
+import type { Feature, Point } from 'geojson';
 
 export interface ArcConfig {
-  startLocation: GeoJSON
-  endLocation: GeoJSON
+  startLocation: Feature<Point>
+  endLocation: Feature<Point>
   startColor?: string
   startColorOpacity?: number
   endColor?: string

src/types/arc.ts

@@ -1,7 +1,7 @@
-import type { GeoJSON } from './geojson'
+import type { Feature, Point } from 'geojson';
 
 export interface BarConfig {
-  location: GeoJSON
+  location: Feature<Point>
   startColor?: string
   startColorOpacity?: number
   endColor?: string

src/types/bar.ts

@@ -1,7 +1,7 @@
-import type { GeoJSON } from './geojson'
+import type { Feature, Point } from 'geojson';
 
 export interface MarkerConfig {
-  location: GeoJSON
+  location: Feature<Point>
   color?: string
   size?: number
   circleRadius?: number