cleanup

lightning/src/components/BadassMap.tsx

@@ -3,31 +3,29 @@ import * as maplibre from 'maplibre-gl';
 import MapControls from './MapControls';
 
 import type { JSX } from 'solid-js';
-import type { MapOptions } from 'maplibre-gl';
+
+// deck.gl
+import { unstable_clientOnly } from 'solid-start';
+const MapScatLayer = unstable_clientOnly( () => import('~/components/MapScatLayer'));
+const MapArcLayer = unstable_clientOnly(() => import('~/components/MapArcLayer'));
 
 import { arcData, scatData, viewport, setViewport } from '~/root';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import StyleJson from '~/style/style.json';
 
-// deck.gl
-import { unstable_clientOnly } from 'solid-start';
-const MapScatLayer = unstable_clientOnly(() => import('~/components/MapScatLayer'));
-const MapArcLayer = unstable_clientOnly(() => import('~/components/MapArcLayer'));
-
-const options: MapOptions = {
-    container: 'solid-map-gl will override me',
-    style: StyleJson,
-    maxPitch: 85,
-    antialias: true,
-    renderWorldCopies: false,
-};
 
 export default function BadassMap() {
     return (
         <>
             <MapGL
                 mapLib={maplibre}
-                options={options}
+                options={{
+                    container: 'solid-map-gl will override me',
+                    style: StyleJson,
+                    maxPitch: 85,
+                    antialias: true,
+                    renderWorldCopies: false,
+                }}
                 viewport={viewport()}
                 onViewportChange={(evt: Viewport) => setViewport(evt)}
                 transitionType="flyTo"

lightning/src/components/MapArcLayer.tsx

@@ -4,22 +4,19 @@ import { Layer } from 'solid-map-gl';
 
 import type { JSX } from 'solid-js';
 
-function MapArcLayer(props: any) {
+export default function MapArcLayer(props: any) {
-    const arcLayer = new MapboxLayer({
+
-        id: 'deckgl-arc',
-        type: ArcLayer,
-        data: props.data,
-        getSourcePosition: (d: any) => d.source,
-        getTargetPosition: (d: any) => d.target,
-        getSourceColor: [200, 0, 0],
-        getTargetColor: [0, 230, 0],
-        getWidth: 6,
-    });
     return (
-        <>
+        <Layer customLayer={
-            <Layer customLayer={arcLayer} />
+            new MapboxLayer({
-        </>
+                id: 'deckgl-arc',
+                type: ArcLayer,
+                data: props.data,
+                getSourcePosition: (d: any) => d.source,
+                getTargetPosition: (d: any) => d.target,
+                getSourceColor: [200, 0, 0],
+                getTargetColor: [0, 230, 0],
+                getWidth: 6,
+            } as any)} />
     ) as JSX.Element;
 };
-
-export default MapArcLayer;

lightning/src/components/MapControls.tsx

@@ -1,63 +1,63 @@
 import { Control } from 'solid-map-gl';
+
+import type { JSX } from 'solid-js';
 import type {
     NavigationOptions,
     GeolocateOptions,
-    ScaleOptions,
     AttributionOptions,
+    ScaleOptions,
 } from 'maplibre-gl';
 
-import type { JSX } from 'solid-js';
 
-function MapControls() {
+export default function MapControls() {
-    const NAV_OPTIONS: NavigationOptions = {
+
-        showCompass: true,
-        showZoom: true,
-        visualizePitch: true,
-    };
-    const GEO_OPTIONS: GeolocateOptions = {
-        positionOptions: {
-            enableHighAccuracy: false,
-            timeout: 6000,
-            maximumAge: 0,
-        },
-        fitBoundsOptions: { maxZoom: 15 },
-        trackUserLocation: false,
-        showAccuracyCircle: false,
-        showUserLocation: true,
-    };
-    const ATTRIB_OPTIONS: AttributionOptions = {
-        compact: false,
-        customAttribution: 'OpenStreetMap',
-    };
-    const SCALE_OPTIONS: ScaleOptions = {
-        maxWidth: 100,
-        unit: 'imperial',
-    };
     return (
         <>
+
             <Control
                 type="navigation"
                 position="top-right"
-                options={NAV_OPTIONS}
+                options={{
+                    showCompass: true,
+                    showZoom: true,
+                    visualizePitch: true,
+                } as NavigationOptions}
             />
+
             <Control
                 type="geolocate"
                 position="top-right"
-                options={GEO_OPTIONS}
+                options={{
+                    positionOptions: {
+                        enableHighAccuracy: false,
+                        timeout: 6000,
+                        maximumAge: 0,
+                    },
+                    fitBoundsOptions: { maxZoom: 15 },
+                    trackUserLocation: false,
+                    showAccuracyCircle: false,
+                    showUserLocation: true,
+                } as GeolocateOptions}
             />
+
             <Control
                 type="attribution"
                 position="bottom-right"
-                options={ATTRIB_OPTIONS}
+                options={{
+                    compact: false,
+                    customAttribution: 'OpenStreetMap',
+                } as AttributionOptions}
             />
+
             <Control
                 type="scale"
                 position="bottom-left"
-                options={SCALE_OPTIONS}
+                options={{
+                    maxWidth: 100,
+                    unit: 'imperial',
+                } as ScaleOptions}
             />
+
         </>
     ) as JSX.Element;
 };
-
-export default MapControls;
-

lightning/src/components/MapScatLayer.tsx

@@ -4,21 +4,19 @@ import { Layer } from 'solid-map-gl';
 
 import type { JSX } from 'solid-js';
 
-function MapScatLayer(props: any) {
+
-    const scatterplotLayer = new MapboxLayer({
+export default function MapScatLayer(props: any) {
-        id: 'deckgl-scatterplot',
+
-        type: ScatterplotLayer,
-        data: props.data,
-        getPosition: (d: any) => d.coordinates,
-        getRadius: 30,
-        getFillColor: [255, 140, 0],
-        getLineColor: [0, 0, 0,]
-    });
     return (
-        <>
+        <Layer customLayer={
-            <Layer customLayer={scatterplotLayer} />
+            new MapboxLayer({
-        </>
+                id: 'deckgl-scatterplot',
+                type: ScatterplotLayer,
+                data: props.data,
+                getPosition: (d: any) => d.coordinates,
+                getRadius: 30,
+                getFillColor: [255, 140, 0],
+                getLineColor: [0, 0, 0,],
+            } as any)} />
     ) as JSX.Element;
 };
-
-export default MapScatLayer;

lightning/src/components/MapScenegraphLayer.tsx

@@ -4,28 +4,22 @@ import { Layer } from 'solid-map-gl';
 
 import type { JSX } from 'solid-js';
 
-function MapScenegraphLayer(props: any) {
+export default function MapScenegraphLayer(props: any) {
-
-    const scenegraphLayer = new MapboxLayer({
-        id: 'deckgl-scenegraph',
-        type: ScenegraphLayer,
-        data: props.data,
-        pickable: true,
-        scenegraph: 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF-Binary/BoxAnimated.glb',
-        getPosition: d => d.coordinates,
-        getOrientation: d => [0, Math.random() * 180, 90],
-        _animations: {
-            '*': { speed: 5 }
-        },
-        sizeScale: 500,
-        _lighting: 'pbr'
-    });
 
     return (
-        <>
+            <Layer customLayer={new MapboxLayer({
-            <Layer customLayer={scenegraphLayer} />
+                id: 'deckgl-scenegraph',
-        </>
+                type: ScenegraphLayer,
+                data: props.data,
+                pickable: true,
+                scenegraph: 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF-Binary/BoxAnimated.glb',
+                getPosition: d => d.coordinates,
+                getOrientation: d => [0, Math.random() * 180, 90],
+                _animations: {
+                    '*': { speed: 5 }
+                },
+                sizeScale: 500,
+                _lighting: 'pbr',
+            } as any)} />
     ) as JSX.Element;
 };
-
-export default MapScenegraphLayer;

lightning/src/components/Toolbox.tsx

@@ -0,0 +1,29 @@
+import type { JSX } from "solid-js"
+import type { Viewport } from "solid-map-gl";
+
+import { setViewport } from '~/root';
+
+
+export function Toolbox() {
+
+    return (
+        <ul>
+            <h3>Toolbox</h3>
+
+            <li> <button onClick={() => setViewport<Viewport>({
+                center: { lng: -71.05625, lat: 42.36, },
+                zoom: 15.5,
+                bearing: 160,
+                pitch: 60,
+            })} > Boston </button> </li>
+
+            <li> <button onClick={() => setViewport<Viewport>({
+                center: { lng: -74.0112660425065, lat: 40.70689167578798 },
+                zoom: 15.5,
+                bearing: 10,
+                pitch: 60,
+            })} > NYC </button> </li>
+
+        </ul>
+    ) as JSX.Element;
+};

lightning/src/root.tsx

@@ -1,5 +1,5 @@
 // @refresh reload
-import { Suspense, createSignal } from "solid-js";
+import { Suspense, createSignal, createEffect } from "solid-js";
 import { A, Body, ErrorBoundary, FileRoutes, Head, Html, Meta, Routes, Scripts, Title } from "solid-start";
 import "./root.css";
 import BadassMap from './components/BadassMap';
@@ -15,49 +15,27 @@ const TEST = {
     PRH: { LngLatLike: { lng: -71.053678, lat: 42.363722 }, coords: [-71.053678, 42.363722], },
     NSE: { LngLatLike: { lng: -74.0112660425065, lat: 40.70689167578798 }, coords: [-74.0112660425065, 40.70689167578798], },
 };
-const ARC_DATA = [
+
-    { source: TEST.FAN.coords, target: TEST.GDT.coords },
+export const [scatData, setScatData] = createSignal([
-    { source: TEST.FAN.coords, target: TEST.BBC.coords },
-    { source: TEST.FAN.coords, target: TEST.GAR.coords },
-    { source: TEST.FAN.coords, target: TEST.PRH.coords },
-];
-const SCAT_DATA = [
     { coordinates: TEST.FAN.coords },
     { coordinates: TEST.GDT.coords },
     { coordinates: TEST.BBC.coords },
     { coordinates: TEST.GAR.coords },
     { coordinates: TEST.PRH.coords },
     { coordinates: TEST.NSE.coords },
-];
+]);
-const USER_LOC = TEST.FAN.LngLatLike;
-const INITIAL_VIEWPORT: Viewport = {
-    center: USER_LOC,
-    zoom: 15.5,
-    bearing: 10,
-    pitch: 60,
-};
-export const BOS: Viewport = {
-    center: TEST.FAN.coords,
-    zoom: 15.5,
-    bearing: 160,
-    pitch: 60,
-};
-export const NYC: Viewport = {
-    center: TEST.NSE.coords,
-    zoom: 15.5,
-    bearing: 10,
-    pitch: 60,
-};
-export const [scatData, setScatData] = createSignal(SCAT_DATA);
-export const [arcData, setArcData] = createSignal(ARC_DATA);
-export const [viewport, setViewport] = createSignal<Viewport>(INITIAL_VIEWPORT);
-export const [rotate, setRotate] = createSignal<boolean>(false);
-export const toggleRotate = () => setRotate<boolean>(!rotate());
 
-export function flyTo(viewUpdate: Viewport) {
+export const [arcData, setArcData] = createSignal([
-    setRotate<boolean>(false)
+    { source: TEST.FAN.coords, target: TEST.GDT.coords },
-    setViewport<Viewport>(viewUpdate);
+    { source: TEST.FAN.coords, target: TEST.BBC.coords },
-};
+    { source: TEST.FAN.coords, target: TEST.GAR.coords },
+    { source: TEST.FAN.coords, target: TEST.PRH.coords },
+]);
+
+export const [USER_LOC] = createSignal(TEST.FAN.LngLatLike);
+
+export const [viewport, setViewport] = createSignal<Viewport>();
+createEffect(() => console.log(viewport()));
 
 export default function Root() {
     return (

lightning/src/routes/about.tsx

@@ -2,7 +2,9 @@ import { Title } from 'solid-start';
 
 import type { JSX } from 'solid-js';
 
+
 export default function Home() {
+
     return (
         <main>
             <Title>About Lightning</Title>
@@ -57,4 +59,4 @@ export default function Home() {
             </p>
         </main>
     ) as JSX.Element;
-}
+};

lightning/src/routes/index.tsx

@@ -2,16 +2,11 @@ import { Title } from 'solid-start';
 
 import type { JSX } from 'solid-js';
 
-import { viewport, flyTo, BOS, NYC } from '~/root';
 
 export default function Home() {
     return (
         <main>
             <Title>Ride the Lightning</Title>
-            <ul><li>Toolbox</li>
-                <li><button onClick={() => flyTo({ ...viewport(), ...BOS })}> Boston </button> </li>
-                <li><button onClick={() => flyTo({ ...viewport(), ...NYC })}> NYC </button> </li>
-            </ul>
         </main>
     ) as JSX.Element;
 };