From c3f4e5a2831e267ce163a1d28b6668ec44ad0b4a Mon Sep 17 00:00:00 2001
From: Adam <24621027+adoyle0@users.noreply.github.com>
Date: Tue, 25 Apr 2023 15:43:11 -0400
Subject: [PATCH] ay

---
 lightning/src/components/AccordionTest.tsx |  2 +-
 lightning/src/components/MapContext.tsx    | 24 ++++++++++++++++++++++
 lightning/src/components/Toolbox.tsx       |  4 ++--
 lightning/src/components/map/BadassMap.tsx |  9 +++-----
 lightning/src/root.tsx                     | 17 ++++++++-------
 lightning/src/routes/index.tsx             |  2 ++
 6 files changed, 42 insertions(+), 16 deletions(-)
 create mode 100644 lightning/src/components/MapContext.tsx

diff --git a/lightning/src/components/AccordionTest.tsx b/lightning/src/components/AccordionTest.tsx
index dc0cc60..006f5cf 100644
--- a/lightning/src/components/AccordionTest.tsx
+++ b/lightning/src/components/AccordionTest.tsx
@@ -27,7 +27,7 @@ export default function AccordionTest() {
     const [stations, { setStationsRequest }] = useStationsContext();
 
     return (
-        <Show when={stations()} fallback="<p>Loading Stations...</p>">
+        <Show when={stations()} fallback="Loading Stations...">
             <ErrorBoundary fallback={<p>pretty list broke</p>}>
                 <Accordion class="space-y-2" defaultValue={stations()[0]} toggleable>
                     <For each={stations()} fallback={<div>Loading...</div>}>
diff --git a/lightning/src/components/MapContext.tsx b/lightning/src/components/MapContext.tsx
new file mode 100644
index 0000000..e5f9c4c
--- /dev/null
+++ b/lightning/src/components/MapContext.tsx
@@ -0,0 +1,24 @@
+import { createSignal, createContext, createResource, useContext } from "solid-js";
+
+import type { Viewport } from "solid-map-gl";
+
+export const MapContext = createContext();
+
+
+export function MapContextProvider(props: any) {
+    const [viewport, setViewport] = createSignal<Viewport>({
+        center: { lng: -71.05625, lat: 42.36, },
+        zoom: 15.5,
+        bearing: 160,
+        pitch: 60,
+    });
+
+    return (
+        <MapContext.Provider value={[viewport, { setViewport }]}>
+            {props.children}
+        </MapContext.Provider>
+    );
+};
+
+
+export const useMapContext = () => useContext(MapContext);
diff --git a/lightning/src/components/Toolbox.tsx b/lightning/src/components/Toolbox.tsx
index 3a2cb4f..77d9772 100644
--- a/lightning/src/components/Toolbox.tsx
+++ b/lightning/src/components/Toolbox.tsx
@@ -1,10 +1,10 @@
 import type { JSX } from "solid-js"
 import type { Viewport } from "solid-map-gl";
-
-import { setViewport } from '~/components/map/BadassMap';
+import { useMapContext } from "./MapContext";
 
 
 export function Toolbox() {
+    const [viewport, { setViewport }] = useMapContext();
     return (
         <ul>
             <h3>Toolbox</h3>
diff --git a/lightning/src/components/map/BadassMap.tsx b/lightning/src/components/map/BadassMap.tsx
index 012b102..fcf8d1e 100644
--- a/lightning/src/components/map/BadassMap.tsx
+++ b/lightning/src/components/map/BadassMap.tsx
@@ -13,16 +13,12 @@ const MapArcLayer = unstable_clientOnly(() => import('~/components/map/MapArcLay
 
 import 'maplibre-gl/dist/maplibre-gl.css';
 import StyleJson from '~/style/style.json';
+import { useMapContext } from '../MapContext';
 
 
-export const [viewport, setViewport] = createSignal<Viewport>({
-    center: { lng: -71.05625, lat: 42.36, },
-    zoom: 15.5,
-    bearing: 160,
-    pitch: 60,
-});
 
 export default function BadassMap(props: any) {
+    const [viewport, { setViewport }] = useMapContext();
     return (
         <MapGL
             mapLib={maplibre}
@@ -31,6 +27,7 @@ export default function BadassMap(props: any) {
                 style: StyleJson,
                 maxPitch: 85,
                 antialias: true,
+                interactive: true,
                 renderWorldCopies: false,
             } as MapOptions}
             viewport={viewport()}
diff --git a/lightning/src/root.tsx b/lightning/src/root.tsx
index a0b9727..4f7e16c 100644
--- a/lightning/src/root.tsx
+++ b/lightning/src/root.tsx
@@ -4,6 +4,7 @@ import { A, Body, ErrorBoundary, FileRoutes, Head, Html, Meta, Routes, Scripts,
 import type { JSX } from "solid-js";
 
 import { StationsProvider } from "./components/StationsContext";
+import { MapContextProvider } from "./components/MapContext.tsx";
 import BadassMap from './components/map/BadassMap';
 
 import "./root.css";
@@ -22,13 +23,15 @@ export default function Root() {
             <Body>
                 <ErrorBoundary>
                     <StationsProvider>
-                        <A href="/">Map</A>
-                        <A href="/stations">Stations</A>
-                        <A href="/about">About</A>
-                        <Routes>
-                            <FileRoutes />
-                        </Routes>
-                        <BadassMap />
+                        <MapContextProvider>
+                            <A href="/">Map</A>
+                            <A href="/stations">Stations</A>
+                            <A href="/about">About</A>
+                            <Routes>
+                                <FileRoutes />
+                            </Routes>
+                            <BadassMap />
+                        </MapContextProvider>
                     </StationsProvider>
                 </ErrorBoundary>
                 <Scripts />
diff --git a/lightning/src/routes/index.tsx b/lightning/src/routes/index.tsx
index e1000af..86cb23d 100644
--- a/lightning/src/routes/index.tsx
+++ b/lightning/src/routes/index.tsx
@@ -1,12 +1,14 @@
 import { Title, } from 'solid-start';
 
 import type { JSX } from 'solid-js';
+import { Toolbox } from '~/components/Toolbox';
 
 
 export default function Home() {
     return (
         <>
             <Title>Ride the Lightning</Title>
+            <Toolbox />
         </>
     ) as JSX.Element;
 };