cleanup

2023-04-22 05:07:11 -04:00 · 2023-04-22 05:07:11 -04:00 · 1ecaec1e51
commit 1ecaec1e51
parent 92b81886b4
12 changed files with 245 additions and 250 deletions
--- a/lightning/src/components/BadassMap.tsx
+++ b/lightning/src/components/BadassMap.tsx
@ -3,10 +3,11 @@ 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 MapScatLayer = unstable_clientOnly(() => import('~/components/MapScatLayer'));
 const MapArcLayer = unstable_clientOnly(() => import('~/components/MapArcLayer'));

 import { arcData, scatData, viewport, setViewport } from '~/root';
@ -15,25 +16,23 @@ import StyleJson from '~/style/style.json';


 export default function BadassMap() {
-    return (
-        <>
-            <MapGL
-                mapLib={maplibre}
-                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"
-            >
-                <MapScatLayer data={scatData()} />
-                <MapArcLayer data={arcData()} />
-                <MapControls />
-            </MapGL >
-        </>
-    ) as JSX.Element;
+    return (<MapGL
+        mapLib={maplibre}
+        options={{
+            container: 'solid-map-gl will override me',
+            style: StyleJson,
+            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 >) as JSX.Element;
 };
--- a/lightning/src/components/MapArcLayer.tsx
+++ b/lightning/src/components/MapArcLayer.tsx
@ -4,19 +4,17 @@ import { Layer } from 'solid-map-gl';

 import type { JSX } from 'solid-js';

-export default function MapArcLayer(props: any) {

-    return (
-        <Layer customLayer={
-            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 function MapArcLayer(props: any) {
+    return (<Layer customLayer={
+        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;
 };
--- a/lightning/src/components/MapControls.tsx
+++ b/lightning/src/components/MapControls.tsx
@ -10,54 +10,51 @@ import type {


 export default function MapControls() {
+    return (<>

-    return (
-        <>
+        <Control
+            type="navigation"
+            position="top-right"
+            options={{
+                showCompass: true,
+                showZoom: true,
+                visualizePitch: true,
+            } as NavigationOptions}
+        />

-            <Control
-                type="navigation"
-                position="top-right"
-                options={{
-                    showCompass: true,
-                    showZoom: true,
-                    visualizePitch: true,
-                } as NavigationOptions}
-            />
+        <Control
+            type="geolocate"
+            position="top-right"
+            options={{
+                positionOptions: {
+                    enableHighAccuracy: false,
+                    timeout: 6000,
+                    maximumAge: 0,
+                },
+                fitBoundsOptions: { maxZoom: 15 },
+                trackUserLocation: false,
+                showAccuracyCircle: false,
+                showUserLocation: true,
+            } as GeolocateOptions}
+        />

-            <Control
-                type="geolocate"
-                position="top-right"
-                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={{
+                compact: false,
+                customAttribution: 'OpenStreetMap',
+            } as AttributionOptions}
+        />

-            <Control
-                type="attribution"
-                position="bottom-right"
-                options={{
-                    compact: false,
-                    customAttribution: 'OpenStreetMap',
-                } as AttributionOptions}
-            />
+        <Control
+            type="scale"
+            position="bottom-left"
+            options={{
+                maxWidth: 100,
+                unit: 'imperial',
+            } as ScaleOptions}
+        />

-            <Control
-                type="scale"
-                position="bottom-left"
-                options={{
-                    maxWidth: 100,
-                    unit: 'imperial',
-                } as ScaleOptions}
-            />
-
-        </>
-    ) as JSX.Element;
+    </>) as JSX.Element;
 };
--- a/lightning/src/components/MapScatLayer.tsx
+++ b/lightning/src/components/MapScatLayer.tsx
@ -6,17 +6,14 @@ import type { JSX } from 'solid-js';


 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,],
-            } as any)} />
-    ) as JSX.Element;
+    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,],
+        } as any)} />) as JSX.Element;
 };
--- a/lightning/src/components/MapScenegraphLayer.tsx
+++ b/lightning/src/components/MapScenegraphLayer.tsx
@ -4,22 +4,20 @@ import { Layer } from 'solid-map-gl';

 import type { JSX } from 'solid-js';

