From 6caeb20c5fe12797ab758a638ff78764b16663e0 Mon Sep 17 00:00:00 2001 From: Adam <24621027+adoyle0@users.noreply.github.com> Date: Sat, 22 Apr 2023 04:19:14 -0400 Subject: [PATCH] cleanup --- lightning/src/components/BadassMap.tsx | 26 ++++--- lightning/src/components/MapArcLayer.tsx | 29 ++++---- lightning/src/components/MapControls.tsx | 68 +++++++++---------- lightning/src/components/MapScatLayer.tsx | 28 ++++---- .../src/components/MapScenegraphLayer.tsx | 36 ++++------ lightning/src/components/Toolbox.tsx | 29 ++++++++ lightning/src/root.tsx | 52 ++++---------- lightning/src/routes/about.tsx | 4 +- lightning/src/routes/index.tsx | 5 -- 9 files changed, 134 insertions(+), 143 deletions(-) create mode 100644 lightning/src/components/Toolbox.tsx diff --git a/lightning/src/components/BadassMap.tsx b/lightning/src/components/BadassMap.tsx index 11e3250..9c08589 100644 --- a/lightning/src/components/BadassMap.tsx +++ b/lightning/src/components/BadassMap.tsx @@ -3,31 +3,29 @@ import * as maplibre from 'maplibre-gl'; import MapControls from './MapControls'; import type { JSX } from 'solid-js'; -import type { MapOptions } from 'maplibre-gl'; + +// deck.gl +import { unstable_clientOnly } from 'solid-start'; +const MapScatLayer = unstable_clientOnly( () => import('~/components/MapScatLayer')); +const MapArcLayer = unstable_clientOnly(() => import('~/components/MapArcLayer')); 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')); - -const options: MapOptions = { - container: 'solid-map-gl will override me', - style: StyleJson, - maxPitch: 85, - antialias: true, - renderWorldCopies: false, -}; export default function BadassMap() { return ( <> setViewport(evt)} transitionType="flyTo" diff --git a/lightning/src/components/MapArcLayer.tsx b/lightning/src/components/MapArcLayer.tsx index a585408..4518a69 100644 --- a/lightning/src/components/MapArcLayer.tsx +++ b/lightning/src/components/MapArcLayer.tsx @@ -4,22 +4,19 @@ import { Layer } from 'solid-map-gl'; import type { JSX } from 'solid-js'; -function MapArcLayer(props: any) { - const arcLayer = new MapboxLayer({ - id: 'deckgl-arc', - type: ArcLayer, - data: props.data, - getSourcePosition: (d: any) => d.source, - getTargetPosition: (d: any) => d.target, - getSourceColor: [200, 0, 0], - getTargetColor: [0, 230, 0], - getWidth: 6, - }); +export default function MapArcLayer(props: any) { + return ( - <> - - + d.source, + getTargetPosition: (d: any) => d.target, + getSourceColor: [200, 0, 0], + getTargetColor: [0, 230, 0], + getWidth: 6, + } as any)} /> ) as JSX.Element; }; - -export default MapArcLayer; diff --git a/lightning/src/components/MapControls.tsx b/lightning/src/components/MapControls.tsx index bdb43a1..0dcc55d 100644 --- a/lightning/src/components/MapControls.tsx +++ b/lightning/src/components/MapControls.tsx @@ -1,63 +1,63 @@ import { Control } from 'solid-map-gl'; + +import type { JSX } from 'solid-js'; import type { NavigationOptions, GeolocateOptions, - ScaleOptions, AttributionOptions, + ScaleOptions, } from 'maplibre-gl'; -import type { JSX } from 'solid-js'; -function MapControls() { - const NAV_OPTIONS: NavigationOptions = { - showCompass: true, - showZoom: true, - visualizePitch: true, - }; - const GEO_OPTIONS: GeolocateOptions = { - positionOptions: { - enableHighAccuracy: false, - timeout: 6000, - maximumAge: 0, - }, - fitBoundsOptions: { maxZoom: 15 }, - trackUserLocation: false, - showAccuracyCircle: false, - showUserLocation: true, - }; - const ATTRIB_OPTIONS: AttributionOptions = { - compact: false, - customAttribution: 'OpenStreetMap', - }; - const SCALE_OPTIONS: ScaleOptions = { - maxWidth: 100, - unit: 'imperial', - }; +export default function MapControls() { + return ( <> + + + + + ) as JSX.Element; }; - -export default MapControls; - diff --git a/lightning/src/components/MapScatLayer.tsx b/lightning/src/components/MapScatLayer.tsx index 2f2eceb..1e6c643 100644 --- a/lightning/src/components/MapScatLayer.tsx +++ b/lightning/src/components/MapScatLayer.tsx @@ -4,21 +4,19 @@ import { Layer } from 'solid-map-gl'; import type { JSX } from 'solid-js'; -function MapScatLayer(props: any) { - const scatterplotLayer = new MapboxLayer({ - id: 'deckgl-scatterplot', - type: ScatterplotLayer, - data: props.data, - getPosition: (d: any) => d.coordinates, - getRadius: 30, - getFillColor: [255, 140, 0], - getLineColor: [0, 0, 0,] - }); + +export default function MapScatLayer(props: any) { + return ( - <> - - + d.coordinates, + getRadius: 30, + getFillColor: [255, 140, 0], + getLineColor: [0, 0, 0,], + } as any)} /> ) as JSX.Element; }; - -export default MapScatLayer; diff --git a/lightning/src/components/MapScenegraphLayer.tsx b/lightning/src/components/MapScenegraphLayer.tsx index 60b7396..1d80a50 100644 --- a/lightning/src/components/MapScenegraphLayer.tsx +++ b/lightning/src/components/MapScenegraphLayer.tsx @@ -4,28 +4,22 @@ import { Layer } from 'solid-map-gl'; import type { JSX } from 'solid-js'; -function MapScenegraphLayer(props: any) { - - const scenegraphLayer = new MapboxLayer({ - id: 'deckgl-scenegraph', - type: ScenegraphLayer, - data: props.data, - 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' - }); +export default function MapScenegraphLayer(props: any) { return ( - <> - - + d.coordinates, + getOrientation: d => [0, Math.random() * 180, 90], + _animations: { + '*': { speed: 5 } + }, + sizeScale: 500, + _lighting: 'pbr', + } as any)} /> ) as JSX.Element; }; - -export default MapScenegraphLayer; diff --git a/lightning/src/components/Toolbox.tsx b/lightning/src/components/Toolbox.tsx new file mode 100644 index 0000000..2eb617d --- /dev/null +++ b/lightning/src/components/Toolbox.tsx @@ -0,0 +1,29 @@ +import type { JSX } from "solid-js" +import type { Viewport } from "solid-map-gl"; + +import { setViewport } from '~/root'; + + +export function Toolbox() { + + return ( +
    +

    Toolbox

    + +
    • + +
    • + +
