From 00769a639daa942beaa735f2dc0519fdd94bde29 Mon Sep 17 00:00:00 2001 From: Adam <24621027+adoyle0@users.noreply.github.com> Date: Sat, 22 Apr 2023 01:20:30 -0400 Subject: [PATCH] stuff lol --- lightning/src/components/BadassMap.tsx | 55 +------------------------- lightning/src/root.css | 1 + lightning/src/root.tsx | 44 ++++++++++++++++++++- lightning/src/routes/index.tsx | 34 +++++++++++++++- 4 files changed, 79 insertions(+), 55 deletions(-) diff --git a/lightning/src/components/BadassMap.tsx b/lightning/src/components/BadassMap.tsx index 9b15753..83cd2a6 100644 --- a/lightning/src/components/BadassMap.tsx +++ b/lightning/src/components/BadassMap.tsx @@ -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(INITIAL_VIEWPORT); - const [rotate, setRotate] = createSignal(false); - const [scatData, setScatData] = createSignal(SCAT_DATA); - const [arcData, setArcData] = createSignal(ARC_DATA); - const toggleRotate = () => setRotate(!rotate()); - - async function flyTo(viewUpdate: Viewport) { - setRotate(false) - setViewport(viewUpdate); - }; async function eventHandler(event: any) { switch (event.type) { case 'mousedown': @@ -114,15 +72,6 @@ function BadassMap(props: any): JSX.Element { -
  • - Turn Rotation On } > - -
    • -
    • -
    • -
- diff --git a/lightning/src/root.css b/lightning/src/root.css index d69d6a4..6f66be5 100644 --- a/lightning/src/root.css +++ b/lightning/src/root.css @@ -1,4 +1,5 @@ body { + margin-right: 50px; background-color: #4C5270; font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; diff --git a/lightning/src/root.tsx b/lightning/src/root.tsx index acba196..62d5e5f 100644 --- a/lightning/src/root.tsx +++ b/lightning/src/root.tsx @@ -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(INITIAL_VIEWPORT); +export const [rotate, setRotate] = createSignal(false); +export const toggleRotate = () => setRotate(!rotate()); + +export function flyTo(viewUpdate: Viewport) { + setRotate(false) + setViewport(viewUpdate); +}; + export default function Root() { return ( diff --git a/lightning/src/routes/index.tsx b/lightning/src/routes/index.tsx index 91fb92c..08ce79a 100644 --- a/lightning/src/routes/index.tsx +++ b/lightning/src/routes/index.tsx @@ -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 (
Ride the Lightning +
  • + Turn Rotation On } > + +
    • +
    • +
    • +
) as JSX.Element; };