type stuff

lightning/src/components/BadassMap.tsx

@@ -1,27 +1,33 @@
-import { Component, createSignal, Show } from 'solid-js';
+import { createSignal, Show } from 'solid-js';
 import MapGL, { Viewport, Control, Light, Camera } from 'solid-map-gl';
 import * as maplibre from 'maplibre-gl';
+
+import type { JSX } from 'solid-js';
+import type { MapOptions } from 'maplibre-gl';
+
 import 'maplibre-gl/dist/maplibre-gl.css';
 
-export default function BadassMap(): Component {
+function BadassMap(): JSX.Element {
-    const [viewport, setViewport] = createSignal({
+    const options: MapOptions = {
+        container: '',
+        style: 'https://api.maptiler.com/maps/024da34e-fa66-4cb3-8f5f-0466b51e972e/style.json?key=Ukl2QNcQUCPAwuelQOvM',
+        maxPitch: 85,
+        antialias: true,
         center: [-71.05625, 42.36],
         zoom: 15.5,
         bearing: 160,
         pitch: 60,
-        maxPitch: 85,
+    }
-        antialias: true,
-    } as Viewport);
 
-    const [rotate, setRotate] = createSignal(true)
+    const [viewport, setViewport] = createSignal<Viewport>(options);
-    const toggleRotate = () => setRotate(!rotate())
+
+    const [rotate, setRotate] = createSignal<boolean>(true)
+    const toggleRotate = () => setRotate<boolean>(!rotate())
 
     return (
         <MapGL
             mapLib={maplibre}
-            options={{
+            options={options}
-                style: 'https://api.maptiler.com/maps/024da34e-fa66-4cb3-8f5f-0466b51e972e/style.json?key=Ukl2QNcQUCPAwuelQOvM'
-            }}
             viewport={viewport()}
             onViewportChange={(evt: Viewport) => setViewport(evt)}
         >
@@ -52,3 +58,5 @@ export default function BadassMap(): Component {
         </MapGL>
     );
 };
+
+export default BadassMap;