stuff lol
This commit is contained in:
Adam
parent
24a56d7822
commit
00769a639d
4 changed files with 79 additions and 55 deletions
|
|
@ -14,7 +14,8 @@ import type { StyleSpecification } from 'maplibre-gl';
|
|||
|
||||
import 'maplibre-gl/dist/maplibre-gl.css';
|
||||
import styleJson from '~/style/style.json';
|
||||
import type { ArcLayer, ArcLayerProps } from '@deck.gl/layers/typed';
|
||||
import { arcData, scatData, viewport, setViewport, rotate, setRotate } from '~/root';
|
||||
|
||||
const MAP_STYLE: StyleSpecification = styleJson;
|
||||
|
||||
|
||||
|
|
@ -26,40 +27,7 @@ const TEST = {
|
|||
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 },
|
||||
{ source: TEST.FAN.coords, target: TEST.BBC.coords },
|
||||
{ source: TEST.FAN.coords, target: TEST.GAR.coords },
|
||||
{ source: TEST.FAN.coords, target: TEST.PRH.coords },
|
||||
];
|
||||
const SCAT_DATA = [
|
||||
{ coordinates: TEST.FAN.coords },
|
||||
{ coordinates: TEST.GDT.coords },
|
||||
{ coordinates: TEST.BBC.coords },
|
||||
{ coordinates: TEST.GAR.coords },
|
||||
{ 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 = {
|
||||
center: USER_LOC,
|
||||
zoom: 15.5,
|
||||
bearing: 10,
|
||||
pitch: 60,
|
||||
};
|
||||
const options: MapOptions = {
|
||||
container: 'solid-map-gl will override me',
|
||||
style: MAP_STYLE,
|
||||
|
|
@ -70,16 +38,6 @@ const options: MapOptions = {
|
|||
|
||||
function BadassMap(props: any): JSX.Element {
|
||||
|
||||
const [viewport, setViewport] = createSignal<Viewport>(INITIAL_VIEWPORT);
|
||||
const [rotate, setRotate] = createSignal<boolean>(false);
|
||||
const [scatData, setScatData] = createSignal(SCAT_DATA);
|
||||
const [arcData, setArcData] = createSignal(ARC_DATA);
|
||||
const toggleRotate = () => setRotate<boolean>(!rotate());
|
||||
|
||||
async function flyTo(viewUpdate: Viewport) {
|
||||
setRotate<boolean>(false)
|
||||
setViewport<Viewport>(viewUpdate);
|
||||
};
|
||||
async function eventHandler(event: any) {
|
||||
switch (event.type) {
|
||||
case 'mousedown':
|
||||
|
|
@ -114,15 +72,6 @@ function BadassMap(props: any): JSX.Element {
|
|||
|
||||
<Camera rotateViewport={rotate()} reverse={true} />
|
||||
|
||||
<ul> <li>
|
||||
<Show when={rotate()}
|
||||
fallback={<button onClick={toggleRotate}> Turn Rotation On </button>} >
|
||||
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
<MapControls />
|
||||
</MapGL >
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
body {
|
||||
margin-right: 50px;
|
||||
background-color: #4C5270;
|
||||
font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell,
|
||||
'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,52 @@
|
|||
// @refresh reload
|
||||
import { Suspense } 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";
|
||||
|
||||
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 ARC_DATA = [
|
||||
{ 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 },
|
||||
];
|
||||
const SCAT_DATA = [
|
||||
{ coordinates: TEST.FAN.coords },
|
||||
{ coordinates: TEST.GDT.coords },
|
||||
{ coordinates: TEST.BBC.coords },
|
||||
{ coordinates: TEST.GAR.coords },
|
||||
{ coordinates: TEST.PRH.coords },
|
||||
{ coordinates: TEST.NSE.coords },
|
||||
];
|
||||
const USER_LOC = TEST.FAN.LngLatLike;
|
||||
const INITIAL_VIEWPORT: Viewport = {
|
||||
center: USER_LOC,
|
||||
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);
|
||||
export const [rotate, setRotate] = createSignal<boolean>(false);
|
||||
export const toggleRotate = () => setRotate<boolean>(!rotate());
|
||||
|
||||
export function flyTo(viewUpdate: Viewport) {
|
||||
setRotate<boolean>(false)
|
||||
setViewport<Viewport>(viewUpdate);
|
||||
};
|
||||
|
||||
export default function Root() {
|
||||
return (
|
||||
<Html lang="en">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,29 @@
|
|||
import { Show } from 'solid-js';
|
||||
import { Title } from 'solid-start';
|
||||
import { getStations } from '~/components/StationsContext';
|
||||
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';
|
||||
|
||||
|
|
@ -7,6 +31,14 @@ 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>
|
||||
<li><button onClick={() => flyTo({ ...viewport(), ...BOS })}> Boston </button> </li>
|
||||
<li><button onClick={() => flyTo({ ...viewport(), ...NYC })}> NYC </button> </li>
|
||||
</ul>
|
||||
</main>
|
||||
) as JSX.Element;
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue