diff --git a/package-lock.json b/package-lock.json
index 7bdae019ab..a378edd6f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5574,7 +5574,7 @@
     },
     "node_modules/scheme-sketcher-lib": {
       "version": "0.0.1",
-      "resolved": "git+ssh://git@github.com/acteng/scheme-sketcher-lib.git#c8754a8d97ac396435db680b5c9ab3e47a6e7ec9",
+      "resolved": "git+ssh://git@github.com/acteng/scheme-sketcher-lib.git#f283f7f41465ca7bb394b9c5c946c10b331b96b3",
       "dependencies": {
         "@maptiler/geocoding-control": "^1.3.1",
         "@turf/mask": "^7.0.0",
diff --git a/src/routes/route_check/route_map/+page.svelte b/src/routes/route_check/route_map/+page.svelte
index 16b043873b..45bc39a811 100644
--- a/src/routes/route_check/route_map/+page.svelte
+++ b/src/routes/route_check/route_map/+page.svelte
@@ -1,13 +1,30 @@
 <script lang="ts">
-  import { DecimalInput } from "govuk-svelte";
+  import { SecondaryButton, DecimalInput } from "govuk-svelte";
   import { state } from "../data";
   import turfLength from "@turf/length";
   import { GeoJSON, LineLayer } from "svelte-maplibre";
   import type { Map } from "maplibre-gl";
-  import type { FeatureCollection, Feature, Polygon } from "geojson";
-  import DrawRoute from "./DrawRoute.svelte";
-  import { bbox, MapLibreMap } from "$lib/map";
-  import { RouteSnapperLayer } from "scheme-sketcher-lib/draw/route";
+  import { bbox, Basemap, MapLibreMap } from "$lib/map";
+  import { loadAuthorities, getBestMatch } from "./match_area";
+  import { writable } from "svelte/store";
+  import type {
+    FeatureCollection,
+    LineString,
+    Feature,
+    Polygon,
+  } from "geojson";
+  import { BoundaryLayer } from "scheme-sketcher-lib/draw";
+  import {
+    RouteControls,
+    RouteSnapperLayer,
+    RouteSnapperLoader,
+  } from "scheme-sketcher-lib/draw/route";
+  import { routeTool } from "scheme-sketcher-lib/draw/stores";
+  import { onMount } from "svelte";
+
+  onMount(async () => {
+    await loadAuthorities();
+  });
 
   let cfg = {
     layerZorder: [
@@ -23,6 +40,9 @@
       "road_label",
       // Zoomstack
       "Road labels",
+
+      // Draw the inverted boundary fade on top of basemap labels
+      "boundary",
     ],
   };
 
@@ -31,6 +51,13 @@
   let drawingRoute = false;
   let routeAuthority: Feature<Polygon, { name: string; level: string }> | null =
     null;
+  let url = "";
+
+  function getRouteSnapper() {
+    routeAuthority = getBestMatch(map);
+    let authority = `${routeAuthority.properties.level}_${routeAuthority.properties.name}`;
+    url = `https://atip.uk/route-snappers/v3/${authority}.bin.gz`;
+  }
 
   function initiallyZoom(map: Map) {
     if (!map || $state.summary.networkMap.features.length == 0) {
@@ -43,7 +70,6 @@
   }
   $: initiallyZoom(map);
 
-  $: lengthHint = getLengthHint($state.summary.networkMap);
   function getLengthHint(gj: FeatureCollection): number | null {
     let sum = 0;
     for (let f of gj.features) {
@@ -53,6 +79,29 @@
     }
     return sum > 0 ? sum : null;
   }
+  $: lengthHint = getLengthHint($state.summary.networkMap);
+
+  function startDrawing(edit: boolean) {
+    let copy = JSON.parse(JSON.stringify($state.summary.networkMap));
+    $state.summary.networkMap.features = [];
+    drawingRoute = true;
+
+    $routeTool!.addEventListenerSuccess((feature) => {
+      $state.summary.networkMap.features = [feature as Feature<LineString>];
+      drawingRoute = false;
+      $routeTool!.clearEventListeners();
+    });
+    $routeTool!.addEventListenerFailure(() => {
+      drawingRoute = false;
+      $routeTool!.clearEventListeners();
+    });
+
+    if (edit) {
+      $routeTool!.editExistingRoute(copy.features[0]);
+    } else {
+      $routeTool!.startRoute();
+    }
+  }
 </script>
 
 <div style="display: flex; height: 80vh">
@@ -60,43 +109,77 @@
     style="width: 30%; overflow-y: scroll; padding: 10px; border: 1px solid black;"
   >
     {#if map}
-      <DrawRoute
-        {map}
-        bind:routeGj={$state.summary.networkMap}
-        bind:routeAuthority
-        bind:drawingRoute
-      />
-    {/if}
+      {#key url}
+        {#if url}
+          <RouteSnapperLoader {map} {url} />
+        {/if}
+      {/key}
 
-    {#if lengthHint}
-      <p>
-        LineStrings in the Network Map cover a total of <b>
-          {lengthHint.toFixed(2)}
-        </b>
-        kilometers. Depending what that map represents, you can use this value directly,
-        or hover on a piece of route on the map to see its individual length.
-      </p>
-    {/if}
+      {#if drawingRoute}
+        <RouteControls
+          maptilerApiKey={import.meta.env.VITE_MAPTILER_API_KEY}
+          extendRoute={false}
+        />
+      {:else}
+        <div>
+          <SecondaryButton on:click={getRouteSnapper}>
+            Set up drawing for the area shown on the map
+          </SecondaryButton>
+        </div>
+
+        {#if routeAuthority}
+          <p>
+            Currently drawing a route in {routeAuthority.properties.name} ({routeAuthority
+              .properties.level}))
+          </p>
+        {/if}
+
+        <hr />
 
-    <DecimalInput
-      label="Route length assessed here (km)"
-      bind:value={$state.summary.assessedRouteLengthKm}
-      width={6}
-      min={0}
-    />
-    <DecimalInput
-      label="Total route length (km)"
-      bind:value={$state.summary.totalRouteLengthKm}
-      width={6}
-      min={0}
-    />
+        {#if $routeTool}
+          <div>
+            <SecondaryButton on:click={() => startDrawing(false)}>
+              Draw a new route
+            </SecondaryButton>
+            <SecondaryButton
+              on:click={() => startDrawing(true)}
+              disabled={$state.summary.networkMap.features.length == 0}
+            >
+              Edit this route
+            </SecondaryButton>
+          </div>
+        {/if}
+
+        {#if lengthHint}
+          <p>
+            LineStrings in the Network Map cover a total of <b>
+              {lengthHint.toFixed(2)}
+            </b>
+            kilometers
+          </p>
+        {/if}
+
+        <DecimalInput
+          label="Route length assessed here (km)"
+          bind:value={$state.summary.assessedRouteLengthKm}
+          width={6}
+          min={0}
+        />
+        <DecimalInput
+          label="Total route length (km)"
+          bind:value={$state.summary.totalRouteLengthKm}
+          width={6}
+          min={0}
+        />
+
+        <Basemap />
+      {/if}
+    {/if}
   </div>
   <div style="position: relative; width: 70%;">
     <MapLibreMap bind:map>
       {#if routeAuthority}
-        <GeoJSON data={routeAuthority}>
-          <LineLayer paint={{ "line-color": "black", "line-width": 5 }} />
-        </GeoJSON>
+        <BoundaryLayer {cfg} boundaryGeojson={routeAuthority} />
       {/if}
 
       <GeoJSON data={$state.summary.networkMap}>
diff --git a/src/routes/route_check/route_map/DrawRoute.svelte b/src/routes/route_check/route_map/DrawRoute.svelte
deleted file mode 100644
index d69baede1d..0000000000
--- a/src/routes/route_check/route_map/DrawRoute.svelte
+++ /dev/null
@@ -1,104 +0,0 @@
-<script lang="ts">
-  import { loadAuthorities, getBestMatch } from "./match_area";
-  import { writable, type Writable } from "svelte/store";
-  import type {
-    FeatureCollection,
-    LineString,
-    Feature,
-    Polygon,
-  } from "geojson";
-  import {
-    RouteControls,
-    RouteSnapperLoader,
-  } from "scheme-sketcher-lib/draw/route";
-  import { routeTool } from "scheme-sketcher-lib/draw/stores";
-  import { onMount } from "svelte";
-  import { type Map } from "svelte-maplibre";
-  import { SecondaryButton } from "govuk-svelte";
-
-  onMount(async () => {
-    await loadAuthorities();
-  });
-
-  export let map: Map;
-  export let routeGj: FeatureCollection<LineString>;
-  export let routeAuthority: Feature<
-    Polygon,
-    { name: string; level: string }
-  > | null;
-  export let drawingRoute = false;
-
-  let url = "";
-
-  function getRouteSnapper() {
-    routeAuthority = getBestMatch(map);
-    let authority = `${routeAuthority.properties.level}_${routeAuthority.properties.name}`;
-    url = `https://atip.uk/route-snappers/v3/${authority}.bin.gz`;
-  }
-
-  function startDrawing(edit: boolean) {
-    let copy = JSON.parse(JSON.stringify(routeGj));
-    routeGj.features = [];
-    drawingRoute = true;
-
-    $routeTool!.addEventListenerSuccess((feature) => {
-      routeGj.features = [feature as Feature<LineString>];
-      drawingRoute = false;
-      $routeTool!.clearEventListeners();
-    });
-    $routeTool!.addEventListenerFailure(() => {
-      drawingRoute = false;
-      $routeTool!.clearEventListeners();
-    });
-
-    if (edit) {
-      $routeTool!.editExistingRoute(copy.features[0]);
-    } else {
-      $routeTool!.startRoute();
-    }
-  }
-</script>
-
-{#if routeAuthority}
-  <p>
-    Currently drawing a route in {routeAuthority.properties.name} ({routeAuthority
-      .properties.level}))
-  </p>
-{/if}
-
-{#key url}
-  {#if url}
-    <RouteSnapperLoader {map} {url} />
-  {/if}
-{/key}
-
-<div>
-  <SecondaryButton on:click={getRouteSnapper}>
-    Get route snapper
-  </SecondaryButton>
-</div>
-
-<hr />
-
-<div>
-  <SecondaryButton
-    on:click={() => startDrawing(false)}
-    disabled={drawingRoute || $routeTool == null}
-  >
-    Draw a route
-  </SecondaryButton>
-  <SecondaryButton
-    on:click={() => startDrawing(true)}
-    disabled={drawingRoute ||
-      $routeTool == null ||
-      routeGj.features.length == 0}
-  >
-    Edit this route
-  </SecondaryButton>
-</div>
-{#if drawingRoute && $routeTool}
-  <RouteControls
-    maptilerApiKey={import.meta.env.VITE_MAPTILER_API_KEY}
-    extendRoute
-  />
-{/if}
diff --git a/src/routes/route_check/route_map/MapEntry.svelte b/src/routes/route_check/route_map/MapEntry.svelte
deleted file mode 100644
index e69de29bb2..0000000000