added custom breaks and descriptions

Author: cjonesof

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

@@ -35,6 +35,7 @@
   let {
     data,
     customPallet,
+    setCustomPallet,
     cooperativeGestures = true,
     standardControls = true,
     navigationControl,
@@ -56,6 +57,7 @@
     year,
     metric,
     breaksType = "quantile",
+    customBreaks,
     numberOfBreaks = 5,
     fillOpacity = 0.5,
     changeOpacityOnHover = true,
@@ -66,6 +68,7 @@
     maxZoom,
     maxBounds,
     hash = false,
+    interactive,
     updateHash = (u) => {
       replaceState(u, page.state);
     },
@@ -110,8 +113,10 @@
     updateHash?: (URL) => void;
     useInitialHash?: boolean;
     mapHeight?: number;
+    setCustomPallet?: boolean;
+    customBreaks?: number[];
+    interative?: boolean;
   } = $props();
-  $inspect(maxBounds);
   let styleLookup = {
     "Carto-light":
       "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
@@ -137,7 +142,7 @@
   let filteredGeoJsonData = $derived(filterGeo(geojsonData, year));
 
   let fillColors: string[] = $derived(
-    customPallet !== undefined
+    setCustomPallet == true
       ? customPallet
       : colorbrewer[colorPalette][numberOfBreaks],
   );
@@ -200,7 +205,9 @@
   let breaks = $derived(
     breaksType == "jenks"
       ? jenksBreaks(vals, numberOfBreaks)
-      : quantileBreaks(vals, numberOfBreaks),
+      : breaksType == "quantile"
+        ? quantileBreaks(vals, numberOfBreaks)
+        : customBreaks,
   );
 
   let dataWithColor = $derived(
@@ -233,6 +240,7 @@
   if (setMaxBounds) {
     let boundary = convertToLngLatBounds(maxBounds);
   }
+
   function zoomToArea(e) {
     if (clickToZoom) {
       let coordArray =
@@ -279,44 +287,46 @@
     bind:map
     bind:loaded
     {style}
-    {standardControls}
     {center}
+    {interactive}
     {zoom}
     {maxZoom}
     {minZoom}
     {...setMaxBounds ? { maxBounds: boundary } : {}}
+    {standardControls}
     {hash}
     {updateHash}
     class="map"
   >
-    {#if !standardControls}
-      <NonStandardControls
-        {navigationControl}
-        {navigationControlPosition}
-        {geolocateControl}
-        {geolocateControlPosition}
-        {fullscreenControl}
-        {fullscreenControlPosition}
-        {scaleControl}
-        {scaleControlPosition}
-        {scaleControlUnit}
-      />
+    {#if interactive}
+      {#if !standardControls}
+        <NonStandardControls
+          {navigationControl}
+          {navigationControlPosition}
+          {geolocateControl}
+          {geolocateControlPosition}
+          {fullscreenControl}
+          {fullscreenControlPosition}
+          {scaleControl}
+          {scaleControlPosition}
+          {scaleControlUnit}
+        />
+        <Control>
+          <ControlGroup>
+            <button
+              class="reset-button"
+              onclick={() => {
+                map.flyTo({
+                  center: center,
+                  zoom: zoom,
+                });
+              }}>Reset view</button
+            ></ControlGroup
+          >
+        </Control>
+      {/if}
     {/if}
 
-    <Control>
-      <ControlGroup>
-        <button
-          class="reset-button"
-          onclick={() => {
-            map.flyTo({
-              center: center,
-              zoom: zoom,
-            });
-          }}>Reset view</button
-        ></ControlGroup
-      >
-    </Control>
-
     <GeoJSON id="areas" data={merged} promoteId="areanm">
       <FillLayer
         paint={{

src/lib/components/data-vis/map/mapUtils.ts

@@ -106,12 +106,6 @@ export function quantileBreaks(data: number[], numBreaks: number): number[] {
   let len = data.length;
 
   let breaks: number[] = [
-    //   data[0]
-    //   data[Math.floor(len * 0.2)],
-    //   data[Math.floor(len * 0.4)],
-    //   data[Math.floor(len * 0.6)],
-    //   data[Math.floor(len * 0.8)],
-    //   data[len - 1],
   ];
   for (let i = 0; i < numBreaks; i++) {
     breaks.push(data[Math.floor(len * (i * (1 / numBreaks)))]);
@@ -120,3 +114,5 @@ export function quantileBreaks(data: number[], numBreaks: number): number[] {
 
   return breaks;
 }
+
+  

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

@@ -155,6 +155,12 @@
    */
   let parametersSourceArray = $derived(
     addIndexAndInitalValue([
+      {
+        name: "Interactive",
+        category: "UI",
+        value: false,
+        description: "Turn on/off the interactvity funtion for the maps",
+      },
       {
         name: "cooperativeGestures",
         isProp: true,
@@ -287,6 +293,7 @@
         category: "Styling",
         isProp: true,
         value: 400,
+        description: "Set height of map",
       },
       {
         name: "styleSheet",
@@ -351,11 +358,21 @@
         value: "YlGnBu",
         category: "Styling",
       },
+      {
+        name: "setCustomPallet",
+        isProp: true,
+        category: "Styling",
+        value: false,
+        description: " Set wheather a custom palllet will be used",
+      },
       {
         name: "customPallet",
         isProp: true,
         category: "Styling",
         value: [[]],
+        visable: { name: "setCustomPallet", value: true },
+        description:
+          "Pass in an array of colours you want to be used in a custom pallet. Write in a hex format",
       },
       {
         name: "showBorder",
@@ -436,9 +453,17 @@
         name: "breaksType",
         isProp: true,
         category: "Data",
-        options: ["quantile", "jenks"],
+        options: ["quantile", "jenks", "custom"],
         description: "The method for splitting your data into groups",
       },
+      {
+        name: "customBreaks",
+        isProp: true,
+        value: [20, 40, 60, 80, 100],
+        category: "Data",
+        description:
+          "Split the data into you own groups. Breaks must equal or be less the numberOfBreaks",
+      },
       {
         name: "numberOfBreaks",
         isProp: true,
@@ -509,7 +534,14 @@
         description: "The initial centre of the map, in [lng, lat] form",
       },
 
-      { name: "setMaxBounds", isProp: true, value: false, category: "View" },
+      {
+        name: "setMaxBounds",
+        isProp: true,
+        value: false,
+        category: "View",
+        description:
+          "Binds the viewpory to a the area between an NW point and SE point. Write max bounds as [[number,number], [number number]]",
+      },
 
       {
         name: "maxBounds",