adam/maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

meh

Browse source
This commit is contained in:
Adam 2023-05-01 21:05:37 -04:00
parent 65cbee4ea2
commit 7e5f574d91
7 changed files with 587 additions and 586 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
lightning/package.json
View file

@ -7,7 +7,7 @@
},
"type": "module",
"devDependencies": {
"@types/node": "^18.16.2",
"@types/node": "^18.16.3",
"esbuild": "^0.14.54",
"postcss": "^8.4.23",
"solid-start-node": "^0.2.26",

1076
lightning/pnpm-lock.yaml generated
View file

File diff suppressed because it is too large Load diff

9
lightning/src/components/Toolbox.tsx
View file

@ -1,9 +1,8 @@
import type { JSX } from "solid-js"
import type { Viewport } from "solid-map-gl";
import { Viewport } from "solid-map-gl";
import { mapRotate, setMapRotate } from "./map/BadassMap";
import { viewport, setViewport } from "./map/BadassMap";
import { unstable_clientOnly } from "solid-start";
const MapIconLayer = unstable_clientOnly(() => import('~/components/map/MapIconLayer.tsx'));
export function Toolbox() {
return (
@ -19,10 +18,6 @@ export function Toolbox() {
<button onClick={() => setMapRotate(!mapRotate())} > Toggle Rotate </button>
</li>
<li>
<button onClick={() => setMapIcons()} > Clear Icons </button>
</li>
<br />
<h3>Fly To:</h3>
<hr />

3
lightning/src/components/map/BadassMap.tsx
View file

@ -9,11 +9,12 @@ import { createEffect, createSignal, JSX } from 'solid-js';
import { unstable_clientOnly } from 'solid-start';
const MapScatLayer = unstable_clientOnly(() => import('~/components/map/MapScatLayer'));
const MapArcLayer = unstable_clientOnly(() => import('~/components/map/MapArcLayer'));
const MapIconLayer = unstable_clientOnly(() => import('~/components/map/MapIconLayer.tsx'));
const MapIconLayer = unstable_clientOnly(() => import('~/components/map/MapIconLayer'));
import 'maplibre-gl/dist/maplibre-gl.css';
import StyleJson from '~/style/style.json';
export const [mapIcons, setMapIcons] = createSignal([]);
export const [mapRotate, setMapRotate] = createSignal(false);
createEffect(() => console.log('Rotate:', mapRotate()));

20
lightning/src/components/map/MapIconLayer.tsx
View file

@ -1,21 +1,19 @@
import { IconLayer } from "@deck.gl/layers/typed";
import { MapboxLayer } from "@deck.gl/mapbox/typed";
import { Layer } from "solid-map-gl";
import { createEffect, createSignal, JSX, Show } from "solid-js";
import { createEffect, Show } from "solid-js";
import { useStationsContext } from "../StationsContext";
import { createMemo } from "solid-js";
const ICON_MAPPING = {
marker: { x: 0, y: 0, width: 128, height: 128, mask: true }
};
import type { JSX } from "solid-js";
export const [mapIcons, setMapIcons] = createSignal([]);
export default function MapIconLayer(props: any) {
const ICON_MAPPING = {
marker: { x: 0, y: 0, width: 128, height: 128, mask: true }
};
const [stations] = useStationsContext();
const pls = createMemo(() => setMapIcons(stations()));
createEffect(() => console.log("Watch me update but not trigger a render!", stations()));
return (
<Show when={stations()}>
@ -23,7 +21,7 @@ export default function MapIconLayer(props: any) {
new MapboxLayer({
id: 'deckgl-iconlayer',
type: IconLayer,
data: mapIcons(),
data: stations(),
pickable: true,
iconAtlas: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png',
iconMapping: ICON_MAPPING,
@ -33,8 +31,8 @@ export default function MapIconLayer(props: any) {
getSize: d => 3,
getColor: d => [d.Dist * 100, 140 - (d.Dist * 50), 0],
parameters: {
depthTest: false
}
depthTest: false,
},
} as any)} />
</Show>
) as JSX.Element

13
lightning/src/components/map/MapMarkerLayer.tsx
View file

@ -1,13 +0,0 @@
import { Marker, Popup } from 'solid-map-gl';
import type { NavigationOptions, GeolocateOptions, AttributionOptions, ScaleOptions, } from 'maplibre-gl';
import type { JSX } from 'solid-js';
export default function MapControls() {
return (
<>
</>
) as JSX.Element;
};

50
lightning/src/components/map/MapScatLayer.tsx
View file

@ -1,6 +1,7 @@
import { ScatterplotLayer } from '@deck.gl/layers/typed';
import { MapboxLayer } from '@deck.gl/mapbox/typed';
import { Layer } from 'solid-map-gl';
import { Show } from 'solid-js';
import type { JSX } from 'solid-js';
@ -13,23 +14,38 @@ type ScatData = {
export default function MapScatLayer(props: any) {
function onHover(info, event) {
// console.log('hover info:',info, 'hover event:', event);
};
function onClick(info, event) {
console.log('click info:', info, 'click event:', event);
};
return (
<Layer customLayer={
new MapboxLayer({
id: 'deckgl-scatterplot',
type: ScatterplotLayer,
data: allStations(),
pickable: false,
stroked: false,
lineWidthMaxPixels: 0,
radiusMinPixels: 1,
radiusMaxPixels: 50,
radiusUnits: 'meters',
getRadius: 1,
radiusScale: 10,
getPosition: (d: any) => d.coordinates,
antialiasing: false,
getFillColor: [255, 140, 0],
} as any)} />
<Show when={allStations()}>
<Layer customLayer={
new MapboxLayer({
id: 'deckgl-scatterplot',
type: ScatterplotLayer,
data: allStations(),
pickable: true,
onHover: onHover,
onClick: onClick,
highlightColor: [255, 255, 255, 1],
autoHighlight: true,
stroked: false,
lineWidthMaxPixels: 0,
radiusMinPixels: 1,
radiusMaxPixels: 50,
radiusUnits: 'meters',
getRadius: 1,
radiusScale: 10,
getPosition: (d: any) => d.coordinates,
antialiasing: false,
getFillColor: [255, 140, 0],
} as any)} />
</Show>
) as JSX.Element;
};