set up for context
This commit is contained in:
Adam
parent
349cfe074a
commit
d3e0ecb0a7
16 changed files with 207 additions and 268 deletions
|
|
@ -12,7 +12,7 @@
|
|||
"postcss": "^8.4.23",
|
||||
"solid-start-node": "^0.2.26",
|
||||
"typescript": "^4.9.5",
|
||||
"vite": "^4.3.0"
|
||||
"vite": "^4.3.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@deck.gl/layers": "^8.9.8",
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
"solid-js": "^1.7.3",
|
||||
"solid-map-gl": "^1.7.2",
|
||||
"solid-start": "^0.2.26",
|
||||
"undici": "^5.21.2"
|
||||
"undici": "^5.22.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.8"
|
||||
|
|
|
|||
56
lightning/pnpm-lock.yaml
generated
56
lightning/pnpm-lock.yaml
generated
|
|
@ -30,10 +30,10 @@ dependencies:
|
|||
version: 1.7.2(empty-npm-package@1.0.0)
|
||||
solid-start:
|
||||
specifier: ^0.2.26
|
||||
version: 0.2.26(@solidjs/meta@0.28.4)(@solidjs/router@0.8.2)(solid-js@1.7.3)(solid-start-node@0.2.26)(vite@4.3.0)
|
||||
version: 0.2.26(@solidjs/meta@0.28.4)(@solidjs/router@0.8.2)(solid-js@1.7.3)(solid-start-node@0.2.26)(vite@4.3.1)
|
||||
undici:
|
||||
specifier: ^5.21.2
|
||||
version: 5.21.2
|
||||
specifier: ^5.22.0
|
||||
version: 5.22.0
|
||||
|
||||
devDependencies:
|
||||
'@types/node':
|
||||
|
|
@ -47,13 +47,13 @@ devDependencies:
|
|||
version: 8.4.23
|
||||
solid-start-node:
|
||||
specifier: ^0.2.26
|
||||
version: 0.2.26(solid-start@0.2.26)(undici@5.21.2)(vite@4.3.0)
|
||||
version: 0.2.26(solid-start@0.2.26)(undici@5.22.0)(vite@4.3.1)
|
||||
typescript:
|
||||
specifier: ^4.9.5
|
||||
version: 4.9.5
|
||||
vite:
|
||||
specifier: ^4.3.0
|
||||
version: 4.3.0(@types/node@18.15.12)
|
||||
specifier: ^4.3.1
|
||||
version: 4.3.1(@types/node@18.15.12)
|
||||
|
||||
packages:
|
||||
|
||||
|
|
@ -3097,7 +3097,7 @@ packages:
|
|||
'@babel/types': 7.21.4
|
||||
solid-js: 1.7.3
|
||||
|
||||
/solid-start-node@0.2.26(solid-start@0.2.26)(undici@5.21.2)(vite@4.3.0):
|
||||
/solid-start-node@0.2.26(solid-start@0.2.26)(undici@5.22.0)(vite@4.3.1):
|
||||
resolution: {integrity: sha512-8vciTGoQV+lIlCUSVHJPazlaoKDRfBowDkPeBr/EZdmtbcMOKoJYf/APPQWFspylF+nhzunMf0+zJP90VtMEYg==}
|
||||
peerDependencies:
|
||||
solid-start: '*'
|
||||
|
|
@ -3111,14 +3111,14 @@ packages:
|
|||
polka: 1.0.0-next.22
|
||||
rollup: 3.20.6
|
||||
sirv: 2.0.2
|
||||
solid-start: 0.2.26(@solidjs/meta@0.28.4)(@solidjs/router@0.8.2)(solid-js@1.7.3)(solid-start-node@0.2.26)(vite@4.3.0)
|
||||
solid-start: 0.2.26(@solidjs/meta@0.28.4)(@solidjs/router@0.8.2)(solid-js@1.7.3)(solid-start-node@0.2.26)(vite@4.3.1)
|
||||
terser: 5.17.1
|
||||
undici: 5.21.2
|
||||
vite: 4.3.0(@types/node@18.15.12)
|
||||
undici: 5.22.0
|
||||
vite: 4.3.1(@types/node@18.15.12)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
/solid-start@0.2.26(@solidjs/meta@0.28.4)(@solidjs/router@0.8.2)(solid-js@1.7.3)(solid-start-node@0.2.26)(vite@4.3.0):
|
||||
/solid-start@0.2.26(@solidjs/meta@0.28.4)(@solidjs/router@0.8.2)(solid-js@1.7.3)(solid-start-node@0.2.26)(vite@4.3.1):
|
||||
resolution: {integrity: sha512-kne2HZlnSMzsirdnvNs1CsDqBl0L0uvKKt1t4de1CH7JIngyqoMcER97jTE0Ejr84KknANaKAdvJAzZcL7Ueng==}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
|
|
@ -3181,12 +3181,12 @@ packages:
|
|||
set-cookie-parser: 2.6.0
|
||||
sirv: 2.0.2
|
||||
solid-js: 1.7.3
|
||||
solid-start-node: 0.2.26(solid-start@0.2.26)(undici@5.21.2)(vite@4.3.0)
|
||||
solid-start-node: 0.2.26(solid-start@0.2.26)(undici@5.22.0)(vite@4.3.1)
|
||||
terser: 5.17.1
|
||||
undici: 5.21.2
|
||||
vite: 4.3.0(@types/node@18.15.12)
|
||||
vite-plugin-inspect: 0.7.23(rollup@3.20.6)(vite@4.3.0)
|
||||
vite-plugin-solid: 2.7.0(solid-js@1.7.3)(vite@4.3.0)
|
||||
undici: 5.22.0
|
||||
vite: 4.3.1(@types/node@18.15.12)
|
||||
vite-plugin-inspect: 0.7.23(rollup@3.20.6)(vite@4.3.1)
|
||||
vite-plugin-solid: 2.7.0(solid-js@1.7.3)(vite@4.3.1)
|
||||
wait-on: 6.0.1(debug@4.3.4)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
|
@ -3302,9 +3302,9 @@ packages:
|
|||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/undici@5.21.2:
|
||||
resolution: {integrity: sha512-f6pTQ9RF4DQtwoWSaC42P/NKlUjvezVvd9r155ohqkwFNRyBKM3f3pcty3ouusefNRyM25XhIQEbeQ46sZDJfQ==}
|
||||
engines: {node: '>=12.18'}
|
||||
/undici@5.22.0:
|
||||
resolution: {integrity: sha512-fR9RXCc+6Dxav4P9VV/sp5w3eFiSdOjJYsbtWfd4s5L5C4ogyuVpdKIVHeW0vV1MloM65/f7W45nR9ZxwVdyiA==}
|
||||
engines: {node: '>=14.0'}
|
||||
dependencies:
|
||||
busboy: 1.6.0
|
||||
|
||||
|
|
@ -3356,7 +3356,7 @@ packages:
|
|||
resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
|
||||
engines: {node: '>= 0.8'}
|
||||
|
||||
/vite-plugin-inspect@0.7.23(rollup@3.20.6)(vite@4.3.0):
|
||||
/vite-plugin-inspect@0.7.23(rollup@3.20.6)(vite@4.3.1):
|
||||
resolution: {integrity: sha512-VodzewpE9ufA8aPQhzTihbiMKAJ1aFoXNe+BB/3L52HB4Hf7I2WEOc1Yu4BC45rvw2VFuVnlXYlXL7JVQuseUw==}
|
||||
engines: {node: '>=14'}
|
||||
peerDependencies:
|
||||
|
|
@ -3368,12 +3368,12 @@ packages:
|
|||
fs-extra: 11.1.1
|
||||
picocolors: 1.0.0
|
||||
sirv: 2.0.2
|
||||
vite: 4.3.0(@types/node@18.15.12)
|
||||
vite: 4.3.1(@types/node@18.15.12)
|
||||
transitivePeerDependencies:
|
||||
- rollup
|
||||
- supports-color
|
||||
|
||||
/vite-plugin-solid@2.7.0(solid-js@1.7.3)(vite@4.3.0):
|
||||
/vite-plugin-solid@2.7.0(solid-js@1.7.3)(vite@4.3.1):
|
||||
resolution: {integrity: sha512-avp/Jl5zOp/Itfo67xtDB2O61U7idviaIp4mLsjhCa13PjKNasz+IID0jYTyqUp9SFx6/PmBr6v4KgDppqompg==}
|
||||
peerDependencies:
|
||||
solid-js: ^1.7.2
|
||||
|
|
@ -3386,13 +3386,13 @@ packages:
|
|||
merge-anything: 5.1.4
|
||||
solid-js: 1.7.3
|
||||
solid-refresh: 0.5.2(solid-js@1.7.3)
|
||||
vite: 4.3.0(@types/node@18.15.12)
|
||||
vitefu: 0.2.4(vite@4.3.0)
|
||||
vite: 4.3.1(@types/node@18.15.12)
|
||||
vitefu: 0.2.4(vite@4.3.1)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
/vite@4.3.0(@types/node@18.15.12):
|
||||
resolution: {integrity: sha512-JTGFgDh3dVxeGBpuQX04Up+JZmuG6wu9414Ei36vQzaEruY/M4K0AgwtuB2b4HaBgB7R8l+LHxjB0jcgz4d2qQ==}
|
||||
/vite@4.3.1(@types/node@18.15.12):
|
||||
resolution: {integrity: sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg==}
|
||||
engines: {node: ^14.18.0 || >=16.0.0}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
|
|
@ -3423,7 +3423,7 @@ packages:
|
|||
optionalDependencies:
|
||||
fsevents: 2.3.2
|
||||
|
||||
/vitefu@0.2.4(vite@4.3.0):
|
||||
/vitefu@0.2.4(vite@4.3.1):
|
||||
resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==}
|
||||
peerDependencies:
|
||||
vite: ^3.0.0 || ^4.0.0
|
||||
|
|
@ -3431,7 +3431,7 @@ packages:
|
|||
vite:
|
||||
optional: true
|
||||
dependencies:
|
||||
vite: 4.3.0(@types/node@18.15.12)
|
||||
vite: 4.3.1(@types/node@18.15.12)
|
||||
|
||||
/vt-pbf@3.1.3:
|
||||
resolution: {integrity: sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
import MapGL, { Viewport, Camera } from 'solid-map-gl';
|
||||
import { createSignal, Show, Suspense, createEffect, createResource, For, Accessor } from 'solid-js';
|
||||
import { useRouteData } from 'solid-start';
|
||||
import { createSignal, Show} from 'solid-js';
|
||||
import * as maplibre from 'maplibre-gl';
|
||||
import MapControls from './MapControls';
|
||||
import { createStore } from 'solid-js/store';
|
||||
|
||||
// deck.gl
|
||||
import { unstable_clientOnly } from 'solid-start';
|
||||
|
|
@ -12,69 +10,21 @@ const MapArcLayer = unstable_clientOnly(() => import('~/components/MapArcLayer')
|
|||
|
||||
import type { JSX } from 'solid-js';
|
||||
import type { MapOptions } from 'maplibre-gl';
|
||||
import type { StyleSpecification } from 'maplibre-gl';
|
||||
|
||||
import 'maplibre-gl/dist/maplibre-gl.css';
|
||||
import * as MAP_STYLE from '~/style.json';
|
||||
import styleJson from '~/style.json';
|
||||
import type { ArcLayer, ArcLayerProps } from '@deck.gl/layers/typed';
|
||||
const MAP_STYLE: StyleSpecification = styleJson;
|
||||
|
||||
type ChargingStation = {
|
||||
Name: string
|
||||
PhoneNumer: string
|
||||
IntersectionDirections: string
|
||||
AccessTime: string
|
||||
Connectors: string[]
|
||||
Network: string
|
||||
Pricing: string
|
||||
RestrictedAccess: boolean
|
||||
CntLevel2Chargers: number
|
||||
CntLevel3Chargers: number
|
||||
};
|
||||
type Location = {
|
||||
StreetAddresss: 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
|
||||
}
|
||||
|
||||
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],
|
||||
},
|
||||
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], },
|
||||
};
|
||||
const ARC_DATA = [
|
||||
{ source: TEST.FAN.coords, target: TEST.GDT.coords },
|
||||
|
|
@ -90,6 +40,18 @@ const SCAT_DATA = [
|
|||
{ coordinates: TEST.PRH.coords },
|
||||
{ coordinates: TEST.NSE.coords },
|
||||
];
|
||||
const BOS: Viewport = {
|
||||
center: TEST.FAN.coords,
|
||||
zoom: 15.5,
|
||||
bearing: 160,
|
||||
pitch: 60,
|
||||
};
|
||||
const NYC: Viewport = {
|
||||
center: TEST.NSE.coords,
|
||||
zoom: 15.5,
|
||||
bearing: 10,
|
||||
pitch: 60,
|
||||
};
|
||||
|
||||
const USER_LOC = TEST.FAN.LngLatLike;
|
||||
const INITIAL_VIEWPORT: Viewport = {
|
||||
|
|
@ -105,46 +67,20 @@ const options: MapOptions = {
|
|||
antialias: true,
|
||||
renderWorldCopies: false,
|
||||
};
|
||||
const BOS: Viewport = {
|
||||
center: TEST.FAN.coords,
|
||||
zoom: 15.5,
|
||||
bearing: 160,
|
||||
pitch: 60,
|
||||
};
|
||||
const NYC: Viewport = {
|
||||
center: TEST.NSE.coords,
|
||||
zoom: 15.5,
|
||||
bearing: 10,
|
||||
pitch: 60,
|
||||
};
|
||||
const TEST_PACKET: StationRequest = {
|
||||
Latitude: USER_LOC.lat,
|
||||
Longitude: USER_LOC.lng,
|
||||
Distance: 10,
|
||||
CountLimit: 10,
|
||||
}
|
||||
async function fetchStations() {
|
||||
const payload: RequestInit = {
|
||||
method: "POST",
|
||||
cache: 'default',
|
||||
body: JSON.stringify(TEST_PACKET),
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
}
|
||||
const response = await fetch("https://kevinfwu.com/getnearest", payload);
|
||||
return await response.json() as StationResponse[];
|
||||
};
|
||||
function BadassMap(): JSX.Element {
|
||||
const [stations] = createResource(fetchStations);
|
||||
|
||||
function BadassMap(props: any): JSX.Element {
|
||||
|
||||
const [viewport, setViewport] = createSignal<Viewport>(INITIAL_VIEWPORT);
|
||||
const [rotate, setRotate] = createSignal<boolean>(true);
|
||||
const [scatData, setScatData] = createSignal(SCAT_DATA);
|
||||
const [arcData, setArcData] = createSignal(ARC_DATA);
|
||||
const toggleRotate = () => setRotate<boolean>(!rotate());
|
||||
|
||||
function flyTo(viewUpdate: Viewport) {
|
||||
async function flyTo(viewUpdate: Viewport) {
|
||||
setRotate<boolean>(false)
|
||||
setViewport<Viewport>(viewUpdate);
|
||||
};
|
||||
function eventHandler(event: any) {
|
||||
async function eventHandler(event: any) {
|
||||
switch (event.type) {
|
||||
case 'mousedown':
|
||||
setRotate(false)
|
||||
|
|
@ -161,6 +97,7 @@ function BadassMap(): JSX.Element {
|
|||
};
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<MapGL
|
||||
mapLib={maplibre}
|
||||
options={options}
|
||||
|
|
@ -172,29 +109,24 @@ function BadassMap(): JSX.Element {
|
|||
onTouchStart={eventHandler}
|
||||
transitionType="flyTo"
|
||||
>
|
||||
<MapScatLayer data={SCAT_DATA} />
|
||||
<MapArcLayer data={ARC_DATA} />
|
||||
<MapScatLayer data={scatData()} />
|
||||
<MapArcLayer data={arcData()} />
|
||||
|
||||
<Camera rotateViewport={rotate()} reverse={true} />
|
||||
|
||||
<ul> <li>
|
||||
<Show when={rotate()}
|
||||
fallback={<button onClick={toggleRotate}> Rotation On </button>} >
|
||||
fallback={<button onClick={toggleRotate}> Turn Rotation On </button>} >
|
||||
|
||||
<button onClick={toggleRotate}> Rotation Off </button> </Show> </li>
|
||||
<button onClick={toggleRotate}> Turn Rotation Off </button> </Show> </li>
|
||||
<li><button onClick={() => flyTo({ ...viewport(), ...BOS })}> Boston </button> </li>
|
||||
<li><button onClick={() => flyTo({ ...viewport(), ...NYC })}> NYC </button> </li>
|
||||
<li><button onClick={() => console.log(stations())}> log stations </button> </li>
|
||||
<Suspense fallback={<li>Loading stations...</li>}>
|
||||
<For each={stations()}>
|
||||
{(station) => <li>{station.Dist}</li>}
|
||||
</For>
|
||||
</Suspense>
|
||||
</ul>
|
||||
|
||||
<MapControls />
|
||||
</MapGL >
|
||||
);
|
||||
</>
|
||||
) as JSX.Element;
|
||||
};
|
||||
|
||||
export default BadassMap;
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
.increment {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
padding: 1em 2em;
|
||||
color: #335d92;
|
||||
background-color: rgba(68, 107, 158, 0.1);
|
||||
border-radius: 2em;
|
||||
border: 2px solid rgba(68, 107, 158, 0);
|
||||
outline: none;
|
||||
width: 200px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.increment:focus {
|
||||
border: 2px solid #335d92;
|
||||
}
|
||||
|
||||
.increment:active {
|
||||
background-color: rgba(68, 107, 158, 0.2);
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import { createSignal } from "solid-js";
|
||||
import "./Counter.css";
|
||||
|
||||
export default function Counter() {
|
||||
const [count, setCount] = createSignal(0);
|
||||
return (
|
||||
<button class="increment" onClick={() => setCount(count() + 1)}>
|
||||
Clicks: {count()}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,12 +1,10 @@
|
|||
import { ArcLayer } from '@deck.gl/layers/typed';
|
||||
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';
|
||||
|
||||
|
||||
function MapArcLayer(props): JSX.Element {
|
||||
|
||||
function MapArcLayer(props: any) {
|
||||
const arcLayer = new MapboxLayer({
|
||||
id: 'deckgl-arc',
|
||||
type: ArcLayer,
|
||||
|
|
@ -17,12 +15,11 @@ function MapArcLayer(props): JSX.Element {
|
|||
getTargetColor: [0, 230, 0],
|
||||
getWidth: 6,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Layer customLayer={arcLayer} />
|
||||
</>
|
||||
);
|
||||
) as JSX.Element;
|
||||
};
|
||||
|
||||
export default MapArcLayer;
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@ import type {
|
|||
|
||||
import type { JSX } from 'solid-js';
|
||||
|
||||
function MapControls(): JSX.Element {
|
||||
function MapControls() {
|
||||
const NAV_OPTIONS: NavigationOptions = {
|
||||
showCompass: true,
|
||||
showZoom: true,
|
||||
visualizePitch: true,
|
||||
}
|
||||
};
|
||||
const GEO_OPTIONS: GeolocateOptions = {
|
||||
positionOptions: {
|
||||
enableHighAccuracy: false,
|
||||
|
|
@ -24,15 +24,15 @@ function MapControls(): JSX.Element {
|
|||
trackUserLocation: false,
|
||||
showAccuracyCircle: false,
|
||||
showUserLocation: true,
|
||||
}
|
||||
};
|
||||
const ATTRIB_OPTIONS: AttributionOptions = {
|
||||
compact: false,
|
||||
customAttribution: 'OpenStreetMap',
|
||||
}
|
||||
};
|
||||
const SCALE_OPTIONS: ScaleOptions = {
|
||||
maxWidth: 100,
|
||||
unit: 'imperial',
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Control
|
||||
|
|
@ -56,8 +56,8 @@ function MapControls(): JSX.Element {
|
|||
options={SCALE_OPTIONS}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
) as JSX.Element;
|
||||
};
|
||||
|
||||
export default MapControls;
|
||||
|
||||
|
|
|
|||
|
|
@ -3,11 +3,8 @@ import { MapboxLayer } from '@deck.gl/mapbox/typed';
|
|||
import { Layer } from 'solid-map-gl';
|
||||
|
||||
import type { JSX } from 'solid-js';
|
||||
import type { ScatterplotLayerProps } from '@deck.gl/layers/typed';
|
||||
|
||||
|
||||
function MapScatLayer(props): JSX.Element {
|
||||
|
||||
function MapScatLayer(props: any) {
|
||||
const scatterplotLayer = new MapboxLayer({
|
||||
id: 'deckgl-scatterplot',
|
||||
type: ScatterplotLayer,
|
||||
|
|
@ -21,7 +18,7 @@ function MapScatLayer(props): JSX.Element {
|
|||
<>
|
||||
<Layer customLayer={scatterplotLayer} />
|
||||
</>
|
||||
);
|
||||
) as JSX.Element;
|
||||
};
|
||||
|
||||
export default MapScatLayer;
|
||||
|
|
|
|||
|
|
@ -4,25 +4,28 @@ import { Layer } from 'solid-map-gl';
|
|||
|
||||
import type { JSX } from 'solid-js';
|
||||
|
||||
|
||||
function MapScenegraphLayer(props): JSX.Element {
|
||||
function MapScenegraphLayer(props: any) {
|
||||
|
||||
const scenegraphLayer = new MapboxLayer({
|
||||
id: 'deckgl-arc',
|
||||
id: 'deckgl-scenegraph',
|
||||
type: ScenegraphLayer,
|
||||
data: props.data,
|
||||
getSourcePosition: (d: any) => d.source,
|
||||
getTargetPosition: (d: any) => d.target,
|
||||
getSourceColor: [200, 0, 0],
|
||||
getTargetColor: [0, 230, 0],
|
||||
getWidth: 6,
|
||||
pickable: true,
|
||||
scenegraph: 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF-Binary/BoxAnimated.glb',
|
||||
getPosition: d => d.coordinates,
|
||||
getOrientation: d => [0, Math.random() * 180, 90],
|
||||
_animations: {
|
||||
'*': { speed: 5 }
|
||||
},
|
||||
sizeScale: 500,
|
||||
_lighting: 'pbr'
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Layer customLayer={scenegraphLayer} />
|
||||
</>
|
||||
);
|
||||
) as JSX.Element;
|
||||
};
|
||||
|
||||
export default MapScenegraphLayer;
|
||||
|
|
|
|||
64
lightning/src/components/StationsContext.tsx
Normal file
64
lightning/src/components/StationsContext.tsx
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
import { createContext, useContext, createResource } from "solid-js";
|
||||
|
||||
import type { JSX } 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 = {
|
||||
StreetAddresss: 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
|
||||
};
|
||||
const USER_LOC = { lng: -71.05625, lat: 42.36, };
|
||||
const TEST_PACKET: StationRequest = {
|
||||
Latitude: USER_LOC.lat,
|
||||
Longitude: USER_LOC.lng,
|
||||
Distance: 10,
|
||||
CountLimit: 10,
|
||||
};
|
||||
|
||||
const StationsContext = createContext();
|
||||
|
||||
export function StationsProvider(props: any) {
|
||||
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[]>;
|
||||
});
|
||||
return (
|
||||
<StationsContext.Provider value={stations()}>
|
||||
{props.children}
|
||||
</StationsContext.Provider>
|
||||
) as JSX.Element;
|
||||
};
|
||||
|
||||
export function getStations() { return useContext(StationsContext); };
|
||||
|
|
@ -1,8 +1,4 @@
|
|||
import {
|
||||
createHandler,
|
||||
renderAsync,
|
||||
StartServer,
|
||||
} from "solid-start/entry-server";
|
||||
import { createHandler, renderAsync, StartServer, } from "solid-start/entry-server";
|
||||
|
||||
export default createHandler(
|
||||
renderAsync((event) => <StartServer event={event} />)
|
||||
|
|
|
|||
|
|
@ -3,44 +3,28 @@ body {
|
|||
font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell,
|
||||
'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
max-width: 300px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
main {
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
background-color: hsla(230, 19%, 17%, 0.6);
|
||||
|
||||
}
|
||||
h1 {
|
||||
color: #335d92;
|
||||
color: #36EEE0;
|
||||
text-transform: uppercase;
|
||||
font-size: 4rem;
|
||||
font-weight: 100;
|
||||
font-weight: 300;
|
||||
line-height: 1.1;
|
||||
margin: 1rem auto;
|
||||
max-width: 14rem;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 14rem;
|
||||
margin: 2rem auto;
|
||||
line-height: 1.35;
|
||||
}
|
||||
ul {
|
||||
max-width: 7rem;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
h1 {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,9 @@
|
|||
// @refresh reload
|
||||
import { Suspense } 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 BadassMap from '~/components/BadassMap';
|
||||
import BadassMap from './components/BadassMap';
|
||||
import { StationsProvider } from "./components/StationsContext";
|
||||
|
||||
export default function Root() {
|
||||
return (
|
||||
|
|
@ -26,16 +16,18 @@ export default function Root() {
|
|||
<Body>
|
||||
<Suspense>
|
||||
<ErrorBoundary>
|
||||
<StationsProvider>
|
||||
<A href="/">Map</A>
|
||||
<A href="/about">About</A>
|
||||
<BadassMap />
|
||||
<Routes>
|
||||
<FileRoutes />
|
||||
</Routes>
|
||||
<BadassMap />
|
||||
</StationsProvider>
|
||||
</ErrorBoundary>
|
||||
</Suspense>
|
||||
<Scripts />
|
||||
</Body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { Title } from 'solid-start';
|
||||
import Counter from "~/components/Counter";
|
||||
|
||||
import type { JSX } from 'solid-js';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
|
|
@ -55,5 +56,5 @@ export default function Home() {
|
|||
</a>
|
||||
</p>
|
||||
</main>
|
||||
);
|
||||
) as JSX.Element;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
import { Title } from "solid-start";
|
||||
import { Title } from 'solid-start';
|
||||
import { getStations } from '~/components/StationsContext';
|
||||
|
||||
import type { JSX } from 'solid-js';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main>
|
||||
<Title>Ride the Lightning</Title>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
) as JSX.Element;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
"compilerOptions": {
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"esModuleInterop": true,
|
||||
"resolveJsonModule": true,
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "node",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue