adam/maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

ay

Browse source
This commit is contained in:
Adam 2023-04-25 15:43:11 -04:00
parent 43f3075c3b
commit c3f4e5a283
6 changed files with 42 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
lightning/src/components/AccordionTest.tsx
View file

@ -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>}>

24
lightning/src/components/MapContext.tsx Normal file
View file

@ -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);

4
lightning/src/components/Toolbox.tsx
View file

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

9
lightning/src/components/map/BadassMap.tsx
View file

@ -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()}

17
lightning/src/root.tsx
View file

@ -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 />

2
lightning/src/routes/index.tsx
View file

@ -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;
};