@communitiesuk/svelte-component-library 0.1.18 → 0.2.0-alpha.2

package/dist/components/data-vis/map/Map.svelte

@@ -2,17 +2,19 @@
   import {
     MapLibre,
     GeoJSON,
+    VectorTileSource,
     FillLayer,
     LineLayer,
     zoomTransition,
     Control,
     ControlButton,
     ControlGroup,
+    ScaleControl,
   } from "svelte-maplibre";
   import { contrastingColor } from "./colors.js";
   import { colorbrewer } from "./colorbrewer.js";
   import { hoverStateFilter } from "svelte-maplibre/filters.js";
-  import type { LngLatLike } from "maplibre-gl";
+  import type { LngLatLike, LngLatBoundsLike } from "maplibre-gl";
   import type { FeatureCollection } from "geojson";
   import fullTopo from "./fullTopo.json";
   import * as topojson from "topojson-client";
@@ -22,21 +24,22 @@
     filterGeo,
     jenksBreaks,
     quantileBreaks,
+    createPaintObjectFromMetric,
+    extractVectorMetricValues,
   } from "./mapUtils.js";
   import NonStandardControls from "./NonStandardControls.svelte";
   import { replaceState } from "$app/navigation";
   import { page } from "$app/state";
   import { joinData } from "./dataJoin.js";
 
-  import maplibregl from "maplibre-gl";
-  const { LngLatBounds } = maplibregl;
+  import maplibre from "maplibre-gl";
+  const { LngLatBounds } = maplibre;
 
