cleanup

lightning/src/components/BadassMap.tsx

@@ -1,59 +1,28 @@
-import MapGL, { Viewport, Camera } from 'solid-map-gl';
+import MapGL, { Viewport } from 'solid-map-gl';
-import { createSignal, Show} from 'solid-js';
 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'));
 
-import type { JSX } from 'solid-js';
-import type { MapOptions } from 'maplibre-gl';
-import type { StyleSpecification } from 'maplibre-gl';
-
-import 'maplibre-gl/dist/maplibre-gl.css';
-import styleJson from '~/style/style.json';
-import { arcData, scatData, viewport, setViewport, rotate, setRotate } from '~/root';
-
-const MAP_STYLE: StyleSpecification = styleJson;
-
-
-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 options: MapOptions = {
     container: 'solid-map-gl will override me',
-    style: MAP_STYLE,
+    style: StyleJson,
     maxPitch: 85,
     antialias: true,
     renderWorldCopies: false,
 };
 
-function BadassMap(props: any): JSX.Element {
+export default function BadassMap() {
-
-    async function eventHandler(event: any) {
-        switch (event.type) {
-            case 'mousedown':
-                // setRotate(false)
-                break;
-            case 'zoomstart':
-                // setRotate(false)
-                break;
-            case 'touchstart':
-                // setRotate(false)
-                break;
-            case 'drag':
-                // setRotate(false)
-                break;
-        };
-    };
     return (
         <>
             <MapGL
@@ -61,21 +30,12 @@ function BadassMap(props: any): JSX.Element {
                 options={options}
                 viewport={viewport()}
                 onViewportChange={(evt: Viewport) => setViewport(evt)}
-                onDrag={eventHandler}
-                onMouseDown={eventHandler}
-                onZoomStart={eventHandler}
-                onTouchStart={eventHandler}
                 transitionType="flyTo"
             >
                 <MapScatLayer data={scatData()} />
                 <MapArcLayer data={arcData()} />
-
-                <Camera rotateViewport={rotate()} reverse={true} />
-
                 <MapControls />
             </MapGL >
         </>
     ) as JSX.Element;
 };
-
-export default BadassMap;

lightning/src/root.tsx

@@ -36,6 +36,18 @@ const INITIAL_VIEWPORT: Viewport = {
     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);

lightning/src/routes/index.tsx

@@ -1,41 +1,14 @@
-import { Show } from 'solid-js';
 import { Title } from 'solid-start';
-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';
 
+import { viewport, flyTo, BOS, NYC } from '~/root';
+
 export default function Home() {
     return (
         <main>
             <Title>Ride the Lightning</Title>
-            <ul> <li>
+            <ul><li>Toolbox</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>