add test tools

lightning/src/components/Toolbox.tsx

@@ -1,5 +1,6 @@
 import type { JSX } from "solid-js"
 import type { Viewport } from "solid-map-gl";
+import { mapRotate, setMapRotate } from "./map/BadassMap";
 import { useMapContext } from "./MapContext";
 
 
@@ -9,16 +10,37 @@ export function Toolbox() {
         <ul>
             <h3>Toolbox</h3>
             <hr />
+
+            <li>
+                <button onClick={() => console.log(viewport())} > Log Viewport </button>
+            </li>
+
+            <li>
+                <button onClick={() => setMapRotate(!mapRotate())} > Rotate </button>
+            </li>
+
             <br />
+            <h3>Fly To:</h3>
+            <hr />
+
+            <li>
+                <button onClick={() => setViewport<Viewport>({
+                    ...viewport(),
+                    center: { lng: -90, lat: 38, },
+                    zoom: 4,
+                    bearing: 0,
+                    pitch: 0,
+                })} > Default </button>
+            </li>
 
             <li>
                 <button onClick={() => setViewport<Viewport>({
                     ...viewport(),
                     center: { lng: -71.05625, lat: 42.36, },
                     zoom: 15.5,
-                    bearing: 160,
-                    pitch: 60,
-                })} > Fly To Boston </button>
+                    bearing: 250,
+                    pitch: 70,
+                })} > Boston </button>
             </li>
 
             <li>
@@ -26,10 +48,71 @@ export function Toolbox() {
                     ...viewport(),
                     center: { lng: -74.0112660425065, lat: 40.70689167578798 },
                     zoom: 15.5,
-                    bearing: 10,
-                    pitch: 60,
-                })} > Fly To NYC </button>
+                    bearing: 20,
+                    pitch: 70,
+                })} > NYC </button>
             </li>
+
+            <li>
+                <button onClick={() => setViewport<Viewport>({
+                    ...viewport(),
+                    center: { lng: -75.163, lat: 39.957, },
+                    zoom: 15,
+                    bearing: 250,
+                    pitch: 70,
+                })} > Philly </button>
+            </li>
+
+            <li>
+                <button onClick={() => setViewport<Viewport>({
+                    ...viewport(),
+                    center: { lng: -87.6258, lat: 41.8919, },
+                    zoom: 15,
+                    bearing: 220,
+                    pitch: 70,
+                })} > Chicago </button>
+            </li>
+
+            <li>
+                <button onClick={() => setViewport<Viewport>({
+                    ...viewport(),
+                    bearing: -97.06431629164882,
+                    center: { lng: -122.39541884849947, lat: 37.793003756473155 },
+                    pitch: 74.51977970937546,
+                    zoom: 15.036715935172564,
+                })} > San Francisco </button>
+            </li>
+
+            <li>
+                <button onClick={() => setViewport<Viewport>({
+                    ...viewport(),
+                    bearing: 12.7999999999995,
+                    center: { lng: -104.98973825831042, lat: 39.74702865551694 },
+                    pitch: 74.48927244878884,
+                    zoom: 15.393803779018924,
+                })} > Denver </button>
+            </li>
+
+            <li>
+                <button onClick={() => setViewport<Viewport>({
+                    ...viewport(),
+                    bearing: 0,
+                    center: { lng: -97.74208546273614, lat: 30.26285185584335 },
+                    pitch: 67,
+                    zoom: 15.497645818761502,
+                })} > Austin </button>
+            </li>
+
+            <li>
+                <button onClick={() => setViewport<Viewport>({
+                    ...viewport(),
+                    bearing: 24.144565060702007,
+                    center: { lng: -118.25670462448103, lat: 34.04554832148695 },
+                    pitch: 69.68139031089818,
+                    zoom: 15.150714811079322,
+                })} > Los Angeles </button>
+            </li>
+
         </ul>
     ) as JSX.Element;
 };

lightning/src/components/map/BadassMap.tsx

@@ -1,10 +1,10 @@
-import MapGL, { Viewport } from 'solid-map-gl';
+import MapGL, { Camera, Viewport } from 'solid-map-gl';
 import * as maplibre from 'maplibre-gl';
 import MapControls from './MapControls';
 import MapMarkerLayer from './MapMarkerLayer.tsx';
 
 import type { MapOptions } from 'maplibre-gl';
-import type { JSX } from 'solid-js';
+import { createEffect, createSignal, JSX } from 'solid-js';
 
 // deck.gl
 import { unstable_clientOnly } from 'solid-start';
@@ -16,6 +16,9 @@ import StyleJson from '~/style/style.json';
 import { useMapContext } from '../MapContext';
 
 
+export const [mapRotate, setMapRotate] = createSignal(false);
+
+createEffect(() => console.log(mapRotate()));
 
 export default function BadassMap(props: any) {
     const [viewport, { setViewport }] = useMapContext();
@@ -35,6 +38,10 @@ export default function BadassMap(props: any) {
             transitionType="flyTo"
         >
 
+            <Camera
+                rotateViewport={mapRotate()}
+                reverse={true}
+            />
             <MapScatLayer />
             <MapArcLayer />
             <MapControls />

lightning/src/components/map/MapScatLayer.tsx

@@ -19,6 +19,7 @@ export default function MapScatLayer(props: any) {
         for (const station of await response.json()) {
             buf.push({ coordinates: [station.Coordinates[1], station.Coordinates[0]] })
         };
+        console.log('Rendering', buf.length, 'dots!');
         return (buf);
     };
 
@@ -28,11 +29,11 @@ export default function MapScatLayer(props: any) {
                 id: 'deckgl-scatterplot',
                 type: ScatterplotLayer,
                 data: fetchAllStations(),
-                pickable: true,
+                pickable: false,
                 stroked: false,
                 lineWidthMaxPixels: 0,
                 radiusMinPixels: 1,
-                radiusMaxPixels: 100,
+                radiusMaxPixels: 50,
                 radiusUnits: 'meters',
                 getRadius: 1,
                 radiusScale: 10,

lightning/src/routes/stations.tsx

@@ -9,8 +9,8 @@ import { useStationsContext } from '~/components/StationsContext';
 const TEST_PACKET: StationRequest = {
     Latitude: 42.36,
     Longitude: -71.05625,
-    Distance: 1000,
-    CountLimit: 20000,
+    Distance: 10,
+    CountLimit: 200,
 };
 
 export default function Stations() {