-  import type { LngLatBoundsLike } from "maplibre-gl";
   let {
     data,
-    customPallet,
-    setCustomPallet,
-    interactive,
+    customPalette,
+    setCustomPalette = false,
+    interactive = true,
     cooperativeGestures = true,
     standardControls = true,
     navigationControl,
@@ -52,43 +55,74 @@
     colorPalette = "YlGnBu",
     showBorder = false,
     maxBorderWidth = 1.5,
-    tooltip,
+    tooltip = true,
     clickToZoom = true,
-    geoType,
-    year,
-    metric,
+    geoType = "ltla",
+    year = 2024,
+    metric = "Residual household waste",
     breaksType = "quantile",
-    customBreaks,
+    customBreaks = [20, 40, 60, 80, 100],
     numberOfBreaks = 5,
     fillOpacity = 0.5,
     changeOpacityOnHover = true,
     hoverOpacity = 0.8,
     center = [-2.5, 53],
     zoom = 5,
-    minZoom,
-    maxZoom,
-    maxBoundsCoords,
+    minZoom = 6,
+    maxZoom = 14,
+    maxBoundsCoords = [
+      [-10, 49],
+      [5, 60],
+    ],
     hash = false,
     updateHash = (u) => {
       replaceState(u, page.state);
     },
     useInitialHash = true,
     mapHeight = 200,
-    setMaxBounds,
+    setMaxBounds = false,
+    onload,
+    onerror,
+    onclick,
+    ondblclick,
+    onmousemove,
+    oncontextmenu,
+    onmovestart,
+    onmoveend,
+    onzoomstart,
+    onzoom,
+    onzoomend,
+    onpitch,
+    onrotate,
+    onwheel,
+    ondata,
+    onstyleload,
+    onstyledata,
+    onidle,
+    geoSource = "file",
+    tileSource = "http://localhost:8080/{z}/{x}/{y}.pbf",
+    geojsonPromoteId = "areanm",
+    vectorMetricProperty = "Index of Multiple Deprivation (IMD) Decile",
+    vectorLayerName = "LSOA",
+    borderColor = "#003300",
+    labelSourceLayer = "place",
+    externalData = null,
+    showLegend = false,
   }: {
     data: object[];
-    customPallet: object[] | undefined;
+    paintObject?: object;
+    customPalette?: object[];
     cooperativeGestures?: boolean;
     standardControls?: boolean;
     navigationControl?: boolean;
-    navigationControlPosition?: string;
+    navigationControlPosition?: maplibregl.ControlPosition;
     geolocateControl?: boolean;
-    geolocateControlPosition?: string;
+    geolocateControlPosition?: maplibregl.ControlPosition;
     fullscreenControl?: boolean;
-    fullscreenControlPosition?: string;
+    fullscreenControlPosition?: maplibregl.ControlPosition;
     scaleControl?: boolean;
-    scaleControlPosition?: string;
-    scaleControlUnit?: string;
+    scaleControlPosition?: maplibregl.ControlPosition;
+    scaleControlUnit?: "imperial" | "metric" | "nautical";
     styleSheet?: string | URL | object;
     colorPalette?: string;
     showBorder?: boolean;
@@ -101,9 +135,9 @@
     breaksType?: string;
     numberOfBreaks?: number;
     fillOpacity?: number;
-    changeOpacityOnHover: boolean;
+    changeOpacityOnHover?: boolean;
     hoverOpacity?: number;
-    center?: LngLatLike | undefined;
+    center?: LngLatLike;
     zoom?: number;
     minZoom?: number | undefined;
     maxZoom?: number | undefined;
@@ -113,18 +147,56 @@
     updateHash?: (URL) => void;
     useInitialHash?: boolean;
     mapHeight?: number;
-    setCustomPallet?: boolean;
+    setCustomPalette?: boolean;
     customBreaks?: number[];
-    interactive: boolean;
+    interactive?: boolean;
+    showLegend: boolean;
+    onload?: (map: maplibregl.Map) => void;
+    onerror?: (error: Partial<ErrorEvent>) => void;
+    onclick?: (e: maplibregl.MapMouseEvent) => void;
+    ondblclick?: (e: maplibregl.MapMouseEvent) => void;
+    onmousemove?: (e: maplibregl.MapMouseEvent) => void;
+    oncontextmenu?: (e: maplibregl.MapMouseEvent) => void;
+    onmovestart?: (e: MapMoveEvent) => void;
+    onmoveend?: (e: MapMoveEvent) => void;
+    onzoomstart?: (e: maplibregl.MapLibreZoomEvent) => void;
+    onzoom?: (e: maplibregl.MapLibreZoomEvent) => void;
+    onzoomend?: (e: maplibregl.MapLibreZoomEvent) => void;
+    onpitch?: (
+      e: maplibregl.MapLibreEvent<MouseEvent | TouchEvent | undefined>,
+    ) => void;
+    onrotate?: (
+      e: maplibregl.MapLibreEvent<MouseEvent | TouchEvent | undefined>,
+    ) => void;
+    onwheel?: (e: maplibregl.MapWheelEvent) => void;
+    ondata?: (e: maplibregl.MapDataEvent) => void;
+    onstyleload?: (e: StyleLoadEvent) => void;
+    onstyledata?: (e: maplibregl.MapStyleDataEvent) => void;
+    onidle?: (e: maplibregl.MapLibreEvent) => void;
+    geoSource: "file" | "tiles" | "none";
+    tileSource?: string;
+    geojsonPromoteId?: string;
+    vectorMetricProperty?: string;
+    vectorLayerName?: string;
+    borderColor?: string;
+    labelSourceLayer?: string;
+    externalData?: object;
   } = $props();
 
+  const tileSourceId = "lsoas";
+  const promoteProperty = "LSOA21NM";
+
   let styleLookup = {
     "Carto-light":
       "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
     "Carto-dark":
       "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
   };
-  let style = $derived(styleLookup[styleSheet] ?? styleSheet);
+  let style = $derived(
+    typeof styleSheet == "string"
+      ? (styleLookup[styleSheet] ?? styleSheet)
+      : styleSheet,
+  );
 
   let breakCount = $derived(
     breaksType == "custom" ? customBreaks.length : numberOfBreaks,
@@ -147,13 +219,18 @@
   let filteredGeoJsonData = $derived(filterGeo(geojsonData, year));
 
   let fillColors: string[] = $derived(
-    setCustomPallet == true
-      ? customPallet
+    setCustomPalette == true
+      ? customPalette
       : colorbrewer[colorPalette][breakCount],
   );
 
-  let borderColor = "#003300";
+  let tooFewColors = $derived(fillColors.length < breakCount);
 
+  $effect(() => {
+    if (tooFewColors) {
+      console.warn("Too few colours for the number of breaks");
+    }
+  });
   let map: maplibregl.Map | undefined = $state();
 
   let loaded = $state(false);
@@ -202,7 +279,28 @@
       map?.cooperativeGestures.disable();
     }
 
