cleanup
This commit is contained in:
Adam
parent
92b81886b4
commit
1ecaec1e51
12 changed files with 245 additions and 250 deletions
|
|
@ -3,6 +3,7 @@ import * as maplibre from 'maplibre-gl';
|
|||
import MapControls from './MapControls';
|
||||
|
||||
import type { JSX } from 'solid-js';
|
||||
import type { MapOptions } from 'maplibre-gl';
|
||||
|
||||
// deck.gl
|
||||
import { unstable_clientOnly } from 'solid-start';
|
||||
|
|
@ -15,9 +16,7 @@ import StyleJson from '~/style/style.json';
|
|||
|
||||
|
||||
export default function BadassMap() {
|
||||
return (
|
||||
<>
|
||||
<MapGL
|
||||
return (<MapGL
|
||||
mapLib={maplibre}
|
||||
options={{
|
||||
container: 'solid-map-gl will override me',
|
||||
|
|
@ -25,15 +24,15 @@ export default function BadassMap() {
|
|||
maxPitch: 85,
|
||||
antialias: true,
|
||||
renderWorldCopies: false,
|
||||
}}
|
||||
} as MapOptions}
|
||||
viewport={viewport()}
|
||||
onViewportChange={(evt: Viewport) => setViewport(evt)}
|
||||
transitionType="flyTo"
|
||||
>
|
||||
|
||||
<MapScatLayer data={scatData()} />
|
||||
<MapArcLayer data={arcData()} />
|
||||
<MapControls />
|
||||
</MapGL >
|
||||
</>
|
||||
) as JSX.Element;
|
||||
|
||||
</MapGL >) as JSX.Element;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,10 +4,9 @@ import { Layer } from 'solid-map-gl';
|
|||
|
||||
import type { JSX } from 'solid-js';
|
||||
|
||||
export default function MapArcLayer(props: any) {
|
||||
|
||||
return (
|
||||
<Layer customLayer={
|
||||
export default function MapArcLayer(props: any) {
|
||||
return (<Layer customLayer={
|
||||
new MapboxLayer({
|
||||
id: 'deckgl-arc',
|
||||
type: ArcLayer,
|
||||
|
|
@ -17,6 +16,5 @@ export default function MapArcLayer(props: any) {
|
|||
getSourceColor: [200, 0, 0],
|
||||
getTargetColor: [0, 230, 0],
|
||||
getWidth: 6,
|
||||
} as any)} />
|
||||
) as JSX.Element;
|
||||
} as any)} />) as JSX.Element;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,9 +10,7 @@ import type {
|
|||
|
||||
|
||||
export default function MapControls() {
|
||||
|
||||
return (
|
||||
<>
|
||||
return (<>
|
||||
|
||||
<Control
|
||||
type="navigation"
|
||||
|
|
@ -58,6 +56,5 @@ export default function MapControls() {
|
|||
} as ScaleOptions}
|
||||
/>
|
||||
|
||||
</>
|
||||
) as JSX.Element;
|
||||
</>) as JSX.Element;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,9 +6,7 @@ import type { JSX } from 'solid-js';
|
|||
|
||||
|
||||
export default function MapScatLayer(props: any) {
|
||||
|
||||
return (
|
||||
<Layer customLayer={
|
||||
return (<Layer customLayer={
|
||||
new MapboxLayer({
|
||||
id: 'deckgl-scatterplot',
|
||||
type: ScatterplotLayer,
|
||||
|
|
@ -17,6 +15,5 @@ export default function MapScatLayer(props: any) {
|
|||
getRadius: 30,
|
||||
getFillColor: [255, 140, 0],
|
||||
getLineColor: [0, 0, 0,],
|
||||
} as any)} />
|
||||
) as JSX.Element;
|
||||
} as any)} />) as JSX.Element;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,10 +4,9 @@ import { Layer } from 'solid-map-gl';
|
|||
|
||||
import type { JSX } from 'solid-js';
|
||||
|
||||
export default function MapScenegraphLayer(props: any) {
|
||||
|
||||
return (
|
||||
<Layer customLayer={new MapboxLayer({
|
||||
export default function MapScenegraphLayer(props: any) {
|
||||
return (<Layer customLayer={new MapboxLayer({
|
||||
id: 'deckgl-scenegraph',
|
||||
type: ScenegraphLayer,
|
||||
data: props.data,
|
||||
|
|
@ -20,6 +19,5 @@ export default function MapScenegraphLayer(props: any) {
|
|||
},
|
||||
sizeScale: 500,
|
||||
_lighting: 'pbr',
|
||||
} as any)} />
|
||||
) as JSX.Element;
|
||||
} as any)} />) as JSX.Element;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { createContext, useContext, createResource } from "solid-js";
|
|||
|
||||
import type { JSX } from "solid-js";
|
||||
|
||||
|
||||
type ChargingStation = {
|
||||
Name: string
|
||||
PhoneNumer: string
|
||||
|
|
@ -45,7 +46,6 @@ const TEST_PACKET: StationRequest = {
|
|||
|
||||
const StationsContext = createContext();
|
||||
|
||||
export function StationsProvider(props: any) {
|
||||
const [stations] = createResource(async () => {
|
||||
const response = await fetch("https://kevinfwu.com/getnearest", {
|
||||
method: "POST",
|
||||
|
|
@ -54,11 +54,13 @@ export function StationsProvider(props: any) {
|
|||
headers: { 'Content-Type': 'application/json' }
|
||||
}); return await response.json() as Promise<StationResponse[]>;
|
||||
});
|
||||
return (
|
||||
<StationsContext.Provider value={stations()}>
|
||||
|
||||
|
||||
export function StationsProvider(props: any) {
|
||||
return (<StationsContext.Provider value={stations()}>
|
||||
{props.children}
|
||||
</StationsContext.Provider>
|
||||
) as JSX.Element;
|
||||
</StationsContext.Provider>) as JSX.Element;
|
||||
};
|
||||
|
||||
|
||||
export function getStations() { return useContext(StationsContext); };
|
||||
|
|
|
|||
|
|
@ -5,9 +5,7 @@ import { setViewport } from '~/root';
|
|||
|
||||
|
||||
export function Toolbox() {
|
||||
|
||||
return (
|
||||
<ul>
|
||||
return (<ul>
|
||||
<h3>Toolbox</h3>
|
||||
|
||||
<li> <button onClick={() => setViewport<Viewport>({
|
||||
|
|
@ -24,6 +22,5 @@ export function Toolbox() {
|
|||
pitch: 60,
|
||||
})} > NYC </button> </li>
|
||||
|
||||
</ul>
|
||||
) as JSX.Element;
|
||||
</ul>) as JSX.Element;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,12 +4,11 @@ body {
|
|||
font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell,
|
||||
'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
main {
|
||||
background-color: hsla(230, 19%, 17%, 0);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #36EEE0;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -17,14 +16,19 @@ h1 {
|
|||
font-weight: 300;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
|
||||
h1 {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,20 @@
|
|||
// @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 "./root.css";
|
||||
import BadassMap from './components/BadassMap';
|
||||
import { StationsProvider } from "./components/StationsContext";
|
||||
|
||||
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 = {
|
||||
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], },
|
||||
};
|
||||
|
||||
export const [scatData, setScatData] = createSignal([
|
||||
export const [scatData, setScatData] = createSignal<ScatData[]>([
|
||||
{ coordinates: TEST.FAN.coords },
|
||||
{ coordinates: TEST.GDT.coords },
|
||||
{ coordinates: TEST.BBC.coords },
|
||||
|
|
@ -25,7 +34,7 @@ export const [scatData, setScatData] = createSignal([
|
|||
{ 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.BBC.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 [viewport, setViewport] = createSignal<Viewport>();
|
||||
|
||||
export default function Root() {
|
||||
return (
|
||||
<Html lang="en">
|
||||
return (<Html lang="en">
|
||||
<Head>
|
||||
<Title>Ride the Lightning</Title>
|
||||
<Meta charset="utf-8" />
|
||||
<Meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</Head>
|
||||
|
||||
<Body>
|
||||
<Suspense>
|
||||
<ErrorBoundary>
|
||||
<StationsProvider>
|
||||
<A href="/">Map</A>
|
||||
<A href="/about">About</A>
|
||||
<Routes>
|
||||
<FileRoutes />
|
||||
</Routes>
|
||||
<BadassMap />
|
||||
</StationsProvider>
|
||||
</ErrorBoundary>
|
||||
</Suspense>
|
||||
<Scripts />
|
||||
</Body>
|
||||
</Html>
|
||||
);
|
||||
|
||||
</Html>) as JSX.Element;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,12 +1,17 @@
|
|||
import { Title } from "solid-start";
|
||||
import { HttpStatusCode } from "solid-start/server";
|
||||
import { Title } from 'solid-start';
|
||||
import { HttpStatusCode } from 'solid-start/server';
|
||||
|
||||
import type { JSX } from 'solid-js';
|
||||
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<main>
|
||||
return (<main>
|
||||
<Title>Not Found</Title>
|
||||
|
||||
<HttpStatusCode code={404} />
|
||||
|
||||
<h1>Page Not Found</h1>
|
||||
|
||||
<p>
|
||||
Visit{" "}
|
||||
<a href="https://start.solidjs.com" target="_blank">
|
||||
|
|
@ -14,6 +19,6 @@ export default function NotFound() {
|
|||
</a>{" "}
|
||||
to learn how to build SolidStart apps.
|
||||
</p>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
</main>) as JSX.Element;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,59 +4,52 @@ import type { JSX } from 'solid-js';
|
|||
|
||||
|
||||
export default function Home() {
|
||||
|
||||
return (
|
||||
<main>
|
||||
return (<main>
|
||||
<Title>About Lightning</Title>
|
||||
|
||||
<h1>About</h1>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://www.openstreetmap.org/" target="_blank">
|
||||
|
||||
<li> <a href="https://www.openstreetmap.org/" target="_blank">
|
||||
OpenStreetMap
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://openmaptiles.org/" target="_blank">
|
||||
</a> </li>
|
||||
|
||||
<li> <a href="https://openmaptiles.org/" target="_blank">
|
||||
OpenMapTiles
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://tilemaker.org/" target="_blank">
|
||||
</a> </li>
|
||||
|
||||
<li> <a href="https://tilemaker.org/" target="_blank">
|
||||
Tilemaker
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/maplibre/martin" target="_blank">
|
||||
</a> </li>
|
||||
|
||||
<li> <a href="https://github.com/maplibre/martin" target="_blank">
|
||||
Martin
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://maplibre.org/" target="_blank">
|
||||
</a> </li>
|
||||
|
||||
<li> <a href="https://maplibre.org/" target="_blank">
|
||||
MapLibre
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://start.solidjs.com/" target="_blank">
|
||||
</a> </li>
|
||||
|
||||
<li> <a href="https://start.solidjs.com/" target="_blank">
|
||||
SolidStart
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://gis-hub.gitbook.io/solid-map-gl/" target="_blank">
|
||||
</a> </li>
|
||||
|
||||
<li> <a href="https://gis-hub.gitbook.io/solid-map-gl/" target="_blank">
|
||||
Solid Map GL
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://deck.gl/" target="_blank">
|
||||
</a> </li>
|
||||
|
||||
<li> <a href="https://deck.gl/" target="_blank">
|
||||
deck.gl
|
||||
</a>
|
||||
</li>
|
||||
</a> </li>
|
||||
|
||||
</ul>
|
||||
|
||||
<img src='5Q14.gif' />
|
||||
<p>
|
||||
<a href="https://github.com/adoyle0/maps" target="_blank">
|
||||
|
||||
<p> <a href="https://github.com/adoyle0/maps" target="_blank">
|
||||
github.com/adoyle0/maps
|
||||
</a>
|
||||
</p>
|
||||
</main>
|
||||
) as JSX.Element;
|
||||
</a> </p>
|
||||
|
||||
</main>) as JSX.Element;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,9 +4,8 @@ import type { JSX } from 'solid-js';
|
|||
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main>
|
||||
return (<main>
|
||||
<Title>Ride the Lightning</Title>
|
||||
</main>
|
||||
) as JSX.Element;
|
||||
|
||||
</main>) as JSX.Element;
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue