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 04:19:14 -04:00
parent 790f7fd1bf
commit 6caeb20c5f
9 changed files with 134 additions and 143 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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 (
<>
<MapGL
mapLib={maplibre}
options={options}
options={{
container: 'solid-map-gl will override me',
style: StyleJson,
maxPitch: 85,
antialias: true,
renderWorldCopies: false,
}}
viewport={viewport()}
onViewportChange={(evt: Viewport) => setViewport(evt)}
transitionType="flyTo"

29
lightning/src/components/MapArcLayer.tsx
View file

@ -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 (
<>
<Layer customLayer={arcLayer} />
</>
<Layer customLayer={
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,
} as any)} />
) as JSX.Element;
};
export default MapArcLayer;

68
lightning/src/components/MapControls.tsx
View file

@ -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 (
<>
<Control
type="navigation"
position="top-right"
options={NAV_OPTIONS}
options={{
showCompass: true,
showZoom: true,
visualizePitch: true,
} as NavigationOptions}
/>
<Control
type="geolocate"
position="top-right"
options={GEO_OPTIONS}
options={{
positionOptions: {
enableHighAccuracy: false,
timeout: 6000,
maximumAge: 0,
},
fitBoundsOptions: { maxZoom: 15 },
trackUserLocation: false,
showAccuracyCircle: false,
showUserLocation: true,
} as GeolocateOptions}
/>
<Control
type="attribution"
position="bottom-right"
options={ATTRIB_OPTIONS}
options={{
compact: false,
customAttribution: 'OpenStreetMap',
} as AttributionOptions}
/>
<Control
type="scale"
position="bottom-left"
options={SCALE_OPTIONS}
options={{
maxWidth: 100,
unit: 'imperial',
} as ScaleOptions}
/>
</>
) as JSX.Element;
};
export default MapControls;

28
lightning/src/components/MapScatLayer.tsx
View file

@ -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 (
<>
<Layer customLayer={scatterplotLayer} />
</>
<Layer customLayer={
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,],
} as any)} />
) as JSX.Element;
};
export default MapScatLayer;

36
lightning/src/components/MapScenegraphLayer.tsx
View file

@ -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 (
<>
<Layer customLayer={scenegraphLayer} />
</>
<Layer customLayer={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',
} as any)} />
) as JSX.Element;
};
export default MapScenegraphLayer;

29
lightning/src/components/Toolbox.tsx Normal file
View file

@ -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 (
<ul>
<h3>Toolbox</h3>
<li> <button onClick={() => setViewport<Viewport>({
center: { lng: -71.05625, lat: 42.36, },
zoom: 15.5,
bearing: 160,
pitch: 60,
})} > Boston </button> </li>
<li> <button onClick={() => setViewport<Viewport>({
center: { lng: -74.0112660425065, lat: 40.70689167578798 },
zoom: 15.5,
bearing: 10,
pitch: 60,
})} > NYC </button> </li>
</ul>
) as JSX.Element;
};

52
lightning/src/root.tsx
View file

@ -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<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 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<Viewport>();
createEffect(() => console.log(viewport()));
export default function Root() {
return (

4
lightning/src/routes/about.tsx
View file

@ -2,7 +2,9 @@ import { Title } from 'solid-start';
import type { JSX } from 'solid-js';
export default function Home() {
return (
<main>
<Title>About Lightning</Title>
@ -57,4 +59,4 @@ export default function Home() {
</p>
</main>
) as JSX.Element;
}
};

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

@ -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 (
<main>
<Title>Ride the Lightning</Title>
<ul><li>Toolbox</li>
<li><button onClick={() => flyTo({ ...viewport(), ...BOS })}> Boston </button> </li>
<li><button onClick={() => flyTo({ ...viewport(), ...NYC })}> NYC </button> </li>
</ul>
</main>
) as JSX.Element;
};