+    if (interactive) {
+      map?.scrollZoom.enable();
+      map?.boxZoom.enable();
+      map?.dragRotate.enable();
+      map?.dragPan.enable();
+      map?.keyboard.enable();
+      map?.doubleClickZoom.enable();
+      map?.touchZoomRotate.enable();
+    } else {
+      map?.scrollZoom.disable();
+      map?.boxZoom.disable();
+      map?.dragRotate.disable();
+      map?.dragPan.disable();
+      map?.keyboard.disable();
+      map?.doubleClickZoom.disable();
+      map?.touchZoomRotate.disable();
+    }
+
     map?.setMaxBounds(bounds);
+
+    map?.setMaxZoom(maxZoom);
+    map?.setMinZoom(minZoom);
   });
 
   let vals = $derived(
@@ -216,6 +314,16 @@
         ? quantileBreaks(vals, breakCount)
         : customBreaks,
   );
+  let vectorPaintObject = $derived(
+    externalData != null
+      ? createPaintObjectFromMetric(metric, breaks, fillColors, fillOpacity)
+      : createPaintObjectFromMetric(
+          vectorMetricProperty,
+          breaks,
+          fillColors,
+          fillOpacity,
+        ),
+  );
 
   let dataWithColor = $derived(
     filteredMapData.map((d) => {
@@ -226,6 +334,23 @@
     }),
   );
 
+  let legendItems = $derived([
+    ...breaks
+      .map((b, i) => {
+        const from = b;
+        const to = breaks[i + 1];
+        return {
+          color: fillColors[i],
+          label: to ? `${from} – ${to}` : `${from}+`,
+        };
+      })
+      .slice(0, fillColors.length),
+    {
+      color: "lightgrey",
+      label: "No data",
+    },
+  ]);
+
   let merged = $derived(joinData(filteredGeoJsonData, dataWithColor));
 
   let hoveredArea = $state();
@@ -283,24 +408,43 @@
     : zoom;
 
   let bounds = $derived(
-    setMaxBounds ? convertToLngLatBounds(maxBoundsCoords) : undefined,
+    setMaxBounds
+      ? maxBoundsCoords
+        ? convertToLngLatBounds(maxBoundsCoords)
+        : undefined
+      : undefined,
   );
 </script>
 
-<div style="height: {mapHeight}px;">
+<div style="position: relative; height: {mapHeight}px;">
   <MapLibre
     bind:map
     bind:loaded
     {style}
     {center}
     {zoom}
-    {maxZoom}
-    {minZoom}
     standardControls={interactive && standardControls}
     {hash}
     {updateHash}
-    {interactive}
     class="map"
