maps/lightning/src/components/BadassMap.tsx

199 lines
5.7 KiB
TypeScript
Raw Normal View History

2023-04-20 09:16:30 -04:00
import MapGL, { Viewport, Camera } from 'solid-map-gl';
import { createSignal, Show, createEffect, createResource, For, Accessor } from 'solid-js';
import { useRouteData } from 'solid-start';
2023-04-15 01:21:33 -04:00
import * as maplibre from 'maplibre-gl';
2023-04-16 06:28:07 -04:00
import MapControls from './MapControls';
2023-04-20 09:16:30 -04:00
import { createStore } from 'solid-js/store';
2023-04-17 05:05:31 -04:00
// deck.gl
import { unstable_clientOnly } from 'solid-start';
const MapScatLayer = unstable_clientOnly(() => import('~/components/MapScatLayer'));
const MapArcLayer = unstable_clientOnly(() => import('~/components/MapArcLayer'));
2023-04-15 07:59:50 -04:00
import type { JSX } from 'solid-js';
import type { MapOptions } from 'maplibre-gl';
2023-04-15 01:21:33 -04:00
import 'maplibre-gl/dist/maplibre-gl.css';
2023-04-20 02:51:55 -04:00
import * as MAP_STYLE from '~/style.json';
2023-04-20 09:16:30 -04:00
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 = {
2023-04-20 02:51:55 -04:00
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],
},
2023-04-20 09:16:30 -04:00
};
2023-04-16 20:03:33 -04:00
const ARC_DATA = [
2023-04-20 09:16:30 -04:00
{ 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 },
2023-04-16 20:03:33 -04:00
];
const SCAT_DATA = [
2023-04-20 09:16:30 -04:00
{ coordinates: TEST.FAN.coords },
{ coordinates: TEST.GDT.coords },
{ coordinates: TEST.BBC.coords },
{ coordinates: TEST.GAR.coords },
{ coordinates: TEST.PRH.coords },
{ coordinates: TEST.NSE.coords },
2023-04-16 20:03:33 -04:00
];
2023-04-20 09:16:30 -04:00
const USER_LOC = TEST.FAN.LngLatLike;
2023-04-18 08:07:46 -04:00
const INITIAL_VIEWPORT: Viewport = {
2023-04-20 02:51:55 -04:00
center: USER_LOC,
2023-04-18 08:07:46 -04:00
zoom: 15.5,
bearing: 10,
pitch: 60,
2023-04-20 02:51:55 -04:00
};
2023-04-20 09:16:30 -04:00
const options: MapOptions = {
container: 'solid-map-gl will override me',
style: MAP_STYLE,
maxPitch: 85,
antialias: true,
renderWorldCopies: false,
2023-04-20 02:51:55 -04:00
};
2023-04-20 09:16:30 -04:00
const BOS: Viewport = {
center: TEST.FAN.coords,
zoom: 15.5,
bearing: 160,
pitch: 60,
2023-04-20 02:51:55 -04:00
};
2023-04-20 09:16:30 -04:00
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,
}
2023-04-17 05:05:31 -04:00
function BadassMap(): JSX.Element {
2023-04-20 09:16:30 -04:00
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[];
2023-04-16 04:49:13 -04:00
};
2023-04-20 09:16:30 -04:00
const [stations] = createResource(fetchStations);
2023-04-17 05:05:31 -04:00
2023-04-18 08:07:46 -04:00
const [viewport, setViewport] = createSignal<Viewport>(INITIAL_VIEWPORT);
2023-04-16 04:49:13 -04:00
const [rotate, setRotate] = createSignal<boolean>(true);
const toggleRotate = () => setRotate<boolean>(!rotate());
2023-04-15 07:59:50 -04:00
2023-04-20 02:51:55 -04:00
function flyTo(viewUpdate: Viewport) {
setRotate<boolean>(false)
setViewport<Viewport>(viewUpdate);
};
function eventHandler(event: any) {
switch (event.type) {
case 'mousedown':
setRotate(false)
break;
case 'zoomstart':
setRotate(false)
break;
case 'touchstart':
setRotate(false)
break;
case 'drag':
setRotate(false)
break;
};
};
2023-04-15 01:21:33 -04:00
return (
<MapGL
mapLib={maplibre}
2023-04-15 07:59:50 -04:00
options={options}
2023-04-15 01:21:33 -04:00
viewport={viewport()}
onViewportChange={(evt: Viewport) => setViewport(evt)}
2023-04-20 02:51:55 -04:00
onDrag={eventHandler}
onMouseDown={eventHandler}
onZoomStart={eventHandler}
onTouchStart={eventHandler}
2023-04-19 00:06:31 -04:00
transitionType="flyTo"
2023-04-15 01:21:33 -04:00
>
2023-04-16 20:03:33 -04:00
<MapScatLayer data={SCAT_DATA} />
<MapArcLayer data={ARC_DATA} />
2023-04-16 08:18:32 -04:00
2023-04-20 02:51:55 -04:00
<Camera rotateViewport={rotate()} reverse={true} />
2023-04-16 08:18:32 -04:00
2023-04-20 02:51:55 -04:00
<ul> <li>
<Show when={rotate()}
fallback={<button onClick={toggleRotate}> Rotation On </button>} >
2023-04-17 05:05:31 -04:00
2023-04-20 02:51:55 -04:00
<button onClick={toggleRotate}> Rotation Off </button> </Show> </li>
<li><button onClick={() => flyTo({ ...viewport(), ...BOS })}> Boston </button> </li>
<li><button onClick={() => flyTo({ ...viewport(), ...NYC })}> NYC </button> </li>
2023-04-20 09:16:30 -04:00
<li><button onClick={() => console.log(stations())}> log stations </button> </li>
<For each={stations()}>
{(station) => <li>{station.Dist}</li>}
</For>
2023-04-18 08:07:46 -04:00
</ul>
2023-04-20 02:51:55 -04:00
2023-04-16 19:07:30 -04:00
<MapControls />
2023-04-16 04:49:13 -04:00
</MapGL >
2023-04-15 01:21:33 -04:00
);
};
2023-04-15 07:59:50 -04:00
export default BadassMap;