-export default function MapScenegraphLayer(props: any) {

-    return (
-            <Layer customLayer={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',
-            } as any)} />
-    ) as JSX.Element;
+export default function MapScenegraphLayer(props: any) {
+    return (<Layer customLayer={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',
+    } as any)} />) as JSX.Element;
 };
--- a/lightning/src/components/StationsContext.tsx
+++ b/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,20 +46,21 @@ const TEST_PACKET: StationRequest = {

 const StationsContext = createContext();

+const [stations] = createResource(async () => {
+    const response = await fetch("https://kevinfwu.com/getnearest", {
+        method: "POST",
+        cache: 'default',
+        body: JSON.stringify(TEST_PACKET),
+        headers: { 'Content-Type': 'application/json' }
+    }); return await response.json() as Promise<StationResponse[]>;
+});
+
+
 export function StationsProvider(props: any) {
-    const [stations] = createResource(async () => {
-        const response = await fetch("https://kevinfwu.com/getnearest", {
-            method: "POST",
-            cache: 'default',
-            body: JSON.stringify(TEST_PACKET),
-            headers: { 'Content-Type': 'application/json' }
-        }); return await response.json() as Promise<StationResponse[]>;
-    });
-    return (
-        <StationsContext.Provider value={stations()}>
-            {props.children}
-        </StationsContext.Provider>
-    ) as JSX.Element;
+    return (<StationsContext.Provider value={stations()}>
+        {props.children}
+    </StationsContext.Provider>) as JSX.Element;
 };

+
 export function getStations() { return useContext(StationsContext); };
--- a/lightning/src/components/Toolbox.tsx
+++ b/lightning/src/components/Toolbox.tsx
@ -5,25 +5,22 @@ import { setViewport } from '~/root';


 export function Toolbox() {
+    return (<ul>
+        <h3>Toolbox</h3>

-    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: -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>

-            <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;
+    </ul>) as JSX.Element;
 };
--- a/lightning/src/root.css
+++ b/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;
  }
+
 }
--- a/lightning/src/root.tsx
+++ b/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 (
-        <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>
-    );
+    return (<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>
+                    <A href="/">Map</A>
+                    <A href="/about">About</A>
+                    <Routes>
+                        <FileRoutes />
+                    </Routes>
+                    <BadassMap />
+                </ErrorBoundary>
+            </Suspense>
+            <Scripts />
+        </Body>
+
+    </Html>) as JSX.Element;
 };
--- a/lightning/src/routes/[...404].tsx
+++ b/lightning/src/routes/[...404].tsx
@ -1,19 +1,24 @@
-import { Title } from "solid-start";
-import { HttpStatusCode } from "solid-start/server";
+import { Title } from 'solid-start';
+import { HttpStatusCode } from 'solid-start/server';
+
+import type { JSX } from 'solid-js';
+

 export default function NotFound() {
-    return (
-        <main>
-            <Title>Not Found</Title>
-            <HttpStatusCode code={404} />
-            <h1>Page Not Found</h1>
-            <p>
-                Visit{" "}
-                <a href="https://start.solidjs.com" target="_blank">
-                    start.solidjs.com
-                </a>{" "}
-                to learn how to build SolidStart apps.
-            </p>
-        </main>
-    );
-}
+    return (<main>
+        <Title>Not Found</Title>
+
+        <HttpStatusCode code={404} />
+
+        <h1>Page Not Found</h1>
+
+        <p>
+            Visit{" "}
+            <a href="https://start.solidjs.com" target="_blank">
+                start.solidjs.com
+            </a>{" "}
+            to learn how to build SolidStart apps.
+        </p>
+
+    </main>) as JSX.Element;
+};
--- a/lightning/src/routes/about.tsx
+++ b/lightning/src/routes/about.tsx
@ -4,59 +4,52 @@ import type { JSX } from 'solid-js';


 export default function Home() {
+    return (<main>
+        <Title>About Lightning</Title>

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


 export default function Home() {
-    return (
-        <main>
-            <Title>Ride the Lightning</Title>
-        </main>
-    ) as JSX.Element;
+    return (<main>
+        <Title>Ride the Lightning</Title>
+
+    </main>) as JSX.Element;
 };