Added Custom colours, Bounds and zoom functions

Author: cjonesof

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

@@ -34,6 +34,7 @@
   import type { LngLatBoundsLike } from "maplibre-gl";
   let {
     data,
+    customPallet,
     cooperativeGestures = true,
     standardControls = true,
     navigationControl,
@@ -70,8 +71,10 @@
     },
     useInitialHash = true,
     mapHeight = 200,
+    setMaxBounds,
   }: {
     data: object[];
+    customPallet: object[] | undefined;
     cooperativeGestures?: boolean;
     standardControls?: boolean;
     navigationControl?: boolean;
@@ -99,9 +102,10 @@
     hoverOpacity?: number;
     center?: LngLatLike | undefined;
     zoom?: number;
-    minZoom?: number;
-    maxZoom?: number;
-    maxBounds: [number, number][];
+    minZoom?: number | undefined;
+    maxZoom?: number | undefined;
+    maxBounds?: [number, number][];
+    setMaxBounds?: boolean;
     hash?: boolean;
     updateHash?: (URL) => void;
     useInitialHash?: boolean;
@@ -133,7 +137,9 @@
   let filteredGeoJsonData = $derived(filterGeo(geojsonData, year));
 
   let fillColors: string[] = $derived(
-    colorbrewer[colorPalette][numberOfBreaks],
+    customPallet !== undefined
+      ? customPallet
+      : colorbrewer[colorPalette][numberOfBreaks],
   );
 
   let borderColor = "#003300";
@@ -224,7 +230,9 @@
     return bounds;
   }
 
-  let boundary = convertToLngLatBounds(maxBounds);
+  if (setMaxBounds) {
+    let boundary = convertToLngLatBounds(maxBounds);
+  }
   function zoomToArea(e) {
     if (clickToZoom) {
       let coordArray =
@@ -276,7 +284,7 @@
     {zoom}
     {maxZoom}
     {minZoom}
-    maxBounds={boundary}
+    {...setMaxBounds ? { maxBounds: boundary } : {}}
     {hash}
     {updateHash}
     class="map"

src/wrappers/components/data-vis/map/MapWrapper.svelte

@@ -346,10 +346,17 @@
           "Set1",
           "Set2",
           "Set3",
+          "custom",
         ],
         value: "YlGnBu",
         category: "Styling",
       },
+      {
+        name: "customPallet",
+        isProp: true,
+        category: "Styling",
+        value: [[]],
+      },
       {
         name: "showBorder",
         isProp: true,
@@ -501,6 +508,9 @@
         value: [-2.5, 53],
         description: "The initial centre of the map, in [lng, lat] form",
       },
+
+      { name: "setMaxBounds", isProp: true, value: false, category: "View" },
+
       {
         name: "maxBounds",
         isProp: true,
@@ -509,7 +519,8 @@
           [-23.899, 47.5943],
           [13.421, 59.8988],
         ],
-        description: "The initial centre of the map, in [lng, lat] form",
+        visible: { name: "setMaxBounds", value: true },
+        description: "Set the max bounds of the map",
       },
       {
         name: "zoom",