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';
-
-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 = {
+import { arcData, scatData, viewport, setViewport } from '~/root';
-    container: 'solid-map-gl will override me',
+import 'maplibre-gl/dist/maplibre-gl.css';
-    style: StyleJson,
+import StyleJson from '~/style/style.json';
-    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,8 +4,11 @@ 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({
+
+    return (
+        <Layer customLayer={
+            new MapboxLayer({
                 id: 'deckgl-arc',
                 type: ArcLayer,
                 data: props.data,
@@ -14,12 +17,6 @@ function MapArcLayer(props: any) {
                 getSourceColor: [200, 0, 0],
                 getTargetColor: [0, 230, 0],
                 getWidth: 6,
-    });
+            } as any)} />
-    return (
-        <>
-            <Layer customLayer={arcLayer} />
-        </>
     ) as JSX.Element;
 };
-
-export default MapArcLayer;

lightning/src/components/MapControls.tsx

@@ -1,20 +1,33 @@
 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 = {
+
+    return (
+        <>
+
+            <Control
+                type="navigation"
+                position="top-right"
+                options={{
                     showCompass: true,
                     showZoom: true,
                     visualizePitch: true,
-    };
+                } as NavigationOptions}
-    const GEO_OPTIONS: GeolocateOptions = {
+            />
+
+            <Control
+                type="geolocate"
+                position="top-right"
+                options={{
                     positionOptions: {
                         enableHighAccuracy: false,
                         timeout: 6000,
@@ -24,40 +37,27 @@ function MapControls() {
                     trackUserLocation: false,
                     showAccuracyCircle: false,
                     showUserLocation: true,
-    };
+                } as GeolocateOptions}
-    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}
-            />
-            <Control
-                type="geolocate"
-                position="top-right"
-                options={GEO_OPTIONS}
             />
+
             <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) {
+
+    return (
+        <Layer customLayer={
+            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,]
+                getLineColor: [0, 0, 0,],
-    });
+            } as any)} />
-    return (
-        <>
-            <Layer customLayer={scatterplotLayer} />
-        </>
     ) as JSX.Element;
 };
-
-export default MapScatLayer;

lightning/src/components/MapScenegraphLayer.tsx

@@ -4,9 +4,10 @@ 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({
+    return (
+            <Layer customLayer={new MapboxLayer({
                 id: 'deckgl-scenegraph',
                 type: ScenegraphLayer,
                 data: props.data,
@@ -18,14 +19,7 @@ function MapScenegraphLayer(props: any) {
                     '*': { speed: 5 }
                 },
                 sizeScale: 500,
-        _lighting: 'pbr'
+                _lighting: 'pbr',
-    });
+            } as any)} />
-
-    return (
-        <>
-            <Layer customLayer={scenegraphLayer} />
-        </>
     ) 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;
 };