cleanup

2023-04-22 04:19:14 -04:00 · 2023-04-22 04:19:14 -04:00 · 6caeb20c5f
commit 6caeb20c5f
parent 790f7fd1bf
9 changed files with 134 additions and 143 deletions
--- a/lightning/src/components/BadassMap.tsx
+++ b/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 = {
-    container: 'solid-map-gl will override me',
-    style: StyleJson,
-    maxPitch: 85,
-    antialias: true,
-    renderWorldCopies: false,
-};
+import { arcData, scatData, viewport, setViewport } from '~/root';
+import 'maplibre-gl/dist/maplibre-gl.css';
+import StyleJson from '~/style/style.json';
+

 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"
--- a/lightning/src/components/MapArcLayer.tsx
+++ b/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) {
-    const arcLayer = new MapboxLayer({
+export default function MapArcLayer(props: any) {
+
+    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,
-    });
-    return (
-        <>
-            <Layer customLayer={arcLayer} />
-        </>
+            } as any)} />
    ) as JSX.Element;
 };
-
-export default MapArcLayer;
--- a/lightning/src/components/MapControls.tsx
+++ b/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() {
-    const NAV_OPTIONS: NavigationOptions = {
+export default function MapControls() {
+
+    return (
+        <>
+
+            <Control
+                type="navigation"
+                position="top-right"
+                options={{
                    showCompass: true,
                    showZoom: true,
                    visualizePitch: true,
-    };
-    const GEO_OPTIONS: GeolocateOptions = {
+                } as NavigationOptions}
+            />
+
+            <Control
+                type="geolocate"
+                position="top-right"
+                options={{
                    positionOptions: {
                        enableHighAccuracy: false,
                        timeout: 6000,
@ -24,40 +37,27 @@ function MapControls() {
                    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}
-            />
-            <Control
-                type="geolocate"
-                position="top-right"
-                options={GEO_OPTIONS}
+                } 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;
-
--- a/lightning/src/components/MapScatLayer.tsx
+++ b/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,]
-    });
-    return (
-        <>
-            <Layer customLayer={scatterplotLayer} />
-        </>
+                getLineColor: [0, 0, 0,],
+            } as any)} />
    ) as JSX.Element;
 };
-
-export default MapScatLayer;
--- a/lightning/src/components/MapScenegraphLayer.tsx
+++ b/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'
-    });
-
-    return (
-        <>
-            <Layer customLayer={scenegraphLayer} />
-        </>
+                _lighting: 'pbr',
+            } as any)} />
    ) as JSX.Element;
 };
-
-export default MapScenegraphLayer;
--- a/lightning/src/components/Toolbox.tsx
+++ b/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;
+};
--- a/lightning/src/root.tsx
+++ b/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 },
-    { 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 = [
+
+export const [scatData, setScatData] = createSignal([
    { 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) {
-    setRotate<boolean>(false)
-    setViewport<Viewport>(viewUpdate);
-};
+export const [arcData, setArcData] = createSignal([
+    { 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 },
+]);
+
+export const [USER_LOC] = createSignal(TEST.FAN.LngLatLike);
+
+export const [viewport, setViewport] = createSignal<Viewport>();
+createEffect(() => console.log(viewport()));

 export default function Root() {
    return (
--- a/lightning/src/routes/about.tsx
+++ b/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;
-}
+};
--- a/lightning/src/routes/index.tsx
+++ b/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;
 };