cleanup

lightning/src/components/BadassMap.tsx

@@ -3,6 +3,7 @@ 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';
@@ -15,9 +16,7 @@ import StyleJson from '~/style/style.json';
 
 
 export default function BadassMap() {
-    return (
+    return (<MapGL
-        <>
-            <MapGL
         mapLib={maplibre}
         options={{
             container: 'solid-map-gl will override me',
@@ -25,15 +24,15 @@ export default function BadassMap() {
             maxPitch: 85,
             antialias: true,
             renderWorldCopies: false,
-                }}
+        } as MapOptions}
         viewport={viewport()}
         onViewportChange={(evt: Viewport) => setViewport(evt)}
         transitionType="flyTo"
     >
+
         <MapScatLayer data={scatData()} />
         <MapArcLayer data={arcData()} />
         <MapControls />
-            </MapGL >
+
-        </>
+    </MapGL >) as JSX.Element;
-    ) as JSX.Element;
 };

lightning/src/components/MapArcLayer.tsx

@@ -4,10 +4,9 @@ import { Layer } from 'solid-map-gl';
 
 import type { JSX } from 'solid-js';
 
-export default function MapArcLayer(props: any) {
 
-    return (
+export default function MapArcLayer(props: any) {
-        <Layer customLayer={
+    return (<Layer customLayer={
         new MapboxLayer({
             id: 'deckgl-arc',
             type: ArcLayer,
@@ -17,6 +16,5 @@ export default function MapArcLayer(props: any) {
             getSourceColor: [200, 0, 0],
             getTargetColor: [0, 230, 0],
             getWidth: 6,
-            } as any)} />
+        } as any)} />) as JSX.Element;
-    ) as JSX.Element;
 };

lightning/src/components/MapControls.tsx

@@ -10,9 +10,7 @@ import type {
 
 
 export default function MapControls() {
-
+    return (<>
-    return (
-        <>
 
         <Control
             type="navigation"
@@ -58,6 +56,5 @@ export default function MapControls() {
             } as ScaleOptions}
         />
 
-        </>
+    </>) as JSX.Element;
-    ) as JSX.Element;
 };

lightning/src/components/MapScatLayer.tsx

@@ -6,9 +6,7 @@ import type { JSX } from 'solid-js';
 
 
 export default function MapScatLayer(props: any) {
-
+    return (<Layer customLayer={
-    return (
-        <Layer customLayer={
         new MapboxLayer({
             id: 'deckgl-scatterplot',
             type: ScatterplotLayer,
@@ -17,6 +15,5 @@ export default function MapScatLayer(props: any) {
             getRadius: 30,
             getFillColor: [255, 140, 0],
             getLineColor: [0, 0, 0,],
-            } as any)} />
+        } as any)} />) as JSX.Element;
-    ) as JSX.Element;
 };

lightning/src/components/MapScenegraphLayer.tsx

@@ -4,10 +4,9 @@ import { Layer } from 'solid-map-gl';
 
 import type { JSX } from 'solid-js';
 
