zoom out for mobile...

lightning/src/components/Toolbox.tsx

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

lightning/src/components/map/BadassMap.tsx

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

lightning/src/components/map/MapIconLayer.tsx

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