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

cleanup

Browse source
This commit is contained in:
Adam 2023-04-22 05:07:11 -04:00
parent 92b81886b4
commit 1ecaec1e51
12 changed files with 245 additions and 250 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
lightning/src/components/BadassMap.tsx
View file

@ -3,10 +3,11 @@ import * as maplibre from 'maplibre-gl';
import MapControls from './MapControls'; import MapControls from './MapControls';
import type { JSX } from 'solid-js'; import type { JSX } from 'solid-js';
import type { MapOptions } from 'maplibre-gl';
// deck.gl // deck.gl
import { unstable_clientOnly } from 'solid-start'; import { unstable_clientOnly } from 'solid-start';
const MapScatLayer = unstable_clientOnly( () => import('~/components/MapScatLayer')); const MapScatLayer = unstable_clientOnly(() => import('~/components/MapScatLayer'));
const MapArcLayer = unstable_clientOnly(() => import('~/components/MapArcLayer')); const MapArcLayer = unstable_clientOnly(() => import('~/components/MapArcLayer'));
import { arcData, scatData, viewport, setViewport } from '~/root'; import { arcData, scatData, viewport, setViewport } from '~/root';
@ -15,25 +16,23 @@ import StyleJson from '~/style/style.json';
export default function BadassMap() { export default function BadassMap() {
return ( return (<MapGL
<> mapLib={maplibre}
<MapGL options={{
mapLib={maplibre} container: 'solid-map-gl will override me',
options={{ style: StyleJson,
container: 'solid-map-gl will override me', maxPitch: 85,
style: StyleJson, antialias: true,
maxPitch: 85, renderWorldCopies: false,
antialias: true, } as MapOptions}
renderWorldCopies: false, viewport={viewport()}
}} onViewportChange={(evt: Viewport) => setViewport(evt)}
viewport={viewport()} transitionType="flyTo"
onViewportChange={(evt: Viewport) => setViewport(evt)} >
transitionType="flyTo"
> <MapScatLayer data={scatData()} />
<MapScatLayer data={scatData()} /> <MapArcLayer data={arcData()} />
<MapArcLayer data={arcData()} /> <MapControls />
<MapControls />
</MapGL > </MapGL >) as JSX.Element;
</>
) as JSX.Element;
}; };

26
lightning/src/components/MapArcLayer.tsx
View file

@ -4,19 +4,17 @@ import { Layer } from 'solid-map-gl';
import type { JSX } from 'solid-js'; import type { JSX } from 'solid-js';
export default function MapArcLayer(props: any) {
return ( export default function MapArcLayer(props: any) {
<Layer customLayer={ return (<Layer customLayer={
new MapboxLayer({ new MapboxLayer({
id: 'deckgl-arc', id: 'deckgl-arc',
type: ArcLayer, type: ArcLayer,
data: props.data, data: props.data,
getSourcePosition: (d: any) => d.source, getSourcePosition: (d: any) => d.source,
getTargetPosition: (d: any) => d.target, getTargetPosition: (d: any) => d.target,
getSourceColor: [200, 0, 0], getSourceColor: [200, 0, 0],
getTargetColor: [0, 230, 0], getTargetColor: [0, 230, 0],
getWidth: 6, getWidth: 6,
} as any)} /> } as any)} />) as JSX.Element;
) as JSX.Element;
}; };

87
lightning/src/components/MapControls.tsx
View file

