fix: lng lat order

Author: Laurensvdmaas

src/components/bar.ts

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

src/components/marker.ts

@@ -36,15 +36,11 @@ export default class Marker {
       depthTest: false,
     })
 
-    const [lng, lat] = this.config.location.geometry.coordinates;
+    const [lng, lat] = this.config.location.geometry.coordinates
 
-    if(!lng || !lat) throw Error("Invalid coordinates.");
+    if (!lng || !lat) throw Error('Invalid coordinates.')
 
-    const position = calculateVec3FromLatLon(
-      lng,
-      lat,
-      600,
-    )
+    const position = calculateVec3FromLatLon(lng, lat, 600)
 
     const mesh = new THREE.Mesh(geometry, material)
 

src/components/scene.ts

@@ -17,10 +17,10 @@ export default class GlobeScene {
 
   #renderer: THREE.WebGLRenderer
 
-  #markerMeshes: THREE.Mesh<THREE.PlaneGeometry,THREE.ShaderMaterial>[] = []
+  #markerMeshes: THREE.Mesh<THREE.PlaneGeometry, THREE.ShaderMaterial>[] = []
   #barMeshes: THREE.Mesh[] = []
   #dotSphereMesh: THREE.Mesh<THREE.BufferGeometry, THREE.ShaderMaterial> | null = null
-  #atmosphere: THREE.Mesh<THREE.IcosahedronGeometry,THREE.ShaderMaterial> | undefined
+  #atmosphere: THREE.Mesh<THREE.IcosahedronGeometry, THREE.ShaderMaterial> | undefined
 
   readonly globeConfig: GlobeConfig
   readonly container: HTMLCanvasElement
@@ -126,7 +126,8 @@ export default class GlobeScene {
   private animate(): void {
     const delta = this.#clock.getDelta()
 
-    if (!this.#atmosphere || !this.#atmosphere.material.uniforms.viewVector) throw Error('No atmosphere.')
+    if (!this.#atmosphere || !this.#atmosphere.material.uniforms.viewVector)
+      throw Error('No atmosphere.')
 
     this.#atmosphere.material.uniforms.viewVector.value = this.#camera.position
 

src/index.ts

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

src/types/arc.ts

@@ -1,5 +1,5 @@
 import { Vector3 } from 'three'
-import type { Feature, Point } from 'geojson';
+import type { Feature, Point } from 'geojson'
 
 export interface ArcConfig {
   startLocation: Feature<Point>

src/types/bar.ts

@@ -1,4 +1,4 @@
-import type { Feature, Point } from 'geojson';
+import type { Feature, Point } from 'geojson'
 
 export interface BarConfig {
   location: Feature<Point>

src/types/marker.ts

@@ -1,4 +1,4 @@
-import type { Feature, Point } from 'geojson';
+import type { Feature, Point } from 'geojson'
 
 export interface MarkerConfig {
   location: Feature<Point>

src/utils/arc-controlpoints.ts

@@ -13,10 +13,11 @@ export default function calculateArcControlPoints(config: ArcConfig): ControlPoi
     lat: config.endLocation.geometry.coordinates[1],
   }
 
-  if(!startCoords.lat || !startCoords.lon || !endCoords.lat || !endCoords.lon) throw Error("Invalid coordinates")
+  if (!startCoords.lat || !startCoords.lon || !endCoords.lat || !endCoords.lon)
+    throw Error('Invalid coordinates')
 
-  const startVec3 = calculateVec3FromLatLon(startCoords.lat, startCoords.lon, 600)
-  const endVec3 = calculateVec3FromLatLon(endCoords.lat, endCoords.lon, 600)
+  const startVec3 = calculateVec3FromLatLon(startCoords.lon, startCoords.lat, 600)
+  const endVec3 = calculateVec3FromLatLon(endCoords.lon, endCoords.lat, 600)
   const arcHeight = startVec3.distanceTo(endVec3) * config.height! + 600
 
   const interpolate = geoInterpolate(
@@ -29,8 +30,8 @@ export default function calculateArcControlPoints(config: ArcConfig): ControlPoi
     end: interpolate(0.75),
   }
 
-  const midStartVec3 = calculateVec3FromLatLon(midCoords.start[1], midCoords.start[0], arcHeight)
-  const midEndVec3 = calculateVec3FromLatLon(midCoords.end[1], midCoords.end[0], arcHeight)
+  const midStartVec3 = calculateVec3FromLatLon(midCoords.start[0], midCoords.start[1], arcHeight)
+  const midEndVec3 = calculateVec3FromLatLon(midCoords.end[0], midCoords.end[1], arcHeight)
 
   return {
     start: startVec3,

src/utils/threejs.ts

@@ -8,7 +8,7 @@ export function degreesToRadians(degrees: number): number {
   return degrees * (Math.PI / 180)
 }
 
-export const calculateVec3FromLatLon = (lat: number, lon: number, radius: number): Vector3 => {
+export const calculateVec3FromLatLon = (lng: number, lat: number, radius: number): Vector3 => {
   const phi = degreesToRadians(90 - lat)
   const theta = degreesToRadians(lon + 90)
   const rho = radius

vite.config.ts

@@ -15,7 +15,7 @@ export default defineConfig({
     },
     rollupOptions: {
       external: [...Object.keys(peerDependencies), '@vue/devtools-kit'],
-    }
+    },
   },
   server: {
     host: '0.0.0.0',