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

zoom out for mobile...

Browse source
This commit is contained in:
Adam 2023-04-27 14:52:38 -04:00
parent ba2cd712f4
commit 5939806d16
3 changed files with 16 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,6 +2,8 @@ import type { JSX } from "solid-js"
import type { Viewport } from "solid-map-gl"; import type { Viewport } from "solid-map-gl";
import { mapRotate, setMapRotate } from "./map/BadassMap"; import { mapRotate, setMapRotate } from "./map/BadassMap";
import { viewport, setViewport } 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() { export function Toolbox() {
return ( return (
@ -14,7 +16,11 @@ export function Toolbox() {
</li> </li>
<li> <li>
<button onClick={() => setMapRotate(!mapRotate())} > Rotate </button> <button onClick={() => setMapRotate(!mapRotate())} > Toggle Rotate </button>
</li>
<li>
<button onClick={() => setMapIcons()} > Clear Icons </button>
</li> </li>
<br /> <br />
@ -24,8 +30,8 @@ export function Toolbox() {
<li> <li>
<button onClick={() => setViewport<Viewport>({ <button onClick={() => setViewport<Viewport>({
...viewport(), ...viewport(),
center: { lng: -90, lat: 38, }, center: { lng: -96, lat: 38, },
zoom: 4, zoom: 2.25,
bearing: 0, bearing: 0,
pitch: 0, pitch: 0,
})} > Default </button> })} > Default </button>

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

@ -19,8 +19,8 @@ export const [mapRotate, setMapRotate] = createSignal(false);
createEffect(() => console.log('Rotate:', mapRotate())); createEffect(() => console.log('Rotate:', mapRotate()));
export const [viewport, setViewport] = createSignal<Viewport>({ export const [viewport, setViewport] = createSignal<Viewport>({
center: { lng: -90, lat: 38, }, center: { lng: -96, lat: 38, },
zoom: 4, zoom: 2.25,
bearing: 0, bearing: 0,
pitch: 0, pitch: 0,
}); });

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

@ -2,7 +2,7 @@ import { IconLayer } 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, JSX, Show } from "solid-js"; import { createEffect, createSignal, JSX, Show } from "solid-js";
import { useStationsContext } from "../StationsContext"; import { useStationsContext } from "../StationsContext";
import { createMemo } from "solid-js"; import { createMemo } from "solid-js";
@ -10,10 +10,12 @@ const ICON_MAPPING = {
marker: { x: 0, y: 0, width: 128, height: 128, mask: true } marker: { x: 0, y: 0, width: 128, height: 128, mask: true }
}; };
export const [mapIcons, setMapIcons] = createSignal([]);
export default function MapIconLayer(props: any) { export default function MapIconLayer(props: any) {
const [stations] = useStationsContext(); const [stations] = useStationsContext();
const pls = createMemo(() => stations()); const pls = createMemo(() => setMapIcons(stations()));
return ( return (
<Show when={stations()}> <Show when={stations()}>
@ -21,7 +23,7 @@ export default function MapIconLayer(props: any) {
new MapboxLayer({ new MapboxLayer({
id: 'deckgl-iconlayer', id: 'deckgl-iconlayer',
type: IconLayer, type: IconLayer,
data: pls(), data: mapIcons(),
pickable: true, pickable: true,
iconAtlas: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png', iconAtlas: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/icon-atlas.png',
iconMapping: ICON_MAPPING, iconMapping: ICON_MAPPING,