From 5939806d1627c354c68214bc6fa1485fc8a23aa1 Mon Sep 17 00:00:00 2001
From: Adam <24621027+adoyle0@users.noreply.github.com>
Date: Thu, 27 Apr 2023 14:52:38 -0400
Subject: [PATCH] zoom out for mobile...

---
 lightning/src/components/Toolbox.tsx          | 12 +++++++++---
 lightning/src/components/map/BadassMap.tsx    |  4 ++--
 lightning/src/components/map/MapIconLayer.tsx |  8 +++++---
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/lightning/src/components/Toolbox.tsx b/lightning/src/components/Toolbox.tsx
index 628f6ec..4aa6df5 100644
--- a/lightning/src/components/Toolbox.tsx
+++ b/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>
diff --git a/lightning/src/components/map/BadassMap.tsx b/lightning/src/components/map/BadassMap.tsx
index ddfe184..f6b175f 100644
--- a/lightning/src/components/map/BadassMap.tsx
+++ b/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,
 });
diff --git a/lightning/src/components/map/MapIconLayer.tsx b/lightning/src/components/map/MapIconLayer.tsx
index 7d7b81d..c0a26cf 100644
--- a/lightning/src/components/map/MapIconLayer.tsx
+++ b/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,