arc

lightning/package.json

@@ -15,8 +15,8 @@
         "vite": "^4.2.1"
     },
     "dependencies": {
-        "@deck.gl/core": "^8.9.7",
         "@deck.gl/layers": "^8.9.7",
+        "@deck.gl/mapbox": "^8.9.7",
         "@solidjs/meta": "^0.28.4",
         "@solidjs/router": "^0.8.2",
         "mapbox-gl": "npm:empty-npm-package@^1.0.0",

lightning/pnpm-lock.yaml

@@ -1,12 +1,12 @@
 lockfileVersion: '6.0'
 
 dependencies:
-  '@deck.gl/core':
-    specifier: ^8.9.7
-    version: 8.9.7
   '@deck.gl/layers':
     specifier: ^8.9.7
     version: 8.9.7(@deck.gl/core@8.9.7)(@loaders.gl/core@3.3.3)(@luma.gl/core@8.5.19)
+  '@deck.gl/mapbox':
+    specifier: ^8.9.7
+    version: 8.9.7(@deck.gl/core@8.9.7)
   '@solidjs/meta':
     specifier: ^0.28.4
     version: 0.28.4(solid-js@1.7.3)
@@ -1200,6 +1200,15 @@ packages:
       earcut: 2.2.4
     dev: false
 
+  /@deck.gl/mapbox@8.9.7(@deck.gl/core@8.9.7):
+    resolution: {integrity: sha512-EcELbZ24s+aE99C38v2ubRjppoEGUgSZuz9wHrjK9BT1a9+wGKBpeRkks79HOy0ey5343guOgUWoKGKQ/QdAeg==}
+    peerDependencies:
+      '@deck.gl/core': ^8.0.0
+    dependencies:
+      '@deck.gl/core': 8.9.7
+      '@types/mapbox-gl': 2.7.10
+    dev: false
+
   /@esbuild/android-arm64@0.17.16:
     resolution: {integrity: sha512-QX48qmsEZW+gcHgTmAj+x21mwTz8MlYQBnzF6861cNdQGvj2jzzFjqH0EBabrIa/WVZ2CHolwMoqxVryqKt8+Q==}
     engines: {node: '>=12'}
@@ -1753,6 +1762,12 @@ packages:
     resolution: {integrity: sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==}
     dev: false
 
+  /@types/mapbox-gl@2.7.10:
+    resolution: {integrity: sha512-nMVEcu9bAcenvx6oPWubQSPevsekByjOfKjlkr+8P91vawtkxTnopDoXXq1Qn/f4cg3zt0Z2W9DVsVsKRNXJTw==}
+    dependencies:
+      '@types/geojson': 7946.0.10
+    dev: false
+
   /@types/mapbox__point-geometry@0.1.2:
     resolution: {integrity: sha512-D0lgCq+3VWV85ey1MZVkE8ZveyuvW5VAfuahVTQRpXFQTxw03SuIf1/K4UQ87MMIXVKzpFjXFiFMZzLj2kU+iA==}
     dev: false

lightning/src/components/BadassMap.tsx

@@ -1,11 +1,20 @@
 import { createSignal, Show } from 'solid-js';
-import MapGL, { Viewport, Light, Camera, Source, Layer } from 'solid-map-gl';
 import * as maplibre from 'maplibre-gl';
+import MapGL, {
+    Viewport,
+    Light,
+    Camera,
+    Source,
+    Layer,
+} from 'solid-map-gl';
+import { MapboxLayer } from '@deck.gl/mapbox';
+import { ArcLayer } from '@deck.gl/layers';
+
+import MapControls from './MapControls';
 
 import type { JSX } from 'solid-js';
 import type { MapOptions } from 'maplibre-gl';
 
-import MapControls from './MapControls';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 
@@ -15,7 +24,8 @@ function BadassMap(): JSX.Element {
     const GD_TAVERN: number[] = [-71.056922, 42.360919]
     const FAKE_GJSON = {
         type: 'geojson',
-        data: { "type": "FeatureCollection", "features": [
+        data: {
+            "type": "FeatureCollection", "features": [
                 { "type": "Feature", "geometry": { "type": "Point", "coordinates": FANEUIL_HALL } },
                 { "type": "Feature", "geometry": { "type": "Point", "coordinates": GD_TAVERN } },
             ],
@@ -49,6 +59,18 @@ function BadassMap(): JSX.Element {
     const [rotate, setRotate] = createSignal<boolean>(true);
     const toggleRotate = () => setRotate<boolean>(!rotate());
 
+    const myDeckLayer = new MapboxLayer({
+        id: 'deckgl-arc',
+        type: ArcLayer,
+        data: [
+            { source: FANEUIL_HALL, target: GD_TAVERN },
+        ],
+        getSourcePosition: (d: any) => d.source,
+        getTargetPosition: (d: any) => d.target,
+        getSourceColor: [255, 208, 0],
+        getTargetColor: [0, 128, 255],
+        getWidth: 8,
+    });
 
     return (
         <MapGL
@@ -60,6 +82,7 @@ function BadassMap(): JSX.Element {
             <Source source={FAKE_GJSON} >
                 <Layer style={RED_DOT} />
             </Source>
+            <Layer customLayer={myDeckLayer} />
             <MapControls />
             <Camera
                 rotateViewport={rotate()}