@ -10,54 +10,51 @@ import type {
export default function MapControls() { export default function MapControls() {
return (<>
return ( <Control
<> type="navigation"
position="top-right"
options={{
showCompass: true,
showZoom: true,
visualizePitch: true,
} as NavigationOptions}
/>
<Control <Control
type="navigation" type="geolocate"
position="top-right" position="top-right"
options={{ options={{
showCompass: true, positionOptions: {
showZoom: true, enableHighAccuracy: false,
visualizePitch: true, timeout: 6000,
} as NavigationOptions} maximumAge: 0,
/> },
fitBoundsOptions: { maxZoom: 15 },
trackUserLocation: false,
showAccuracyCircle: false,
showUserLocation: true,
} as GeolocateOptions}
/>
<Control <Control
type="geolocate" type="attribution"
position="top-right" position="bottom-right"
options={{ options={{
positionOptions: { compact: false,
enableHighAccuracy: false, customAttribution: 'OpenStreetMap',
timeout: 6000, } as AttributionOptions}
maximumAge: 0, />
},
fitBoundsOptions: { maxZoom: 15 },
trackUserLocation: false,
showAccuracyCircle: false,
showUserLocation: true,
} as GeolocateOptions}
/>
<Control <Control
type="attribution" type="scale"
position="bottom-right" position="bottom-left"
options={{ options={{
compact: false, maxWidth: 100,
customAttribution: 'OpenStreetMap', unit: 'imperial',
} as AttributionOptions} } as ScaleOptions}
/> />
<Control </>) as JSX.Element;
type="scale"
position="bottom-left"
options={{
maxWidth: 100,
unit: 'imperial',
} as ScaleOptions}
/>
</>
) as JSX.Element;
}; };

23
lightning/src/components/MapScatLayer.tsx
View file

@ -6,17 +6,14 @@ import type { JSX } from 'solid-js';
export default function MapScatLayer(props: any) { export default function MapScatLayer(props: any) {
return (<Layer customLayer={
return ( new MapboxLayer({
<Layer customLayer={ id: 'deckgl-scatterplot',
new MapboxLayer({ type: ScatterplotLayer,
id: 'deckgl-scatterplot', data: props.data,
type: ScatterplotLayer, getPosition: (d: any) => d.coordinates,
data: props.data, getRadius: 30,
getPosition: (d: any) => d.coordinates, getFillColor: [255, 140, 0],
getRadius: 30, getLineColor: [0, 0, 0,],
getFillColor: [255, 140, 0], } as any)} />) as JSX.Element;
getLineColor: [0, 0, 0,],
} as any)} />
) as JSX.Element;
}; };

32
lightning/src/components/MapScenegraphLayer.tsx
View file

@ -4,22 +4,20 @@ import { Layer } from 'solid-map-gl';
import type { JSX } from 'solid-js'; import type { JSX } from 'solid-js';
export default function MapScenegraphLayer(props: any) {
return ( export default function MapScenegraphLayer(props: any) {
<Layer customLayer={new MapboxLayer({ return (<Layer customLayer={new MapboxLayer({
id: 'deckgl-scenegraph', id: 'deckgl-scenegraph',
type: ScenegraphLayer, type: ScenegraphLayer,
data: props.data, data: props.data,
pickable: true, pickable: true,
scenegraph: 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF-Binary/BoxAnimated.glb', scenegraph: 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF-Binary/BoxAnimated.glb',
getPosition: d => d.coordinates, getPosition: d => d.coordinates,
getOrientation: d => [0, Math.random() * 180, 90], getOrientation: d => [0, Math.random() * 180, 90],
_animations: { _animations: {
'*': { speed: 5 } '*': { speed: 5 }
}, },
sizeScale: 500, sizeScale: 500,
_lighting: 'pbr', _lighting: 'pbr',
} as any)} /> } as any)} />) as JSX.Element;
) as JSX.Element;
}; };

28
lightning/src/components/StationsContext.tsx
View file

@ -2,6 +2,7 @@ import { createContext, useContext, createResource } from "solid-js";
import type { JSX } from "solid-js"; import type { JSX } from "solid-js";
type ChargingStation = { type ChargingStation = {
Name: string Name: string
PhoneNumer: string PhoneNumer: string
@ -45,20 +46,21 @@ const TEST_PACKET: StationRequest = {
const StationsContext = createContext(); const StationsContext = createContext();
const [stations] = createResource(async () => {
const response = await fetch("https://kevinfwu.com/getnearest", {
method: "POST",
cache: 'default',
body: JSON.stringify(TEST_PACKET),
headers: { 'Content-Type': 'application/json' }
}); return await response.json() as Promise<StationResponse[]>;
});
export function StationsProvider(props: any) { export function StationsProvider(props: any) {
const [stations] = createResource(async () => { return (<StationsContext.Provider value={stations()}>
const response = await fetch("https://kevinfwu.com/getnearest", { {props.children}
method: "POST", </StationsContext.Provider>) as JSX.Element;
cache: 'default',
body: JSON.stringify(TEST_PACKET),
headers: { 'Content-Type': 'application/json' }
}); return await response.json() as Promise<StationResponse[]>;
});
return (
<StationsContext.Provider value={stations()}>
{props.children}
</StationsContext.Provider>
) as JSX.Element;
}; };
export function getStations() { return useContext(StationsContext); }; export function getStations() { return useContext(StationsContext); };

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

@ -5,25 +5,22 @@ import { setViewport } from '~/root';
export function Toolbox() { export function Toolbox() {
return (<ul>
<h3>Toolbox</h3>
return ( <li> <button onClick={() => setViewport<Viewport>({
<ul> center: { lng: -71.05625, lat: 42.36, },
<h3>Toolbox</h3> zoom: 15.5,
bearing: 160,
pitch: 60,
})} > Boston </button> </li>
<li> <button onClick={() => setViewport<Viewport>({ <li> <button onClick={() => setViewport<Viewport>({
center: { lng: -71.05625, lat: 42.36, }, center: { lng: -74.0112660425065, lat: 40.70689167578798 },
zoom: 15.5, zoom: 15.5,
bearing: 160, bearing: 10,
pitch: 60, pitch: 60,
})} > Boston </button> </li> })} > NYC </button> </li>
<li> <button onClick={() => setViewport<Viewport>({ </ul>) as JSX.Element;
center: { lng: -74.0112660425065, lat: 40.70689167578798 },
zoom: 15.5,
bearing: 10,
pitch: 60,
})} > NYC </button> </li>
</ul>
) as JSX.Element;
}; };

10
lightning/src/root.css
View file

@ -4,12 +4,11 @@ body {
font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif; 'Open Sans', 'Helvetica Neue', sans-serif;
} }
a { a {
margin-right: 1rem; margin-right: 1rem;
} }
main {
background-color: hsla(230, 19%, 17%, 0);
}
h1 { h1 {
color: #36EEE0; color: #36EEE0;
text-transform: uppercase; text-transform: uppercase;
@ -17,14 +16,19 @@ h1 {
font-weight: 300; font-weight: 300;
line-height: 1.1; line-height: 1.1;
} }
p { p {
line-height: 1.35; line-height: 1.35;
} }
@media (min-width: 480px) { @media (min-width: 480px) {
h1 { h1 {
max-width: none; max-width: none;
} }
p { p {
max-width: none; max-width: none;
} }
} }

64
lightning/src/root.tsx
View file

@ -1,11 +1,20 @@
// @refresh reload // @refresh reload
import { Suspense, createSignal, createEffect } from "solid-js"; import { Suspense, createSignal } from "solid-js";
import { A, Body, ErrorBoundary, FileRoutes, Head, Html, Meta, Routes, Scripts, Title } from "solid-start"; import { A, Body, ErrorBoundary, FileRoutes, Head, Html, Meta, Routes, Scripts, Title } from "solid-start";
import "./root.css"; import "./root.css";
import BadassMap from './components/BadassMap'; import BadassMap from './components/BadassMap';
import { StationsProvider } from "./components/StationsContext";
import type { Viewport } from "solid-map-gl"; import type { Viewport } from "solid-map-gl";
import type { JSX } from "solid-js";
type ScatData = {
coordinates: number[]
}
type ArcData = {
source: number[],
target: number[]
}
const TEST = { const TEST = {
FAN: { LngLatLike: { lng: -71.05625, lat: 42.36, }, coords: [-71.05625, 42.36] }, FAN: { LngLatLike: { lng: -71.05625, lat: 42.36, }, coords: [-71.05625, 42.36] },
@ -16,7 +25,7 @@ const TEST = {
NSE: { LngLatLike: { lng: -74.0112660425065, lat: 40.70689167578798 }, coords: [-74.0112660425065, 40.70689167578798], }, NSE: { LngLatLike: { lng: -74.0112660425065, lat: 40.70689167578798 }, coords: [-74.0112660425065, 40.70689167578798], },
}; };
export const [scatData, setScatData] = createSignal([ export const [scatData, setScatData] = createSignal<ScatData[]>([
{ coordinates: TEST.FAN.coords }, { coordinates: TEST.FAN.coords },
{ coordinates: TEST.GDT.coords }, { coordinates: TEST.GDT.coords },
{ coordinates: TEST.BBC.coords }, { coordinates: TEST.BBC.coords },
@ -25,7 +34,7 @@ export const [scatData, setScatData] = createSignal([
{ coordinates: TEST.NSE.coords }, { coordinates: TEST.NSE.coords },
]); ]);
export const [arcData, setArcData] = createSignal([ export const [arcData, setArcData] = createSignal<ArcData[]>([
{ source: TEST.FAN.coords, target: TEST.GDT.coords }, { source: TEST.FAN.coords, target: TEST.GDT.coords },
{ source: TEST.FAN.coords, target: TEST.BBC.coords }, { source: TEST.FAN.coords, target: TEST.BBC.coords },
{ source: TEST.FAN.coords, target: TEST.GAR.coords }, { source: TEST.FAN.coords, target: TEST.GAR.coords },
@ -33,32 +42,29 @@ export const [arcData, setArcData] = createSignal([
]); ]);
export const [USER_LOC] = createSignal(TEST.FAN.LngLatLike); export const [USER_LOC] = createSignal(TEST.FAN.LngLatLike);
export const [viewport, setViewport] = createSignal<Viewport>(); export const [viewport, setViewport] = createSignal<Viewport>();
export default function Root() { export default function Root() {
return ( return (<Html lang="en">
<Html lang="en"> <Head>
<Head> <Title>Ride the Lightning</Title>
<Title>Ride the Lightning</Title> <Meta charset="utf-8" />
<Meta charset="utf-8" /> <Meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta name="viewport" content="width=device-width, initial-scale=1" /> </Head>
</Head>
<Body> <Body>
<Suspense> <Suspense>
<ErrorBoundary> <ErrorBoundary>
<StationsProvider> <A href="/">Map</A>
<A href="/">Map</A> <A href="/about">About</A>
<A href="/about">About</A> <Routes>
<Routes> <FileRoutes />
<FileRoutes /> </Routes>
</Routes> <BadassMap />
<BadassMap /> </ErrorBoundary>
</StationsProvider> </Suspense>
</ErrorBoundary> <Scripts />
</Suspense> </Body>
<Scripts />
</Body> </Html>) as JSX.Element;
</Html>
);
}; };

39
lightning/src/routes/[...404].tsx
View file

@ -1,19 +1,24 @@
import { Title } from "solid-start"; import { Title } from 'solid-start';
import { HttpStatusCode } from "solid-start/server"; import { HttpStatusCode } from 'solid-start/server';
import type { JSX } from 'solid-js';
export default function NotFound() { export default function NotFound() {
return ( return (<main>
<main> <Title>Not Found</Title>
<Title>Not Found</Title>
<HttpStatusCode code={404} /> <HttpStatusCode code={404} />
<h1>Page Not Found</h1>
<p> <h1>Page Not Found</h1>
Visit{" "}
<a href="https://start.solidjs.com" target="_blank"> <p>
start.solidjs.com Visit{" "}
</a>{" "} <a href="https://start.solidjs.com" target="_blank">
to learn how to build SolidStart apps. start.solidjs.com
</p> </a>{" "}
</main> to learn how to build SolidStart apps.
); </p>
}
</main>) as JSX.Element;
};

101
lightning/src/routes/about.tsx
View file

@ -4,59 +4,52 @@ import type { JSX } from 'solid-js';
export default function Home() { export default function Home() {
return (<main>
<Title>About Lightning</Title>
return ( <h1>About</h1>
<main>
<Title>About Lightning</Title> <ul>
<h1>About</h1>
<ul> <li> <a href="https://www.openstreetmap.org/" target="_blank">
<li> OpenStreetMap
<a href="https://www.openstreetmap.org/" target="_blank"> </a> </li>
OpenStreetMap
</a> <li> <a href="https://openmaptiles.org/" target="_blank">
</li> OpenMapTiles
<li> </a> </li>
<a href="https://openmaptiles.org/" target="_blank">
OpenMapTiles <li> <a href="https://tilemaker.org/" target="_blank">
</a> Tilemaker
</li> </a> </li>
<li>
<a href="https://tilemaker.org/" target="_blank"> <li> <a href="https://github.com/maplibre/martin" target="_blank">
Tilemaker Martin
</a> </a> </li>
</li>
<li> <li> <a href="https://maplibre.org/" target="_blank">
<a href="https://github.com/maplibre/martin" target="_blank"> MapLibre
Martin </a> </li>
</a>
</li> <li> <a href="https://start.solidjs.com/" target="_blank">
<li> SolidStart
<a href="https://maplibre.org/" target="_blank"> </a> </li>
MapLibre
</a> <li> <a href="https://gis-hub.gitbook.io/solid-map-gl/" target="_blank">
</li> Solid Map GL
<li> </a> </li>
<a href="https://start.solidjs.com/" target="_blank">
SolidStart <li> <a href="https://deck.gl/" target="_blank">
</a> deck.gl
</li> </a> </li>
<li>
<a href="https://gis-hub.gitbook.io/solid-map-gl/" target="_blank"> </ul>
Solid Map GL
</a> <img src='5Q14.gif' />
</li>
<li> <p> <a href="https://github.com/adoyle0/maps" target="_blank">
<a href="https://deck.gl/" target="_blank"> github.com/adoyle0/maps
deck.gl </a> </p>
</a>
</li> </main>) as JSX.Element;
</ul>
<img src='5Q14.gif' />
<p>
<a href="https://github.com/adoyle0/maps" target="_blank">
github.com/adoyle0/maps
</a>
</p>
</main>
) as JSX.Element;
}; };

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

@ -4,9 +4,8 @@ import type { JSX } from 'solid-js';
export default function Home() { export default function Home() {
return ( return (<main>
<main> <Title>Ride the Lightning</Title>
<Title>Ride the Lightning</Title>
</main> </main>) as JSX.Element;
) as JSX.Element;
}; };