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(); const [stations, { setStationsRequest }] = useStationsContext();
return ( return (
<Show when={stations()} fallback="<p>Loading Stations...</p>"> <Show when={stations()} fallback="Loading Stations...">
<ErrorBoundary fallback={<p>pretty list broke</p>}> <ErrorBoundary fallback={<p>pretty list broke</p>}>
<Accordion class="space-y-2" defaultValue={stations()[0]} toggleable> <Accordion class="space-y-2" defaultValue={stations()[0]} toggleable>
<For each={stations()} fallback={<div>Loading...</div>}> <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 { JSX } from "solid-js"
import type { Viewport } from "solid-map-gl"; import type { Viewport } from "solid-map-gl";
import { useMapContext } from "./MapContext";
import { setViewport } from '~/components/map/BadassMap';
export function Toolbox() { export function Toolbox() {
const [viewport, { setViewport }] = useMapContext();
return ( return (
<ul> <ul>
<h3>Toolbox</h3> <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 'maplibre-gl/dist/maplibre-gl.css';
import StyleJson from '~/style/style.json'; 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) { export default function BadassMap(props: any) {
const [viewport, { setViewport }] = useMapContext();
return ( return (
<MapGL <MapGL
mapLib={maplibre} mapLib={maplibre}
@ -31,6 +27,7 @@ export default function BadassMap(props: any) {
style: StyleJson, style: StyleJson,
maxPitch: 85, maxPitch: 85,
antialias: true, antialias: true,
interactive: true,
renderWorldCopies: false, renderWorldCopies: false,
} as MapOptions} } as MapOptions}
viewport={viewport()} 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 type { JSX } from "solid-js";
import { StationsProvider } from "./components/StationsContext"; import { StationsProvider } from "./components/StationsContext";
import { MapContextProvider } from "./components/MapContext.tsx";
import BadassMap from './components/map/BadassMap'; import BadassMap from './components/map/BadassMap';
import "./root.css"; import "./root.css";
@ -22,13 +23,15 @@ export default function Root() {
<Body> <Body>
<ErrorBoundary> <ErrorBoundary>
<StationsProvider> <StationsProvider>
<A href="/">Map</A> <MapContextProvider>
<A href="/stations">Stations</A> <A href="/">Map</A>
<A href="/about">About</A> <A href="/stations">Stations</A>
<Routes> <A href="/about">About</A>
<FileRoutes /> <Routes>
</Routes> <FileRoutes />
<BadassMap /> </Routes>
<BadassMap />
</MapContextProvider>
</StationsProvider> </StationsProvider>
</ErrorBoundary> </ErrorBoundary>
<Scripts /> <Scripts />

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

@ -1,12 +1,14 @@
import { Title, } from 'solid-start'; import { Title, } from 'solid-start';
import type { JSX } from 'solid-js'; import type { JSX } from 'solid-js';
import { Toolbox } from '~/components/Toolbox';
export default function Home() { export default function Home() {
return ( return (
<> <>
<Title>Ride the Lightning</Title> <Title>Ride the Lightning</Title>
<Toolbox />
</> </>
) as JSX.Element; ) as JSX.Element;
}; };