try all the dots

This commit is contained in:
Adam 2023-04-27 11:05:33 -04:00
parent a4b8c463fb
commit 647794f6cb
5 changed files with 57 additions and 74 deletions

View file

@ -15,9 +15,9 @@
"vite": "^4.3.3" "vite": "^4.3.3"
}, },
"dependencies": { "dependencies": {
"@deck.gl/layers": "^8.9.10", "@deck.gl/layers": "^8.9.11",
"@deck.gl/mapbox": "^8.9.10", "@deck.gl/mapbox": "^8.9.11",
"@deck.gl/mesh-layers": "^8.9.10", "@deck.gl/mesh-layers": "^8.9.11",
"@solidjs/meta": "^0.28.4", "@solidjs/meta": "^0.28.4",
"@solidjs/router": "^0.8.2", "@solidjs/router": "^0.8.2",
"autoprefixer": "^10.4.14", "autoprefixer": "^10.4.14",

View file

@ -2,14 +2,14 @@ lockfileVersion: '6.0'
dependencies: dependencies:
'@deck.gl/layers': '@deck.gl/layers':
specifier: ^8.9.10 specifier: ^8.9.11
version: 8.9.10(@deck.gl/core@8.9.10)(@loaders.gl/core@3.3.3)(@luma.gl/core@8.5.19) version: 8.9.11(@deck.gl/core@8.9.11)(@loaders.gl/core@3.3.3)(@luma.gl/core@8.5.19)
'@deck.gl/mapbox': '@deck.gl/mapbox':
specifier: ^8.9.10 specifier: ^8.9.11
version: 8.9.10(@deck.gl/core@8.9.10) version: 8.9.11(@deck.gl/core@8.9.11)
'@deck.gl/mesh-layers': '@deck.gl/mesh-layers':
specifier: ^8.9.10 specifier: ^8.9.11
version: 8.9.10(@deck.gl/core@8.9.10)(@loaders.gl/images@3.3.3)(@luma.gl/core@8.5.19)(@luma.gl/engine@8.5.19)(@luma.gl/gltools@8.5.19)(@luma.gl/webgl@8.5.19) version: 8.9.11(@deck.gl/core@8.9.11)(@loaders.gl/images@3.3.3)(@luma.gl/core@8.5.19)(@luma.gl/engine@8.5.19)(@luma.gl/gltools@8.5.19)(@luma.gl/webgl@8.5.19)
'@solidjs/meta': '@solidjs/meta':
specifier: ^0.28.4 specifier: ^0.28.4
version: 0.28.4(solid-js@1.7.3) version: 0.28.4(solid-js@1.7.3)
@ -1178,8 +1178,8 @@ packages:
'@babel/helper-validator-identifier': 7.19.1 '@babel/helper-validator-identifier': 7.19.1
to-fast-properties: 2.0.0 to-fast-properties: 2.0.0
/@deck.gl/core@8.9.10: /@deck.gl/core@8.9.11:
resolution: {integrity: sha512-1EzKjpxhbmn6+fHsCkL2Cd60FBNp/DKksijNNPkdzrkzkbXo52pCtQPT3W1cPMdGwk0JiAwGZmQTVpdPvcuarw==} resolution: {integrity: sha512-BlTil1NTYgzs1/uMOgJfO5LqL8coOYypaYxRp4Gy0Zybf0BZSW0W7VVsFZ+9YXWFRZb+n3uYVYFUaq1G7K7/sA==}
dependencies: dependencies:
'@loaders.gl/core': 3.3.3 '@loaders.gl/core': 3.3.3
'@loaders.gl/images': 3.3.3 '@loaders.gl/images': 3.3.3
@ -1197,14 +1197,14 @@ packages:
mjolnir.js: 2.7.1 mjolnir.js: 2.7.1
dev: false dev: false
/@deck.gl/layers@8.9.10(@deck.gl/core@8.9.10)(@loaders.gl/core@3.3.3)(@luma.gl/core@8.5.19): /@deck.gl/layers@8.9.11(@deck.gl/core@8.9.11)(@loaders.gl/core@3.3.3)(@luma.gl/core@8.5.19):
resolution: {integrity: sha512-fQn0AuPz4E3KulI1Sg2l5KrVbbi1oWBcSP97IKccI/YVTtlrBKj5Rdzfu4OmiNN3cF2fBB2KZkujwluVFxzDUA==} resolution: {integrity: sha512-85KXPQCYlCb+J4BXjVkB2fg8VYO5d6ME7RPsl13eAIi7jFnJiYecgCnUlFMNsmy2qTFH5Ks8AKLWz54HOoUZ8Q==}
peerDependencies: peerDependencies:
'@deck.gl/core': ^8.0.0 '@deck.gl/core': ^8.0.0
'@loaders.gl/core': ^3.0.0 '@loaders.gl/core': ^3.0.0
'@luma.gl/core': ^8.0.0 '@luma.gl/core': ^8.0.0
dependencies: dependencies:
'@deck.gl/core': 8.9.10 '@deck.gl/core': 8.9.11
'@loaders.gl/core': 3.3.3 '@loaders.gl/core': 3.3.3
'@loaders.gl/images': 3.3.3 '@loaders.gl/images': 3.3.3
'@loaders.gl/schema': 3.3.3 '@loaders.gl/schema': 3.3.3
@ -1217,22 +1217,22 @@ packages:
earcut: 2.2.4 earcut: 2.2.4
dev: false dev: false
/@deck.gl/mapbox@8.9.10(@deck.gl/core@8.9.10): /@deck.gl/mapbox@8.9.11(@deck.gl/core@8.9.11):
resolution: {integrity: sha512-k683gU30N0Gyh6YTqf+eXdJIRzUa0uACQvK5Xas/NsRRlMqwQruLfJWFGItYICyjASW182U43+jGMPUZB78ZTg==} resolution: {integrity: sha512-ix3NcnJVWHC4Bh1PqqxRkRj7GQR20BNbiJwq206Qj0zabOKUZGL4ZZfqd7cRJJ95YQMa9TZlx0Ipz5u4WvHhog==}
peerDependencies: peerDependencies:
'@deck.gl/core': ^8.0.0 '@deck.gl/core': ^8.0.0
dependencies: dependencies:
'@deck.gl/core': 8.9.10 '@deck.gl/core': 8.9.11
'@types/mapbox-gl': 2.7.10 '@types/mapbox-gl': 2.7.10
dev: false dev: false
/@deck.gl/mesh-layers@8.9.10(@deck.gl/core@8.9.10)(@loaders.gl/images@3.3.3)(@luma.gl/core@8.5.19)(@luma.gl/engine@8.5.19)(@luma.gl/gltools@8.5.19)(@luma.gl/webgl@8.5.19): /@deck.gl/mesh-layers@8.9.11(@deck.gl/core@8.9.11)(@loaders.gl/images@3.3.3)(@luma.gl/core@8.5.19)(@luma.gl/engine@8.5.19)(@luma.gl/gltools@8.5.19)(@luma.gl/webgl@8.5.19):
resolution: {integrity: sha512-LxUdENKg0lh6GXQCJmznjf70SguldtjmUChkgbkTn/sKMUvV5siKmdHVNjGAHLlE/vSUeeYwaMPsJ2WwFtgxUw==} resolution: {integrity: sha512-DnSYJ352BTXXBCkGuhJk9IU9jeN6blmdZAycxJ20Xmqzbnbo/NbYDyLGS5zgwZJdfdBY9R6jzZn4YI0KZ5anKA==}
peerDependencies: peerDependencies:
'@deck.gl/core': ^8.0.0 '@deck.gl/core': ^8.0.0
'@luma.gl/core': ^8.0.0 '@luma.gl/core': ^8.0.0
dependencies: dependencies:
'@deck.gl/core': 8.9.10 '@deck.gl/core': 8.9.11
'@loaders.gl/gltf': 3.3.3 '@loaders.gl/gltf': 3.3.3
'@luma.gl/constants': 8.5.19 '@luma.gl/constants': 8.5.19
'@luma.gl/core': 8.5.19 '@luma.gl/core': 8.5.19
@ -1818,7 +1818,7 @@ packages:
'@babel/types': 7.21.4 '@babel/types': 7.21.4
'@types/babel__generator': 7.6.4 '@types/babel__generator': 7.6.4
'@types/babel__template': 7.4.1 '@types/babel__template': 7.4.1
'@types/babel__traverse': 7.18.4 '@types/babel__traverse': 7.18.5
/@types/babel__generator@7.6.4: /@types/babel__generator@7.6.4:
resolution: {integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==} resolution: {integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==}
@ -1831,8 +1831,8 @@ packages:
'@babel/parser': 7.21.4 '@babel/parser': 7.21.4
'@babel/types': 7.21.4 '@babel/types': 7.21.4
/@types/babel__traverse@7.18.4: /@types/babel__traverse@7.18.5:
resolution: {integrity: sha512-TLG7CsGZZmX9aDF78UuJxnNTfQyRUFU0OYIVyIblr0/wd/HvsIo8wmuB90CszeD2MtLLAE9Tt4cWvk+KVkyGIw==} resolution: {integrity: sha512-enCvTL8m/EHS/zIvJno9nE+ndYPh1/oNFzRYRmtUqJICG2VnCSBzMLW5VN2KCQU91f23tsNKR8v7VJJQMatl7Q==}
dependencies: dependencies:
'@babel/types': 7.21.4 '@babel/types': 7.21.4
@ -2038,7 +2038,7 @@ packages:
hasBin: true hasBin: true
dependencies: dependencies:
caniuse-lite: 1.0.30001481 caniuse-lite: 1.0.30001481
electron-to-chromium: 1.4.372 electron-to-chromium: 1.4.374
node-releases: 2.0.10 node-releases: 2.0.10
update-browserslist-db: 1.0.11(browserslist@4.21.5) update-browserslist-db: 1.0.11(browserslist@4.21.5)
@ -2237,8 +2237,8 @@ packages:
/ee-first@1.1.1: /ee-first@1.1.1:
resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==} resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
/electron-to-chromium@1.4.372: /electron-to-chromium@1.4.374:
resolution: {integrity: sha512-MrlFq/j+TYHOjeWsWGYfzevc25HNeJdsF6qaLFrqBTRWZQtWkb1myq/Q2veLWezVaa5OcSZ99CFwTT4aF4Mung==} resolution: {integrity: sha512-dNP9tQNTrjgVlSXMqGaj0BdrCS+9pcUvy5/emB6x8kh0YwCoDZ0Z4ce1+7aod+KhybHUd5o5LgKrc5al4kVmzQ==}
/emoji-regex@8.0.0: /emoji-regex@8.0.0:
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@ -3260,8 +3260,8 @@ packages:
dependencies: dependencies:
queue-microtask: 1.2.3 queue-microtask: 1.2.3
/rxjs@7.8.0: /rxjs@7.8.1:
resolution: {integrity: sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==} resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
dependencies: dependencies:
tslib: 2.5.0 tslib: 2.5.0
@ -3756,7 +3756,7 @@ packages:
joi: 17.9.2 joi: 17.9.2
lodash: 4.17.21 lodash: 4.17.21
minimist: 1.2.8 minimist: 1.2.8
rxjs: 7.8.0 rxjs: 7.8.1
transitivePeerDependencies: transitivePeerDependencies:
- debug - debug

View file

@ -7,10 +7,10 @@ export const MapContext = createContext();
export function MapContextProvider(props: any) { export function MapContextProvider(props: any) {
const [viewport, setViewport] = createSignal<Viewport>({ const [viewport, setViewport] = createSignal<Viewport>({
center: { lng: -71.05625, lat: 42.36, }, center: { lng: -90, lat: 38, },
zoom: 15.5, zoom: 4,
bearing: 160, bearing: 0,
pitch: 60, pitch: 0,
}); });
return ( return (

View file

@ -37,7 +37,6 @@ export default function BadassMap(props: any) {
<MapScatLayer /> <MapScatLayer />
<MapArcLayer /> <MapArcLayer />
<MapMarkerLayer />
<MapControls /> <MapControls />
</MapGL > </MapGL >

View file

@ -1,11 +1,10 @@
import { ScatterplotLayer } from '@deck.gl/layers/typed'; import { ScatterplotLayer } from '@deck.gl/layers/typed';
import { MapboxLayer } from '@deck.gl/mapbox/typed'; import { MapboxLayer } from '@deck.gl/mapbox/typed';
import { Layer } from 'solid-map-gl'; import { Layer } from 'solid-map-gl';
import { createEffect, createMemo, createSignal, Show } from 'solid-js';
import type { JSX } from 'solid-js'; import type { JSX } from 'solid-js';
import { StationsContext, useStationsContext } from '~/components/StationsContext';
type ScatData = { type ScatData = {
coordinates: number[] coordinates: number[]
@ -13,48 +12,33 @@ type ScatData = {
export default function MapScatLayer(props: any) { export default function MapScatLayer(props: any) {
const [stations] = useStationsContext();
const [scats, setScats] = createSignal([]); async function fetchAllStations() {
let buf: ScatData[] = [];
async function getCoords(stations) { const response = await fetch('https://kevinfwu.com/getall');
if (stations() === undefined) { for (const station of await response.json()) {
return buf.push({ coordinates: [station.Coordinates[1], station.Coordinates[0]] })
} else if (stations.loading) {
return stations.loading
} else if (stations.error) {
return stations.error
} else {
let buf: ScatData[] = [];
for (const station of stations()) {
// long lat
buf.push({ coordinates: [station.Loc.Coordinates[1], station.Loc.Coordinates[0]] })
};
return buf;
}; };
return (buf);
}; };
const pls = createMemo(() => setScats(getCoords(stations)));
return ( return (
<Show when={stations()}> <Layer customLayer={
<Layer customLayer={ new MapboxLayer({
new MapboxLayer({ id: 'deckgl-scatterplot',
id: 'deckgl-scatterplot', type: ScatterplotLayer,
type: ScatterplotLayer, data: fetchAllStations(),
data: scats(), pickable: true,
pickable: true, stroked: false,
stroked: false, lineWidthMaxPixels: 0,
lineWidthMaxPixels: 0, radiusMinPixels: 1,
radiusMinPixels: 1, radiusMaxPixels: 100,
radiusMaxPixels: 100, radiusUnits: 'meters',
radiusUnits: 'meters', getRadius: 1,
getRadius: 1, radiusScale: 10,
radiusScale: 10, getPosition: (d: any) => d.coordinates,
getPosition: (d: any) => d.coordinates, antialiasing: false,
antialiasing: false, getFillColor: [255, 140, 0],
getFillColor: [255, 140, 0], } as any)} />
} as any)} />
</Show>
) as JSX.Element; ) as JSX.Element;
}; };