+ ) as JSX.Element; +}; diff --git a/lightning/src/root.tsx b/lightning/src/root.tsx index 9b15f91..f6f6b3b 100644 --- a/lightning/src/root.tsx +++ b/lightning/src/root.tsx @@ -1,5 +1,5 @@ // @refresh reload -import { Suspense, createSignal } from "solid-js"; +import { Suspense, createSignal, createEffect } 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'; @@ -15,49 +15,27 @@ 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 = [ + +export const [scatData, setScatData] = createSignal([ { 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 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(INITIAL_VIEWPORT); -export const [rotate, setRotate] = createSignal(false); -export const toggleRotate = () => setRotate(!rotate()); +]); -export function flyTo(viewUpdate: Viewport) { - setRotate(false) - setViewport(viewUpdate); -}; +export const [arcData, setArcData] = createSignal([ + { 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 }, +]); + +export const [USER_LOC] = createSignal(TEST.FAN.LngLatLike); + +export const [viewport, setViewport] = createSignal(); +createEffect(() => console.log(viewport())); export default function Root() { return ( diff --git a/lightning/src/routes/about.tsx b/lightning/src/routes/about.tsx index 97dedb9..04d5abc 100644 --- a/lightning/src/routes/about.tsx +++ b/lightning/src/routes/about.tsx @@ -2,7 +2,9 @@ import { Title } from 'solid-start'; import type { JSX } from 'solid-js'; + export default function Home() { + return (
About Lightning @@ -57,4 +59,4 @@ export default function Home() {

) as JSX.Element; -} +}; diff --git a/lightning/src/routes/index.tsx b/lightning/src/routes/index.tsx index dab9f66..c737baf 100644 --- a/lightning/src/routes/index.tsx +++ b/lightning/src/routes/index.tsx @@ -2,16 +2,11 @@ import { Title } from 'solid-start'; import type { JSX } from 'solid-js'; -import { viewport, flyTo, BOS, NYC } from '~/root'; export default function Home() { return (
Ride the Lightning -
  • Toolbox
    • -
    • -
    • -
) as JSX.Element; };