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 02:15:10 -04:00
parent 4e84f0da1d
commit 790f7fd1bf
3 changed files with 25 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,59 +1,28 @@
import MapGL, { Viewport, Camera } from 'solid-map-gl';
import { createSignal, Show} from 'solid-js';
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';
import { arcData, scatData, viewport, setViewport } from '~/root';
import 'maplibre-gl/dist/maplibre-gl.css';
import StyleJson from '~/style/style.json';
// deck.gl
import { unstable_clientOnly } from 'solid-start';
const MapScatLayer = unstable_clientOnly(() => import('~/components/MapScatLayer'));
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 styleJson from '~/style/style.json';
import { arcData, scatData, viewport, setViewport, rotate, setRotate } from '~/root';
const MAP_STYLE: StyleSpecification = styleJson;
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], },
};
const options: MapOptions = {
container: 'solid-map-gl will override me',
style: MAP_STYLE,
style: StyleJson,
maxPitch: 85,
antialias: true,
renderWorldCopies: false,
};
function BadassMap(props: any): JSX.Element {
async 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;
};
};
export default function BadassMap() {
return (
<>
<MapGL
@ -61,21 +30,12 @@ function BadassMap(props: any): JSX.Element {
options={options}
viewport={viewport()}
onViewportChange={(evt: Viewport) => setViewport(evt)}
onDrag={eventHandler}
onMouseDown={eventHandler}
onZoomStart={eventHandler}
onTouchStart={eventHandler}
transitionType="flyTo"
>
<MapScatLayer data={scatData()} />
<MapArcLayer data={arcData()} />
<Camera rotateViewport={rotate()} reverse={true} />
<MapControls />
</MapGL >
</>
) as JSX.Element;
};
export default BadassMap;

12
lightning/src/root.tsx
View file

@ -36,6 +36,18 @@ const INITIAL_VIEWPORT: Viewport = {
bearing: 10,
pitch: 60,
};
export const BOS: Viewport = {
center: TEST.FAN.coords,
zoom: 15.5,
bearing: 160,
pitch: 60,
};
export const NYC: Viewport = {
center: TEST.NSE.coords,
zoom: 15.5,
bearing: 10,
pitch: 60,
};
export const [scatData, setScatData] = createSignal(SCAT_DATA);
export const [arcData, setArcData] = createSignal(ARC_DATA);
export const [viewport, setViewport] = createSignal<Viewport>(INITIAL_VIEWPORT);

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

@ -1,41 +1,14 @@
import { Show } from 'solid-js';
import { Title } from 'solid-start';
import { viewport, rotate, toggleRotate, flyTo } from '~/root';
import type { Viewport } from 'solid-map-gl';
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], },
};
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,
};
import type { JSX } from 'solid-js';
import { viewport, flyTo, BOS, NYC } from '~/root';
export default function Home() {
return (
<main>
<Title>Ride the Lightning</Title>
<ul> <li>
<Show when={rotate()}
fallback={<button onClick={toggleRotate}> Turn Rotation On </button>} >
<button onClick={toggleRotate}> Turn Rotation Off </button> </Show> </li>
<ul><li>Toolbox</li>
<li><button onClick={() => flyTo({ ...viewport(), ...BOS })}> Boston </button> </li>
<li><button onClick={() => flyTo({ ...viewport(), ...NYC })}> NYC </button> </li>
</ul>