type stuff

lightning/src/components/BadassMap.tsx

@@ -1,10 +1,11 @@
 import { createSignal, Show } from 'solid-js';
-import MapGL, { Viewport, Control, Light, Camera } from 'solid-map-gl';
+import MapGL, { Viewport, 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 MapControls from './MapControls';
 import 'maplibre-gl/dist/maplibre-gl.css';
 
 function BadassMap(): JSX.Element {
@@ -39,18 +40,7 @@ function BadassMap(): JSX.Element {
                 <button onClick={toggleRotate}> Rotation Off </button>
             </Show>
 
-            <Control
+            <MapControls />
-                type="navigation"
-                position="top-right"
-                options={{
-                    showCompass: true,
-                    showZoom: true,
-                    visualizePitch: true,
-                }}
-            />
-
-            <Control type="geolocate" position="top-right" />
-            <Control type="scale" position="bottom-left" />
 
             <Light style={{
                 anchor: 'viewport',

lightning/src/components/MapControls.tsx

@@ -0,0 +1,58 @@
+import { Control } from 'solid-map-gl';
+import type {
+    NavigationOptions,
+    GeolocateOptions,
+    ScaleOptions,
+    AttributionOptions,
+} from 'maplibre-gl';
+
+import type { JSX } from 'solid-js';
+
+function MapControls(): JSX.Element {
+    const NAV_OPTIONS: NavigationOptions = {
+        showCompass: true,
+        showZoom: true,
+        visualizePitch: true,
+    }
+
+    const GEO_OPTIONS: GeolocateOptions = {
+        positionOptions: {
+            enableHighAccuracy: false,
+            timeout: 6000,
+        },
+        fitBoundsOptions: { maxZoom: 15 },
+        trackUserLocation: false,
+        showAccuracyCircle: false,
+        showUserLocation: true,
+    }
+
+    const SCALE_OPTIONS: ScaleOptions = {
+        maxWidth: 100,
+        unit: 'imperial',
+    }
+
+    return (
+        <>
+            <Control
+                type="navigation"
+                position="top-right"
+                options={NAV_OPTIONS}
+            />
+
+            <Control
+                type="geolocate"
+                position="top-right"
+                options={GEO_OPTIONS}
+            />
+
+            <Control
+                type="scale"
+                position="bottom-left"
+                options={SCALE_OPTIONS}
+            />
+        </>
+    )
+}
+
+export default MapControls;
+