-export default function MapScenegraphLayer(props: any) {
 
-    return (
+export default function MapScenegraphLayer(props: any) {
-            <Layer customLayer={new MapboxLayer({
+    return (<Layer customLayer={new MapboxLayer({
         id: 'deckgl-scenegraph',
         type: ScenegraphLayer,
         data: props.data,
@@ -20,6 +19,5 @@ export default function MapScenegraphLayer(props: any) {
         },
         sizeScale: 500,
         _lighting: 'pbr',
-            } as any)} />
+    } as any)} />) as JSX.Element;
-    ) as JSX.Element;
 };

lightning/src/components/StationsContext.tsx

@@ -2,6 +2,7 @@ import { createContext, useContext, createResource } from "solid-js";
 
 import type { JSX } from "solid-js";
 
+
 type ChargingStation = {
     Name: string
     PhoneNumer: string
@@ -45,7 +46,6 @@ const TEST_PACKET: StationRequest = {
 
 const StationsContext = createContext();
 
-export function StationsProvider(props: any) {
 const [stations] = createResource(async () => {
     const response = await fetch("https://kevinfwu.com/getnearest", {
         method: "POST",
@@ -54,11 +54,13 @@ export function StationsProvider(props: any) {
         headers: { 'Content-Type': 'application/json' }
     }); return await response.json() as Promise<StationResponse[]>;
 });
-    return (
+
-        <StationsContext.Provider value={stations()}>
+
+export function StationsProvider(props: any) {
+    return (<StationsContext.Provider value={stations()}>
         {props.children}
-        </StationsContext.Provider>
+    </StationsContext.Provider>) as JSX.Element;
-    ) as JSX.Element;
 };
 
+
 export function getStations() { return useContext(StationsContext); };

lightning/src/components/Toolbox.tsx

@@ -5,9 +5,7 @@ import { setViewport } from '~/root';
 
 
 export function Toolbox() {
-
+    return (<ul>
-    return (
-        <ul>
         <h3>Toolbox</h3>
 
         <li> <button onClick={() => setViewport<Viewport>({
@@ -24,6 +22,5 @@ export function Toolbox() {
             pitch: 60,
         })} > NYC </button> </li>
 
-        </ul>
+    </ul>) as JSX.Element;
-    ) as JSX.Element;
 };

lightning/src/root.css

@@ -4,12 +4,11 @@ body {
     font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell,
     'Open Sans', 'Helvetica Neue', sans-serif;
 }
+
 a {
     margin-right: 1rem;
 }
-main {
+
-    background-color: hsla(230, 19%, 17%, 0);
-}
 h1 {
     color: #36EEE0;
     text-transform: uppercase;
@@ -17,14 +16,19 @@ h1 {
     font-weight: 300;
     line-height: 1.1;
 }
+
 p {
     line-height: 1.35;
 }
+
 @media (min-width: 480px) {
+
   h1 {
     max-width: none;
   }
+
   p {
     max-width: none;
   }
+
 }

lightning/src/root.tsx

@@ -1,11 +1,20 @@
 // @refresh reload
-import { Suspense, createSignal, createEffect } 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";
+import type { JSX } from "solid-js";
+
+type ScatData = {
+    coordinates: number[]
+}
+
+type ArcData = {
+    source: number[],
+    target: number[]
+}
 
 const TEST = {
     FAN: { LngLatLike: { lng: -71.05625, lat: 42.36, }, coords: [-71.05625, 42.36] },
@@ -16,7 +25,7 @@ const TEST = {
     NSE: { LngLatLike: { lng: -74.0112660425065, lat: 40.70689167578798 }, coords: [-74.0112660425065, 40.70689167578798], },
 };
 
-export const [scatData, setScatData] = createSignal([
+export const [scatData, setScatData] = createSignal<ScatData[]>([
     { coordinates: TEST.FAN.coords },
     { coordinates: TEST.GDT.coords },
     { coordinates: TEST.BBC.coords },
@@ -25,7 +34,7 @@ export const [scatData, setScatData] = createSignal([
     { coordinates: TEST.NSE.coords },
 ]);
 
-export const [arcData, setArcData] = createSignal([
+export const [arcData, setArcData] = createSignal<ArcData[]>([
     { source: TEST.FAN.coords, target: TEST.GDT.coords },
     { source: TEST.FAN.coords, target: TEST.BBC.coords },
     { source: TEST.FAN.coords, target: TEST.GAR.coords },
@@ -33,32 +42,29 @@ export const [arcData, setArcData] = createSignal([
 ]);
 
 export const [USER_LOC] = createSignal(TEST.FAN.LngLatLike);
-
 export const [viewport, setViewport] = createSignal<Viewport>();
 
 export default function Root() {
-    return (
+    return (<Html lang="en">
-        <Html lang="en">
         <Head>
             <Title>Ride the Lightning</Title>
             <Meta charset="utf-8" />
             <Meta name="viewport" content="width=device-width, initial-scale=1" />
         </Head>
+
         <Body>
             <Suspense>
                 <ErrorBoundary>
-                        <StationsProvider>
                     <A href="/">Map</A>
                     <A href="/about">About</A>
                     <Routes>
                         <FileRoutes />
                     </Routes>
                     <BadassMap />
-                        </StationsProvider>
                 </ErrorBoundary>
             </Suspense>
             <Scripts />
         </Body>
-        </Html>
+
-    );
+    </Html>) as JSX.Element;
 };

lightning/src/routes/[...404].tsx

@@ -1,12 +1,17 @@
-import { Title } from "solid-start";
+import { Title } from 'solid-start';
-import { HttpStatusCode } from "solid-start/server";
+import { HttpStatusCode } from 'solid-start/server';
+
+import type { JSX } from 'solid-js';
+
 
 export default function NotFound() {
-    return (
+    return (<main>
-        <main>
         <Title>Not Found</Title>
+
         <HttpStatusCode code={404} />
+
         <h1>Page Not Found</h1>
+
         <p>
             Visit{" "}
             <a href="https://start.solidjs.com" target="_blank">
@@ -14,6 +19,6 @@ export default function NotFound() {
             </a>{" "}
             to learn how to build SolidStart apps.
         </p>
-        </main>
+
-    );
+    </main>) as JSX.Element;
-}
+};

lightning/src/routes/about.tsx

@@ -4,59 +4,52 @@ import type { JSX } from 'solid-js';
 
 
 export default function Home() {
-
+    return (<main>
-    return (
-        <main>
         <Title>About Lightning</Title>
+
         <h1>About</h1>
+
         <ul>
-                <li>
+
-                    <a href="https://www.openstreetmap.org/" target="_blank">
+            <li> <a href="https://www.openstreetmap.org/" target="_blank">
                 OpenStreetMap
-                    </a>
+            </a> </li>
-                </li>
+
-                <li>
+            <li> <a href="https://openmaptiles.org/" target="_blank">
-                    <a href="https://openmaptiles.org/" target="_blank">
                 OpenMapTiles
-                    </a>
+            </a> </li>
-                </li>
+
-                <li>
+            <li> <a href="https://tilemaker.org/" target="_blank">
-                    <a href="https://tilemaker.org/" target="_blank">
                 Tilemaker
-                    </a>
+            </a> </li>
-                </li>
+
-                <li>
+            <li> <a href="https://github.com/maplibre/martin" target="_blank">
-                    <a href="https://github.com/maplibre/martin" target="_blank">
                 Martin
-                    </a>
+            </a> </li>
-                </li>
+
-                <li>
+            <li> <a href="https://maplibre.org/" target="_blank">
-                    <a href="https://maplibre.org/" target="_blank">
                 MapLibre
-                    </a>
+            </a> </li>
-                </li>
+
-                <li>
+            <li> <a href="https://start.solidjs.com/" target="_blank">
-                    <a href="https://start.solidjs.com/" target="_blank">
                 SolidStart
-                    </a>
+            </a> </li>
-                </li>
+
-                <li>
+            <li> <a href="https://gis-hub.gitbook.io/solid-map-gl/" target="_blank">
-                    <a href="https://gis-hub.gitbook.io/solid-map-gl/" target="_blank">
                 Solid Map GL
-                    </a>
+            </a> </li>
-                </li>
+
-                <li>
+            <li> <a href="https://deck.gl/" target="_blank">
-                    <a href="https://deck.gl/" target="_blank">
                 deck.gl
-                    </a>
+            </a> </li>
-                </li>
+
         </ul>
+
         <img src='5Q14.gif' />
-            <p>
+
-                <a href="https://github.com/adoyle0/maps" target="_blank">
+        <p> <a href="https://github.com/adoyle0/maps" target="_blank">
             github.com/adoyle0/maps
-                </a>
+        </a> </p>
-            </p>
+
-        </main>
+    </main>) as JSX.Element;
-    ) as JSX.Element;
 };

lightning/src/routes/index.tsx

@@ -4,9 +4,8 @@ import type { JSX } from 'solid-js';
 
 
 export default function Home() {
-    return (
+    return (<main>
-        <main>
         <Title>Ride the Lightning</Title>
-        </main>
+
-    ) as JSX.Element;
+    </main>) as JSX.Element;
 };