diff --git a/lightning/src/components/AccordionTest.tsx b/lightning/src/components/AccordionTest.tsx
index 25d7be0..9ddc918 100644
--- a/lightning/src/components/AccordionTest.tsx
+++ b/lightning/src/components/AccordionTest.tsx
@@ -1,20 +1,9 @@
-import {
- Accordion,
- AccordionButton,
- AccordionHeader,
- AccordionItem,
- AccordionPanel,
-} from 'solid-headless';
-import {
- createResource,
- ErrorBoundary,
- For,
- Show,
-} from 'solid-js';
+import { Accordion, AccordionButton, AccordionHeader, AccordionItem, AccordionPanel, } from 'solid-headless';
+import { ErrorBoundary, For, Show, } from 'solid-js';
import type { JSX } from 'solid-js';
-import { stationsRequest, fetchStations } from '~/lib/fetchStations';
+import { useStationsContext } from './StationsContext';
function ChevronUpIcon(props: JSX.IntrinsicElements['svg']) {
return (
}>
-
+
}>
{(station) => (
diff --git a/lightning/src/components/BadassMap.tsx b/lightning/src/components/BadassMap.tsx
deleted file mode 100644
index 52c2ce6..0000000
--- a/lightning/src/components/BadassMap.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import MapGL, { Viewport } from 'solid-map-gl';
-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';
-const MapScatLayer = unstable_clientOnly(() => import('~/components/MapScatLayer'));
-const MapArcLayer = unstable_clientOnly(() => import('~/components/MapArcLayer'));
-
-import { arcData, scatData, viewport, setViewport } from '~/root';
-import 'maplibre-gl/dist/maplibre-gl.css';
-import StyleJson from '~/style/style.json';
-
-
-export default function BadassMap() {
- return ( setViewport(evt)}
- transitionType="flyTo"
- >
-
-
-
-
-
- ) as JSX.Element;
-};
diff --git a/lightning/src/components/MapArcLayer.tsx b/lightning/src/components/MapArcLayer.tsx
deleted file mode 100644
index 6e7a625..0000000
--- a/lightning/src/components/MapArcLayer.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { MapboxLayer } from '@deck.gl/mapbox/typed';
-import { ArcLayer } from '@deck.gl/layers/typed';
-import { Layer } from 'solid-map-gl';
-
-import type { JSX } from 'solid-js';
-
-
-export default function MapArcLayer(props: any) {
- return ( d.source,
- getTargetPosition: (d: any) => d.target,
- getSourceColor: [200, 0, 0],
- getTargetColor: [0, 230, 0],
- getWidth: 6,
- } as any)} />) as JSX.Element;
-};
diff --git a/lightning/src/components/MapControls.tsx b/lightning/src/components/MapControls.tsx
deleted file mode 100644
index 70e1859..0000000
--- a/lightning/src/components/MapControls.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Control } from 'solid-map-gl';
-
-import type { JSX } from 'solid-js';
-import type {
- NavigationOptions,
- GeolocateOptions,
- AttributionOptions,
- ScaleOptions,
-} from 'maplibre-gl';
-
-
-export default function MapControls() {
- return (<>
-
-
-
-
-
-
-
-
-
- >) as JSX.Element;
-};
diff --git a/lightning/src/components/MapScatLayer.tsx b/lightning/src/components/MapScatLayer.tsx
deleted file mode 100644
index 9568ff0..0000000
--- a/lightning/src/components/MapScatLayer.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ScatterplotLayer } from '@deck.gl/layers/typed';
-import { MapboxLayer } from '@deck.gl/mapbox/typed';
-import { Layer } from 'solid-map-gl';
-
-import type { JSX } from 'solid-js';
-
-import { scatData } from '~/root';
-
-
-export default function MapScatLayer(props: any) {
- return ( d.coordinates,
- getRadius: 30,
- getFillColor: [255, 140, 0],
- getLineColor: [0, 0, 0,],
- } as any)} />) as JSX.Element;
-};
diff --git a/lightning/src/components/MapScenegraphLayer.tsx b/lightning/src/components/MapScenegraphLayer.tsx
deleted file mode 100644
index dc40425..0000000
--- a/lightning/src/components/MapScenegraphLayer.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { ScenegraphLayer } from '@deck.gl/mesh-layers/typed';
-import { MapboxLayer } from '@deck.gl/mapbox/typed';
-import { Layer } from 'solid-map-gl';
-
-import type { JSX } from 'solid-js';
-
-
-export default function MapScenegraphLayer(props: any) {
- return ( d.coordinates,
- getOrientation: d => [0, Math.random() * 180, 90],
- _animations: {
- '*': { speed: 5 }
- },
- sizeScale: 500,
- _lighting: 'pbr',
- } as any)} />) as JSX.Element;
-};
diff --git a/lightning/src/components/StationsContext.tsx b/lightning/src/components/StationsContext.tsx
new file mode 100644
index 0000000..b928fca
--- /dev/null
+++ b/lightning/src/components/StationsContext.tsx
@@ -0,0 +1,74 @@
+import { createSignal, createContext, createResource, useContext } from "solid-js";
+
+
+type ChargingStation = {
+ Name: string
+ PhoneNumer: string
+ IntersectionDirections: string
+ AccessTime: string
+ Connectors: string[]
+ Network: string
+ Pricing: string
+ RestrictedAccess: boolean
+ CntLevel2Chargers: number
+ CntLevel3Chargers: number
+};
+
+type Location = {
+ StreetAddress: string
+ City: string
+ State: string
+ Country: string
+ Zip: string
+ GeocodeStatus: string
+ Coordinates: string
+ CoordinateString: string
+ Stations: ChargingStation[]
+};
+
+type StationRequest = {
+ Latitude: number
+ Longitude: number
+ Distance: number
+ CountLimit: number
+};
+
+type StationResponse = {
+ Dist: number
+ Loc: Location
+};
+
+export const StationsContext = createContext();
+
+
+export function StationsProvider(props: any) {
+ const TEST_PACKET: StationRequest = {
+ Latitude: 42.36,
+ Longitude: -71.05625,
+ Distance: 10,
+ CountLimit: 10,
+ };
+
+ const [stationsRequest, setStationsRequest] = createSignal(TEST_PACKET)
+
+ async function fetchStations() {
+ const response = await fetch('https://kevinfwu.com/getnearest', {
+ method: 'POST',
+ cache: 'default',
+ body: JSON.stringify(stationsRequest()),
+ headers: { 'Content-Type': 'application/json' }
+ });
+ return await response.json() as StationResponse[];
+ };
+
+ const [stations] = createResource(stationsRequest, fetchStations);
+
+ return (
+
+ {props.children}
+
+ );
+};
+
+
+export const useStationsContext = () => useContext(StationsContext);
diff --git a/lightning/src/components/map/BadassMap.tsx b/lightning/src/components/map/BadassMap.tsx
new file mode 100644
index 0000000..8989489
--- /dev/null
+++ b/lightning/src/components/map/BadassMap.tsx
@@ -0,0 +1,42 @@
+import MapGL, { Viewport } from 'solid-map-gl';
+import * as maplibre from 'maplibre-gl';
+import MapControls from './MapControls';
+
+import { createSignal } from 'solid-js';
+
+import type { MapOptions } from 'maplibre-gl';
+import type { JSX } from 'solid-js';
+
+// deck.gl
+import { unstable_clientOnly } from 'solid-start';
+const MapScatLayer = unstable_clientOnly(() => import('~/components/map/MapScatLayer'));
+const MapArcLayer = unstable_clientOnly(() => import('~/components/map/MapArcLayer'));
+
+import 'maplibre-gl/dist/maplibre-gl.css';
+import StyleJson from '~/style/style.json';
+
+export default function BadassMap(props: any) {
+ const [viewport, setViewport] = createSignal();
+
+ return (
+ setViewport(evt)}
+ transitionType="flyTo"
+ >
+
+
+
+
+
+
+ ) as JSX.Element;
+};
diff --git a/lightning/src/components/map/MapArcLayer.tsx b/lightning/src/components/map/MapArcLayer.tsx
new file mode 100644
index 0000000..87454b9
--- /dev/null
+++ b/lightning/src/components/map/MapArcLayer.tsx
@@ -0,0 +1,26 @@
+import { MapboxLayer } from '@deck.gl/mapbox/typed';
+import { ArcLayer } from '@deck.gl/layers/typed';
+import { Layer } from 'solid-map-gl';
+
+import type { JSX } from 'solid-js';
+
+type ArcData = {
+ source: number[],
+ target: number[]
+}
+
+export default function MapArcLayer(props: any) {
+ return (
+ d.source,
+ getTargetPosition: (d: any) => d.target,
+ getSourceColor: [200, 0, 0],
+ getTargetColor: [0, 230, 0],
+ getWidth: 6,
+ } as any)} />
+ ) as JSX.Element;
+};
diff --git a/lightning/src/components/map/MapControls.tsx b/lightning/src/components/map/MapControls.tsx
new file mode 100644
index 0000000..40daa96
--- /dev/null
+++ b/lightning/src/components/map/MapControls.tsx
@@ -0,0 +1,57 @@
+import { Control } from 'solid-map-gl';
+
+import type { JSX } from 'solid-js';
+import type { NavigationOptions, GeolocateOptions, AttributionOptions, ScaleOptions, } from 'maplibre-gl';
+
+
+export default function MapControls() {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+ >
+ ) as JSX.Element;
+};
diff --git a/lightning/src/components/map/MapScatLayer.tsx b/lightning/src/components/map/MapScatLayer.tsx
new file mode 100644
index 0000000..2df08f7
--- /dev/null
+++ b/lightning/src/components/map/MapScatLayer.tsx
@@ -0,0 +1,45 @@
+import { ScatterplotLayer } from '@deck.gl/layers/typed';
+import { MapboxLayer } from '@deck.gl/mapbox/typed';
+import { Layer } from 'solid-map-gl';
+import { createEffect, createMemo, createSignal, Show } from 'solid-js';
+
+import type { JSX } from 'solid-js';
+
+import { StationsContext, useStationsContext } from '~/components/StationsContext';
+
+type ScatData = {
+ coordinates: number[]
+}
+
+
+export default function MapScatLayer(props: any) {
+ const [stations] = useStationsContext();
+
+ const [scats, setScats] = createSignal([]);
+
+ function getCoords(stations) {
+ let buf: ScatData[] = [];
+ for (const station of stations()) {
+ buf.push({ coordinates: [station.Loc.Coordinates[1], station.Loc.Coordinates[0]] })
+ };
+ console.log(buf)
+ return buf;
+ };
+ const pls = createMemo(() => setScats(getCoords(stations)));
+ console.log(scats());
+
+ return (
+
+ d.coordinates,
+ getRadius: 90,
+ getFillColor: [255, 140, 0],
+ getLineColor: [0, 0, 0,],
+ } as any)} />
+
+ ) as JSX.Element;
+};
diff --git a/lightning/src/components/map/MapScenegraphLayer.tsx b/lightning/src/components/map/MapScenegraphLayer.tsx
new file mode 100644
index 0000000..afba419
--- /dev/null
+++ b/lightning/src/components/map/MapScenegraphLayer.tsx
@@ -0,0 +1,25 @@
+import { ScenegraphLayer } from '@deck.gl/mesh-layers/typed';
+import { MapboxLayer } from '@deck.gl/mapbox/typed';
+import { Layer } from 'solid-map-gl';
+
+import type { JSX } from 'solid-js';
+
+
+export default function MapScenegraphLayer(props: any) {
+ return (
+ d.coordinates,
+ getOrientation: d => [0, Math.random() * 180, 90],
+ _animations: {
+ '*': { speed: 5 }
+ },
+ sizeScale: 500,
+ _lighting: 'pbr',
+ } as any)} />
+ ) as JSX.Element;
+};
diff --git a/lightning/src/lib/fetchStations.tsx b/lightning/src/lib/fetchStations.tsx
index d9f6ddc..c721670 100644
--- a/lightning/src/lib/fetchStations.tsx
+++ b/lightning/src/lib/fetchStations.tsx
@@ -56,15 +56,11 @@ export async function fetchStations() {
headers: { 'Content-Type': 'application/json' }
});
let resJson = await response.json();
- console.log('Response JSON: ', resJson);
let buf = [];
for (let station of resJson) {
buf.push({coordinates: [station.Loc.Coordinates[1], station.Loc.Coordinates[0]]})
};
- console.log('Scat before: ', scatData());
- console.log('Buffer: ', buf);
setScatData(buf);
- console.log('Scat after: ', scatData());
//console.log(getCoords(resJson));
return resJson as StationResponse[];
diff --git a/lightning/src/root.tsx b/lightning/src/root.tsx
index ae8f082..a0b67ee 100644
--- a/lightning/src/root.tsx
+++ b/lightning/src/root.tsx
@@ -1,82 +1,37 @@
// @refresh reload
-import {
- A,
- Body,
- ErrorBoundary,
- FileRoutes,
- Head,
- Html,
- Meta,
- Routes,
- Scripts,
- Title
-} from "solid-start";
-import { 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 BadassMap from './components/map/BadassMap';
+import { StationsProvider } from "./components/StationsContext";
-import type { Viewport } from "solid-map-gl";
import type { JSX } from "solid-js";
-import { createStore } from "solid-js/store";
-
-
-type ArcData = {
- source: number[],
- target: number[]
-}
-
-const TEST = {
- FAN: { LngLatLike: { lng: -71.05625, lat: 42.36, }, coords: [-71.05625, 42.36] },
- GDT: { LngLatLike: { lng: -71.056922, lat: 42.360919 }, coords: [-71.056922, 42.360919], },
- BBC: { LngLatLike: { lng: -71.103, lat: 42.3145 }, coords: [-71.103, 42.3145], },
- GAR: { LngLatLike: { lng: -71.062228, lat: 42.366303 }, coords: [-71.062228, 42.366303], },
- PRH: { LngLatLike: { lng: -71.053678, lat: 42.363722 }, coords: [-71.053678, 42.363722], },
- NSE: { LngLatLike: { lng: -74.0112660425065, lat: 40.70689167578798 }, coords: [-74.0112660425065, 40.70689167578798], },
-};
-
-type ScatData = {
- coordinates: number[]
-}
-export const [scatData, setScatData] = createSignal([
- { coordinates: TEST.FAN.coords },
- { coordinates: TEST.GDT.coords },
- { coordinates: TEST.BBC.coords },
- { coordinates: TEST.GAR.coords },
- { coordinates: TEST.PRH.coords },
- { coordinates: TEST.NSE.coords },
-]);
-
-export const [arcData, setArcData] = createSignal([
- { source: TEST.FAN.coords, target: TEST.GDT.coords },
- { source: TEST.FAN.coords, target: TEST.BBC.coords },
- { source: TEST.FAN.coords, target: TEST.GAR.coords },
- { source: TEST.FAN.coords, target: TEST.PRH.coords },
-]);
-
-export const [USER_LOC] = createSignal(TEST.FAN.LngLatLike);
-export const [viewport, setViewport] = createSignal();
export default function Root() {
- return (
-
- Ride the Lightning
-
-
-
+ return (
+
+
+ Ride the Lightning
+
+
+
-
-
- Map
- About
-
-
-
-
-
-
-
+
+
+
+ Map
+ Stations
+ About
+
+
+
+
+
+
+
+
- ) as JSX.Element;
+
+ ) as JSX.Element;
};
diff --git a/lightning/src/routes/index.tsx b/lightning/src/routes/index.tsx
index 39b5842..69ea31c 100644
--- a/lightning/src/routes/index.tsx
+++ b/lightning/src/routes/index.tsx
@@ -1,15 +1,10 @@
import { Title, } from 'solid-start';
-import { Suspense } from 'solid-js';
-
-import AccordionTest from '~/components/AccordionTest';
import type { JSX } from 'solid-js';
+
export default function Home() {
return (<>
Ride the Lightning
-
-
-
>) as JSX.Element;
};
diff --git a/lightning/src/routes/stations.tsx b/lightning/src/routes/stations.tsx
new file mode 100644
index 0000000..8715b3b
--- /dev/null
+++ b/lightning/src/routes/stations.tsx
@@ -0,0 +1,15 @@
+import { Title, } from 'solid-start';
+import { Suspense } from 'solid-js';
+
+import AccordionTest from '~/components/AccordionTest';
+
+import type { JSX } from 'solid-js';
+
+export default function Stations() {
+ return (<>
+ Ride the Lightning
+
+
+
+ >) as JSX.Element;
+};
diff --git a/lightning/src/scrap.tsx b/lightning/src/scrap.tsx
new file mode 100644
index 0000000..b30dea0
--- /dev/null
+++ b/lightning/src/scrap.tsx
@@ -0,0 +1,9 @@
+
+const TEST = {
+ FAN: { LngLatLike: { lng: -71.05625, lat: 42.36, }, coords: [-71.05625, 42.36] },
+ GDT: { LngLatLike: { lng: -71.056922, lat: 42.360919 }, coords: [-71.056922, 42.360919], },
+ BBC: { LngLatLike: { lng: -71.103, lat: 42.3145 }, coords: [-71.103, 42.3145], },
+ GAR: { LngLatLike: { lng: -71.062228, lat: 42.366303 }, coords: [-71.062228, 42.366303], },
+ PRH: { LngLatLike: { lng: -71.053678, lat: 42.363722 }, coords: [-71.053678, 42.363722], },
+ NSE: { LngLatLike: { lng: -74.0112660425065, lat: 40.70689167578798 }, coords: [-74.0112660425065, 40.70689167578798], },
+};