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-16 20:03:33 -04:00
parent 5985698e3e
commit a73b8a734a
3 changed files with 73 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,6 @@
import { createSignal, Show } from 'solid-js';
import * as maplibre from 'maplibre-gl';
import MapGL, { Viewport, Camera, Layer, Popup, Marker } from 'solid-map-gl';
import { MapboxLayer } from '@deck.gl/mapbox/typed';
import { ArcLayer, ScatterplotLayer } from '@deck.gl/layers/typed';
import MapGL, { Viewport, Camera, Marker } from 'solid-map-gl';
import MapControls from './MapControls';
import MapScatLayer from './MapScatLayer';
@ -13,13 +11,30 @@ import type { MapOptions } from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
// test data
const FANEUIL_HALL: number[] = [-71.05625, 42.36]
const GD_TAVERN: number[] = [-71.056922, 42.360919]
const BBC: number[] = [-71.103, 42.3145]
const GARDEN: number[] = [-71.062228, 42.366303]
const PR_HOUSE: number[] = [-71.053678, 42.363722]
const ARC_DATA = [
{ source: FANEUIL_HALL, target: GD_TAVERN },
{ source: FANEUIL_HALL, target: BBC },
{ source: FANEUIL_HALL, target: GARDEN },
{ source: FANEUIL_HALL, target: PR_HOUSE },
];
const SCAT_DATA = [
{ coordinates: FANEUIL_HALL },
{ coordinates: GD_TAVERN },
{ coordinates: BBC },
{ coordinates: GARDEN },
{ coordinates: PR_HOUSE },
];
function BadassMap(): JSX.Element {
const FANEUIL_HALL: number[] = [-71.05625, 42.36]
const GD_TAVERN: number[] = [-71.056922, 42.360919]
const BBC: number[] = [-71.103, 42.3145]
const GARDEN: number[] = [-71.062228, 42.366303]
const PR_HOUSE: number[] = [-71.053678, 42.363722]
const TILES_URL: string = 'https://api.maptiler.com/maps/024da34e-fa66-4cb3-8f5f-0466b51e972e/style.json?key=Ukl2QNcQUCPAwuelQOvM'
const options: MapOptions = {
@ -38,42 +53,6 @@ function BadassMap(): JSX.Element {
const [rotate, setRotate] = createSignal<boolean>(true);
const toggleRotate = () => setRotate<boolean>(!rotate());
const ARC_DATA = [
{ source: FANEUIL_HALL, target: GD_TAVERN },
{ source: FANEUIL_HALL, target: BBC },
{ source: FANEUIL_HALL, target: GARDEN },
{ source: FANEUIL_HALL, target: PR_HOUSE },
];
const arcLayer = new MapboxLayer({
id: 'deckgl-arc',
type: ArcLayer,
data: ARC_DATA,
getSourcePosition: (d: any) => d.source,
getTargetPosition: (d: any) => d.target,
getSourceColor: [200, 0, 0],
getTargetColor: [0, 230, 0],
getWidth: 6,
});
const SCATTER_DATA = [
{ coordinates: FANEUIL_HALL },
{ coordinates: GD_TAVERN },
{ coordinates: BBC },
{ coordinates: GARDEN },
{ coordinates: PR_HOUSE },
];
const scatterplotLayer = new MapboxLayer({
id: 'deckgl-scatterplot',
type: ScatterplotLayer,
data: SCATTER_DATA,
getPosition: (d: any) => d.coordinates,
getRadius: 30,
getFillColor: [255, 140, 0],
getLineColor: [0, 0, 0,]
});
return (
<MapGL
mapLib={maplibre}
@ -81,8 +60,8 @@ function BadassMap(): JSX.Element {
viewport={viewport()}
onViewportChange={(evt: Viewport) => setViewport(evt)}
>
<Layer customLayer={arcLayer} />
<Layer customLayer={scatterplotLayer} />
<MapScatLayer data={SCAT_DATA} />
<MapArcLayer data={ARC_DATA} />
<Marker
lngLat={FANEUIL_HALL}

28
lightning/src/components/MapArcLayer.tsx Normal file
View file

@ -0,0 +1,28 @@
import { ArcLayer } from '@deck.gl/layers/typed';
import { MapboxLayer } from '@deck.gl/mapbox/typed';
import { Layer } from 'solid-map-gl';
import type { JSX } from 'solid-js';
function MapArcLayer(props): JSX.Element {
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,
});
return (
<>
<Layer customLayer={arcLayer} />
</>
);
};
export default MapArcLayer;

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

@ -1,7 +1,26 @@
import { ScatterplotLayer } from '@deck.gl/layers/typed';
import { MapboxLayer } from '@deck.gl/mapbox/typed';
import { Layer } from 'solid-map-gl';
import type { JSX } from 'solid-js';
function MapScatLayer(props): JSX.Element {
}
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,]
});
return (
<>
<Layer customLayer={scatterplotLayer} />
</>
);
};
export default MapScatLayer;