+    {onload}
+    {onidle}
+    {onerror}
+    {onclick}
+    {ondblclick}
+    {onmousemove}
+    {oncontextmenu}
+    {onmovestart}
+    {onmoveend}
+    {onzoomstart}
+    {onzoom}
+    {onzoomend}
+    {onpitch}
+    {onrotate}
+    {onwheel}
+    {ondata}
+    {onstyleload}
+    {onstyledata}
   >
     {#if interactive && !standardControls}
       <NonStandardControls
@@ -329,64 +473,148 @@
           </button>
         </ControlGroup>
       </Control>
+    {:else if !interactive}
+      <ScaleControl position={scaleControlPosition} unit={scaleControlUnit} />
     {/if}
-
-    <GeoJSON id="areas" data={merged} promoteId="areanm">
-      <FillLayer
-        paint={{
-          "fill-color": ["coalesce", ["get", "color"], "lightgrey"],
-          "fill-opacity": changeOpacityOnHover
-            ? hoverStateFilter(fillOpacity, hoverOpacity)
-            : fillOpacity,
-        }}
-        beforeLayerType="symbol"
-        manageHoverState={interactive}
-        onclick={interactive ? (e) => zoomToArea(e) : null}
-        onmousemove={interactive
-          ? (e) => {
-              hoveredArea = e.features[0].id;
-              hoveredAreaData = e.features[0].properties.metric;
-              currentMousePosition = e.event.point;
-            }
-          : null}
-        onmouseleave={interactive
-          ? () => {
-              hoveredArea = null;
-              hoveredAreaData = null;
-            }
-          : null}
-      />
-      {#if showBorder}
-        <LineLayer
-          layout={{ "line-cap": "round", "line-join": "round" }}
+    {#if geoSource == "file"}
+      <GeoJSON id="areas" data={merged} promoteId={geojsonPromoteId}>
+        <FillLayer
+          id="main-fill-layer"
           paint={{
-            "line-color": hoverStateFilter(borderColor, "orange"),
-            "line-width": zoomTransition(3, 0, 12, maxBorderWidth),
+            "fill-color": ["coalesce", ["get", "color"], "lightgrey"],
+            "fill-opacity": changeOpacityOnHover
+              ? hoverStateFilter(fillOpacity, hoverOpacity)
+              : fillOpacity,
           }}
           beforeLayerType="symbol"
+          manageHoverState={interactive}
+          onclick={interactive ? (e) => zoomToArea(e) : undefined}
+          onmousemove={interactive
+            ? (e) => {
+                hoveredArea = e.features[0].id;
+                hoveredAreaData = e.features[0].properties.metric;
+                currentMousePosition = e.event.point;
+              }
+            : undefined}
+          onmouseleave={interactive
+            ? () => {
+                hoveredArea = null;
+                hoveredAreaData = null;
+              }
+            : undefined}
         />
-      {/if}
-    </GeoJSON>
+        {#if showBorder}
+          <LineLayer
+            id="border-layer"
+            layout={{ "line-cap": "round", "line-join": "round" }}
+            paint={{
+              "line-color": hoverStateFilter(borderColor, "orange"),
+              "line-width": zoomTransition(3, 0, 12, maxBorderWidth),
+            }}
+            beforeLayerType="symbol"
+          />
+        {/if}
+      </GeoJSON>
+    {:else if geoSource == "tiles"}
+      <VectorTileSource
+        id={tileSourceId}
+        promoteId={promoteProperty}
+        tiles={[tileSource]}
+      >
+        <FillLayer
+          paint={vectorPaintObject}
+          sourceLayer={vectorLayerName}
+          onclick={interactive ? zoomToArea : undefined}
+          onmousemove={interactive
+            ? (e) => {
+                if (e.features?.[0]) {
+                  hoveredArea = e.features[0].id;
+                  hoveredAreaData =
+                    e.features[0].properties[vectorMetricProperty];
+                  currentMousePosition = e.event.point;
+                }
+              }
+            : undefined}
+          onmouseleave={interactive
+            ? () => {
+                hoveredArea = null;
+                hoveredAreaData = null;
+              }
+            : undefined}
+        />
+        {#if showBorder}
+          <LineLayer
+            layout={{ "line-cap": "round", "line-join": "round" }}
+            paint={{
+              "line-color": hoverStateFilter(borderColor, "orange"),
+              "line-width": zoomTransition(
+                minZoom ?? 3,
+                0,
+                maxZoom ?? 14,
+                maxBorderWidth,
+              ),
+            }}
+            beforeLayerType="symbol"
+            sourceLayer={vectorLayerName}
+          />
+        {/if}
+      </VectorTileSource>
+    {:else}
+      <p>No data</p>
+    {/if}
 
+    <!-- Important note: sourceLayer must match `-l` value from tippecanoe -->
     {#if interactive && tooltip}
       <Tooltip
         {currentMousePosition}
         {hoveredArea}
         {hoveredAreaData}
-        {year}
-        {metric}
+        metric={geoSource == "tiles" ? vectorMetricProperty : metric}
       />
     {/if}
   </MapLibre>
 </div>
+{#if showLegend}
+  <div class="legend">
+    {#each legendItems as item}
+      <div class="legend-item">
+        <div class="legend-color" style="background-color: {item.color};"></div>
+        <span>{item.label}</span>
+      </div>
+    {/each}
+  </div>
+{/if}
 
 <style>
   :global(.maplibregl-ctrl-group button.reset-button) {
     /* margin: 10px; */
     width: -moz-fit-content;
     width: fit-content;
-    padding: 0px 10px;
+    padding: 5px 10px;
     font-size: 16px;
     height: 100%;
   }
+  .legend {
+    position: absolute;
+    bottom: 20px;
+    left: 10px;
+    background: white;
+    padding: 10px;
+    border-radius: 4px;
+    font-size: 12px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+  }
+
+  .legend-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 4px;
+  }
+
+  .legend-color {
+    width: 20px;
+    height: 20px;
+    margin-right: 8px;
+    border: 1px solid #ccc;
+  }
 </style>

package/dist/components/data-vis/map/Map.svelte.d.ts

@@ -1,19 +1,19 @@
-import type { LngLatLike } from "maplibre-gl";
-import type { LngLatBoundsLike } from "maplibre-gl";
+import type { LngLatLike, LngLatBoundsLike } from "maplibre-gl";
 type $$ComponentProps = {
     data: object[];
-    customPallet: object[] | undefined;
+    paintObject?: object;
+    customPalette?: object[];
     cooperativeGestures?: boolean;
     standardControls?: boolean;
     navigationControl?: boolean;
-    navigationControlPosition?: string;
+    navigationControlPosition?: maplibregl.ControlPosition;
     geolocateControl?: boolean;
-    geolocateControlPosition?: string;
+    geolocateControlPosition?: maplibregl.ControlPosition;
     fullscreenControl?: boolean;
-    fullscreenControlPosition?: string;
+    fullscreenControlPosition?: maplibregl.ControlPosition;
     scaleControl?: boolean;
-    scaleControlPosition?: string;
-    scaleControlUnit?: string;
+    scaleControlPosition?: maplibregl.ControlPosition;
+    scaleControlUnit?: "imperial" | "metric" | "nautical";
     styleSheet?: string | URL | object;
     colorPalette?: string;
     showBorder?: boolean;
@@ -26,9 +26,9 @@ type $$ComponentProps = {
     breaksType?: string;
     numberOfBreaks?: number;
     fillOpacity?: number;
-    changeOpacityOnHover: boolean;
+    changeOpacityOnHover?: boolean;
     hoverOpacity?: number;
-    center?: LngLatLike | undefined;
+    center?: LngLatLike;
     zoom?: number;
     minZoom?: number | undefined;
     maxZoom?: number | undefined;
@@ -38,9 +38,36 @@ type $$ComponentProps = {
     updateHash?: (URL: any) => void;
     useInitialHash?: boolean;
     mapHeight?: number;
-    setCustomPallet?: boolean;
+    setCustomPalette?: boolean;
     customBreaks?: number[];
-    interactive: boolean;
+    interactive?: boolean;
+    showLegend: boolean;
+    onload?: (map: maplibregl.Map) => void;
+    onerror?: (error: Partial<ErrorEvent>) => void;
+    onclick?: (e: maplibregl.MapMouseEvent) => void;
+    ondblclick?: (e: maplibregl.MapMouseEvent) => void;
+    onmousemove?: (e: maplibregl.MapMouseEvent) => void;
+    oncontextmenu?: (e: maplibregl.MapMouseEvent) => void;
+    onmovestart?: (e: MapMoveEvent) => void;
+    onmoveend?: (e: MapMoveEvent) => void;
+    onzoomstart?: (e: maplibregl.MapLibreZoomEvent) => void;
+    onzoom?: (e: maplibregl.MapLibreZoomEvent) => void;
+    onzoomend?: (e: maplibregl.MapLibreZoomEvent) => void;
+    onpitch?: (e: maplibregl.MapLibreEvent<MouseEvent | TouchEvent | undefined>) => void;
+    onrotate?: (e: maplibregl.MapLibreEvent<MouseEvent | TouchEvent | undefined>) => void;
+    onwheel?: (e: maplibregl.MapWheelEvent) => void;
+    ondata?: (e: maplibregl.MapDataEvent) => void;
+    onstyleload?: (e: StyleLoadEvent) => void;
+    onstyledata?: (e: maplibregl.MapStyleDataEvent) => void;
+    onidle?: (e: maplibregl.MapLibreEvent) => void;
+    geoSource: "file" | "tiles" | "none";
+    tileSource?: string;
+    geojsonPromoteId?: string;
+    vectorMetricProperty?: string;
+    vectorLayerName?: string;
+    borderColor?: string;
+    labelSourceLayer?: string;
+    externalData?: object;
 };
 declare const Map: import("svelte").Component<$$ComponentProps, {}, "">;
 type Map = ReturnType<typeof Map>;

package/dist/components/data-vis/map/NonStandardControls.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  //@ts-nocheck
   import {
     FullscreenControl,
     GeolocateControl,
@@ -17,6 +16,16 @@
     scaleControl,
     scaleControlPosition = "bottom-left",
     scaleControlUnit = "metric",
+  }: {
+    navigationControl?: boolean;
+    navigationControlPosition?: maplibregl.ControlPosition;
+    geolocateControl?: boolean;
+    geolocateControlPosition?: maplibregl.ControlPosition;
+    fullscreenControl?: boolean;
+    fullscreenControlPosition?: maplibregl.ControlPosition;
+    scaleControl?: boolean;
+    scaleControlPosition?: maplibregl.ControlPosition;
+    scaleControlUnit?: "imperial" | "metric" | "nautical";
   } = $props();
 </script>
 

package/dist/components/data-vis/map/NonStandardControls.svelte.d.ts

@@ -1,13 +1,14 @@
-declare const NonStandardControls: import("svelte").Component<{
-    navigationControl: any;
-    navigationControlPosition?: string;
-    geolocateControl: any;
-    geolocateControlPosition?: string;
-    fullscreenControl: any;
-    fullscreenControlPosition?: string;
-    scaleControl: any;
-    scaleControlPosition?: string;
-    scaleControlUnit?: string;
-}, {}, "">;
+type $$ComponentProps = {
+    navigationControl?: boolean;
+    navigationControlPosition?: maplibregl.ControlPosition;
+    geolocateControl?: boolean;
+    geolocateControlPosition?: maplibregl.ControlPosition;
+    fullscreenControl?: boolean;
+    fullscreenControlPosition?: maplibregl.ControlPosition;
+    scaleControl?: boolean;
+    scaleControlPosition?: maplibregl.ControlPosition;
+    scaleControlUnit?: "imperial" | "metric" | "nautical";
+};
+declare const NonStandardControls: import("svelte").Component<$$ComponentProps, {}, "">;
 type NonStandardControls = ReturnType<typeof NonStandardControls>;
 export default NonStandardControls;

package/dist/components/data-vis/map/Tooltip.svelte

@@ -1,8 +1,8 @@
 <script>
-  let { currentMousePosition, hoveredArea, hoveredAreaData, year, metric } =
-    $props();
+  let { currentMousePosition, hoveredArea, hoveredAreaData, metric } = $props();
   let tooltipHeight = $state();
   let tooltipWidth = $state();
+
   // $inspect(tooltipHeight, tooltipWidth, currentMousePosition);
 </script>
 
@@ -15,8 +15,7 @@
   >
     <p>{hoveredArea}</p>
     <p class="detail">
-      {year}
-      {metric}: {isNaN(hoveredAreaData) ? "No data" : hoveredAreaData}
+      {metric}: {hoveredAreaData ?? "No data"}
     </p>
   </div>
 {/if}

package/dist/components/data-vis/map/Tooltip.svelte.d.ts

@@ -7,13 +7,11 @@ declare const Tooltip: import("svelte").Component<{
     currentMousePosition: any;
     hoveredArea: any;
     hoveredAreaData: any;
-    year: any;
     metric: any;
 }, {}, "">;
 type $$ComponentProps = {
     currentMousePosition: any;
     hoveredArea: any;
     hoveredAreaData: any;
-    year: any;
     metric: any;
 };