Moving non-standard map controls to a separate component

Author: MikeLister

src/lib/components/data-vis/map/Map.svelte

@@ -10,10 +10,6 @@
     Control,
     ControlButton,
     ControlGroup,
-    NavigationControl,
-    GeolocateControl,
-    FullscreenControl,
-    ScaleControl,
   } from "svelte-maplibre";
   import { contrastingColor, colorPalette } from "./colors.ts";
   import { hoverStateFilter } from "svelte-maplibre/filters.js";
@@ -27,6 +23,7 @@
     jenksBreaks,
     quantileBreaks,
   } from "./mapUtils.js";
+  import NonStandardControls from "./NonStandardControls.svelte";
 
   let {
     data,
@@ -205,26 +202,20 @@
   {center}
   {zoom}
 >
-  {#if navigationControl && !standardControls}
-    {#key navigationControlPosition}
-      <NavigationControl position={navigationControlPosition} />
-    {/key}
-  {/if}
-  {#if geolocateControl && !standardControls}
-    {#key geolocateControlPosition}
-      <GeolocateControl position={geolocateControlPosition} />
-    {/key}
-  {/if}
-  {#if fullscreenControl && !standardControls}
-    {#key fullscreenControlPosition}
-      <FullscreenControl position={fullscreenControlPosition} />
-    {/key}
-  {/if}
-  {#if scaleControl && !standardControls}
-    {#key { scaleControlPosition, scaleControlUnit }}
-      <ScaleControl position={scaleControlPosition} unit={scaleControlUnit} />
-    {/key}
+  {#if !standardControls}
+    <NonStandardControls
+      {navigationControl}
+      {navigationControlPosition}
+      {geolocateControl}
+      {geolocateControlPosition}
+      {fullscreenControl}
+      {fullscreenControlPosition}
+      {scaleControl}
+      {scaleControlPosition}
+      {scaleControlUnit}
+    />
   {/if}
+
   <Control>
     <ControlGroup>
       <button
@@ -291,5 +282,6 @@
     /* margin: 10px; */
     width: fit-content;
     padding: 0px 10px;
+    font-size: 16px;
   }
 </style>

src/lib/components/data-vis/map/NonStandardControls.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  //@ts-nocheck
+  import {
+    FullscreenControl,
+    GeolocateControl,
+    NavigationControl,
+    ScaleControl,
+  } from "svelte-maplibre";
+
+  let {
+    navigationControl,
+    navigationControlPosition = "top-left",
+    geolocateControl,
+    geolocateControlPosition = "top-left",
+    fullscreenControl,
+    fullscreenControlPosition = "top-left",
+    scaleControl,
+    scaleControlPosition = "bottom-left",
+    scaleControlUnit = "metric",
+  } = $props();
+</script>
+
+{#if navigationControl}
+  {#key navigationControlPosition}
+    <NavigationControl position={navigationControlPosition} />
+  {/key}
+{/if}
+{#if geolocateControl}
+  {#key geolocateControlPosition}
+    <GeolocateControl position={geolocateControlPosition} />
+  {/key}
+{/if}
+{#if fullscreenControl}
+  {#key fullscreenControlPosition}
+    <FullscreenControl position={fullscreenControlPosition} />
+  {/key}
+{/if}
+{#if scaleControl}
+  {#key { scaleControlPosition, scaleControlUnit }}
+    <ScaleControl position={scaleControlPosition} unit={scaleControlUnit} />
+  {/key}
+{/if}