Merge pull request #148 from communitiesuk/vector-map-source

Vector map source

Author: ajhillman-ddj

docs/TilesMaking.md

@@ -0,0 +1,41 @@
+# Introduction
+
+This will guide on how to turn geojson to pdf tiles which can be used with the map conpomenet. These instrutions are for Mac OS
+
+# Steps
+
+1. Get valid geojson. It should looks something like this
+
+```json
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": { "name": "Sample Point" },
+      "geometry": {
+        "type": "Point",
+        "coordinates": [-0.1257, 51.5085]
+      }
+    }
+  ]
+}
+```
+
+At this stage geographic dataa can be added so it can be visulised without need futher external jsons. Hoever if you
+
+2. Convert Geojson to .mbTiles
+
+Install home brew
+
+Install tippe cannoe
+
+run tippe cannoe
+
+3. Convert .mbTiles to .pbf
+
+install mbtiles
+
+```python
+pip install mbtiles
+```

docs/TilesServer.md

@@ -0,0 +1,46 @@
+# Tile server
+
+Set up tile-server to serve the tiles locally
+
+Make a server.cjs file that looks like this:
+
+```javascript
+const express = require("express");
+const path = require("path");
+const fs = require("fs");
+const mime = require("mime-types");
+const cors = require("cors");
+
+const app = express();
+const PORT = 8080;
+const TILE_DIR = path.join(__dirname, "tiles-with-imd-data"); // your z/x/y.pbf folder
+
+app.use(cors()); // Enables CORS for all routes
+
+// Set correct headers for .pbf files
+app.get("/:z/:x/:y.pbf", (req, res) => {
+  const { z, x, y } = req.params;
+  const tilePath = path.join(TILE_DIR, z, x, `${y}.pbf`);
+
+  if (!fs.existsSync(tilePath)) {
+    return res.status(404).send("Tile not found");
+  }
+  res.setHeader("Access-Control-Allow-Origin", "*");
+  res.setHeader("Content-Type", "application/x-protobuf");
+  res.setHeader("Content-Encoding", "gzip");
+
+  fs.createReadStream(tilePath).pipe(res);
+});
+
+// Optional: serve an index or static frontend here
+
+app.listen(PORT, () => {
+  console.log(`Tile server running at http://localhost:${PORT}/`);
+});
+```
+
+Then from the terminal run:
+
+```console
+node server.cjs
+```

package-lock.json

@@ -118,6 +118,7 @@
     "sveaflet": "^0.1.4",
     "svelte-maplibre": "^1.0.0-next.12",
     "svelte-preprocess": "^6.0.3",
+    "tileserver-gl": "^5.3.1",
     "topojson-client": "^3.1.0"
   }
 }

package.json

@@ -2,6 +2,7 @@
   import {
     MapLibre,
     GeoJSON,
+    VectorTileSource,
     FillLayer,
     LineLayer,
     zoomTransition,
@@ -23,6 +24,8 @@
     filterGeo,
     jenksBreaks,
     quantileBreaks,
+    createPaintObjectFromMetric,
+    extractVectorMetricValues,
   } from "./mapUtils.js";
   import NonStandardControls from "./NonStandardControls.svelte";
   import { replaceState } from "$app/navigation";
@@ -65,8 +68,8 @@
     hoverOpacity = 0.8,
     center = [-2.5, 53],
     zoom = 5,
-    minZoom = undefined,
-    maxZoom = undefined,
+    minZoom = 6,
+    maxZoom = 14,
     maxBoundsCoords = [
       [-10, 49],
       [5, 60],
@@ -96,8 +99,17 @@
     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,
   }: {
     data: object[];
+    paintObject?: object;
     customPalette?: object[];
     cooperativeGestures?: boolean;
     standardControls?: boolean;
@@ -159,8 +171,19 @@
     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",
@@ -199,8 +222,13 @@
       : 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);
@@ -245,10 +273,8 @@
 
     if (cooperativeGestures) {
       map?.cooperativeGestures.enable();
-      $inspect(cooperativeGestures);
     } else {
       map?.cooperativeGestures.disable();
-      $inspect(cooperativeGestures);
     }
 
     if (interactive) {
@@ -270,6 +296,9 @@
     }
 
     map?.setMaxBounds(bounds);
+
+    map?.setMaxZoom(maxZoom);
+    map?.setMinZoom(minZoom);
   });
 
   let vals = $derived(
@@ -283,6 +312,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) => {
@@ -382,8 +421,6 @@
     {style}
     {center}
     {zoom}
-    {maxZoom}
-    {minZoom}
     standardControls={interactive && standardControls}
     {hash}
     {updateHash}
@@ -437,51 +474,100 @@
     {: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) : 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 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 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}
-    </GeoJSON>
+        {#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>

src/lib/components/data-vis/map/Map.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}