stuff lol

lightning/src/components/BadassMap.tsx

@@ -14,7 +14,8 @@ import type { StyleSpecification } from 'maplibre-gl';
 
 import 'maplibre-gl/dist/maplibre-gl.css';
 import styleJson from '~/style/style.json';
-import type { ArcLayer, ArcLayerProps } from '@deck.gl/layers/typed';
+import { arcData, scatData, viewport, setViewport, rotate, setRotate } from '~/root';
+
 const MAP_STYLE: StyleSpecification = styleJson;
 
 
@@ -26,40 +27,7 @@ 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 },
-    { 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 BOS: Viewport = {
-    center: TEST.FAN.coords,
-    zoom: 15.5,
-    bearing: 160,
-    pitch: 60,
-};
-const NYC: Viewport = {
-    center: TEST.NSE.coords,
-    zoom: 15.5,
-    bearing: 10,
-    pitch: 60,
-};
 
-const USER_LOC = TEST.FAN.LngLatLike;
-const INITIAL_VIEWPORT: Viewport = {
-    center: USER_LOC,
-    zoom: 15.5,
-    bearing: 10,
-    pitch: 60,
-};
 const options: MapOptions = {
     container: 'solid-map-gl will override me',
     style: MAP_STYLE,
@@ -70,16 +38,6 @@ const options: MapOptions = {
 
 function BadassMap(props: any): JSX.Element {
 
-    const [viewport, setViewport] = createSignal<Viewport>(INITIAL_VIEWPORT);
-    const [rotate, setRotate] = createSignal<boolean>(false);
-    const [scatData, setScatData] = createSignal(SCAT_DATA);
-    const [arcData, setArcData] = createSignal(ARC_DATA);
-    const toggleRotate = () => setRotate<boolean>(!rotate());
-
-    async function flyTo(viewUpdate: Viewport) {
-        setRotate<boolean>(false)
-        setViewport<Viewport>(viewUpdate);
-    };
     async function eventHandler(event: any) {
         switch (event.type) {
             case 'mousedown':
@@ -114,15 +72,6 @@ function BadassMap(props: any): JSX.Element {
 
                 <Camera rotateViewport={rotate()} reverse={true} />
 
-                <ul> <li>
-                    <Show when={rotate()}
-                        fallback={<button onClick={toggleRotate}> Turn Rotation On </button>} >
-
-                        <button onClick={toggleRotate}> Turn Rotation Off </button> </Show> </li>
-                    <li><button onClick={() => flyTo({ ...viewport(), ...BOS })}> Boston </button> </li>
-                    <li><button onClick={() => flyTo({ ...viewport(), ...NYC })}> NYC </button> </li>
-                </ul>
-
                 <MapControls />
             </MapGL >
         </>

lightning/src/root.css

@@ -1,4 +1,5 @@
 body {
+    margin-right: 50px;
     background-color: #4C5270;
     font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell,
     'Open Sans', 'Helvetica Neue', sans-serif;

lightning/src/root.tsx

@@ -1,10 +1,52 @@
 // @refresh reload
-import { Suspense } from "solid-js";
+import { Suspense, createSignal } 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';
 import { StationsProvider } from "./components/StationsContext";
 
+import type { Viewport } from "solid-map-gl";
+
+const TEST = {
+    FAN: { LngLatLike: { lng: -71.05625, lat: 42.36, }, coords: [-71.05625, 42.36] },
+    GDT: { LngLatLike: { lng: -71.056922, lat: 42.360919 }, coords: [-71.056922, 42.360919], },
+    BBC: { LngLatLike: { lng: -71.103, lat: 42.3145 }, coords: [-71.103, 42.3145], },
+    GAR: { LngLatLike: { lng: -71.062228, lat: 42.366303 }, coords: [-71.062228, 42.366303], },
+    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 },
+    { 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 [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) {
+    setRotate<boolean>(false)
+    setViewport<Viewport>(viewUpdate);
+};
+
 export default function Root() {
     return (
         <Html lang="en">

lightning/src/routes/index.tsx

@@ -1,5 +1,29 @@
+import { Show } from 'solid-js';
 import { Title } from 'solid-start';
-import { getStations } from '~/components/StationsContext';
+import { viewport, rotate, toggleRotate, flyTo } from '~/root';
+
+import type { Viewport } from 'solid-map-gl';
+
+const TEST = {
+    FAN: { LngLatLike: { lng: -71.05625, lat: 42.36, }, coords: [-71.05625, 42.36] },
+    GDT: { LngLatLike: { lng: -71.056922, lat: 42.360919 }, coords: [-71.056922, 42.360919], },
+    BBC: { LngLatLike: { lng: -71.103, lat: 42.3145 }, coords: [-71.103, 42.3145], },
+    GAR: { LngLatLike: { lng: -71.062228, lat: 42.366303 }, coords: [-71.062228, 42.366303], },
+    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 BOS: Viewport = {
+    center: TEST.FAN.coords,
+    zoom: 15.5,
+    bearing: 160,
+    pitch: 60,
+};
+const NYC: Viewport = {
+    center: TEST.NSE.coords,
+    zoom: 15.5,
+    bearing: 10,
+    pitch: 60,
+};
 
 import type { JSX } from 'solid-js';
 
@@ -7,6 +31,14 @@ export default function Home() {
     return (
         <main>
             <Title>Ride the Lightning</Title>
+            <ul> <li>
+                <Show when={rotate()}
+                    fallback={<button onClick={toggleRotate}> Turn Rotation On </button>} >
+
+                    <button onClick={toggleRotate}> Turn Rotation Off </button> </Show> </li>
+                <li><button onClick={() => flyTo({ ...viewport(), ...BOS })}> Boston </button> </li>
+                <li><button onClick={() => flyTo({ ...viewport(), ...NYC })}> NYC </button> </li>
+            </ul>
         </main>
     ) as JSX.Element;
 };