diff --git a/package-lock.json b/package-lock.json
index 7d4f68fe0..57fdc2997 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
         "@turf/nearest-point-on-line": "^6.5.0",
         "@types/geojson": "^7946.0.10",
         "maplibre-gl": "^2.4.0",
-        "route-snapper": "^0.1.12",
+        "route-snapper": "^0.1.13",
         "svelte": "^3.54.0"
       },
       "devDependencies": {
@@ -1851,9 +1851,9 @@
       }
     },
     "node_modules/route-snapper": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/route-snapper/-/route-snapper-0.1.12.tgz",
-      "integrity": "sha512-oEmR2JkpxKkJBIVzfO4K1KibiPPxhF1rjyL7Rz5mPoW/tJaWu3AaPiDVzUo+W9ZZz2Hxi1YCAUUakrgxtau4jg=="
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/route-snapper/-/route-snapper-0.1.13.tgz",
+      "integrity": "sha512-GjILba/OSor8gU2LkdAtioxlNdHx8CVTtFcR1QG9XpRIXjINgzv1slnC3nfpQ2yzb8rGvCEHqqHtUFNqDy2dCg=="
     },
     "node_modules/run-parallel": {
       "version": "1.2.0",
diff --git a/package.json b/package.json
index fe12ec6d7..fd4bdd463 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "@turf/nearest-point-on-line": "^6.5.0",
     "@types/geojson": "^7946.0.10",
     "maplibre-gl": "^2.4.0",
-    "route-snapper": "^0.1.12",
+    "route-snapper": "^0.1.13",
     "svelte": "^3.54.0"
   }
 }
diff --git a/src/lib/draw/GeometryMode.svelte b/src/lib/draw/GeometryMode.svelte
index b80f609b9..16757db6b 100644
--- a/src/lib/draw/GeometryMode.svelte
+++ b/src/lib/draw/GeometryMode.svelte
@@ -9,6 +9,7 @@
   import type { Feature, FeatureUnion } from "../../types";
   import PointControls from "./point/PointControls.svelte";
   import PolygonControls from "./polygon/PolygonControls.svelte";
+  import SnapPolygonControls from "./snap_polygon/SnapPolygonControls.svelte";
   import RouteControls from "./route/RouteControls.svelte";
 
   const thisMode = "edit-geometry";
@@ -20,7 +21,12 @@
 
   // An optional ID of what we're currently editing in this mode
   let currentlyEditing: number | null = null;
-  let currentlyEditingControls: "point" | "polygon" | "route" | null = null;
+  let currentlyEditingControls:
+    | "point"
+    | "free-polygon"
+    | "snap-polygon"
+    | "route"
+    | null = null;
 
   export function start() {}
   export function stop() {
@@ -55,7 +61,7 @@
   });
 
   // Handle successful edits
-  routeTool.addEventListenerSuccess((editedRoute) => {
+  routeTool.addEventListenerSuccessRoute((editedRoute) => {
     if (mode == thisMode) {
       gjScheme.update((gj) => {
         let feature = gj.features.find((f) => f.id == currentlyEditing)!;
@@ -73,6 +79,23 @@
       currentlyEditingControls = null;
     }
   });
+  routeTool.addEventListenerSuccessArea((editedArea) => {
+    if (mode == thisMode) {
+      gjScheme.update((gj) => {
+        let feature = gj.features.find((f) => f.id == currentlyEditing)!;
+        // Keep the ID and any properties. Just copy over stuff from routeSnapper.
+        // TODO We're depending on implementation details here and knowing what to copy...
+        feature.properties.waypoints = editedArea.properties.waypoints;
+        delete feature.properties.hide_while_editing;
+        feature.geometry = editedArea.geometry;
+        return gj;
+      });
+
+      // Stay in this mode
+      currentlyEditing = null;
+      currentlyEditingControls = null;
+    }
+  });
   for (let tool of [pointTool, polygonTool]) {
     tool.addEventListenerSuccess((feature) => {
       if (mode == thisMode) {
@@ -159,11 +182,16 @@
     currentlyEditing = id;
 
     if (feature.geometry.type == "LineString") {
-      routeTool.editExisting(feature as Feature<LineString>);
+      routeTool.editExistingRoute(feature as Feature<LineString>);
       currentlyEditingControls = "route";
     } else if (feature.geometry.type == "Polygon") {
-      polygonTool.editExisting(feature as Feature<Polygon>);
-      currentlyEditingControls = "polygon";
+      if (feature.properties.waypoints) {
+        routeTool.editExistingArea(feature as Feature<Polygon>);
+        currentlyEditingControls = "snap-polygon";
+      } else {
+        polygonTool.editExisting(feature as Feature<Polygon>);
+        currentlyEditingControls = "free-polygon";
+      }
     } else if (feature.geometry.type == "Point") {
       // No need to pass in the existing feature.geometry; it's the same as
       // where the cursor is anyway
@@ -176,8 +204,10 @@
 {#if mode == thisMode}
   {#if currentlyEditingControls == "point"}
     <PointControls {pointTool} editingExisting={true} />
-  {:else if currentlyEditingControls == "polygon"}
+  {:else if currentlyEditingControls == "free-polygon"}
     <PolygonControls {polygonTool} />
+  {:else if currentlyEditingControls == "snap-polygon"}
+    <SnapPolygonControls {routeTool} />
   {:else if currentlyEditingControls == "route"}
     <RouteControls {routeTool} />
   {:else}
diff --git a/src/lib/draw/Toolbox.svelte b/src/lib/draw/Toolbox.svelte
index dd784efbd..3810466bd 100644
--- a/src/lib/draw/Toolbox.svelte
+++ b/src/lib/draw/Toolbox.svelte
@@ -11,16 +11,16 @@
   import RouteMode from "./route/RouteMode.svelte";
   import PointMode from "./point/PointMode.svelte";
   import PolygonMode from "./polygon/PolygonMode.svelte";
+  import SnapPolygonMode from "./snap_polygon/SnapPolygonMode.svelte";
   import SplitRouteMode from "./route/SplitRouteMode.svelte";
 
   export let routeUrl: string;
   export let planningMode: boolean;
   // Plumbed up from RouteMode, so we can pass it down to GeometryMode
-  // TODO Reconsider
+  // TODO Create this here too?
   let routeTool: RouteTool;
 
   // Create and manage these here, then pass down to modes as needed.
-  // TODO Teardown too
   let pointTool = new PointTool($map);
   let polygonTool = new PolygonTool($map);
 
@@ -30,6 +30,7 @@
   let routeMode: RouteMode;
   let pointMode: PointMode;
   let polygonMode: PolygonMode;
+  let snapPolygonMode: SnapPolygonMode;
   let splitRouteMode: SplitRouteMode;
 
   // This must be used; don't manually change mode
@@ -39,7 +40,8 @@
       "edit-geometry": geometryMode,
       route: routeMode,
       point: pointMode,
-      polygon: polygonMode,
+      "free-polygon": polygonMode,
+      "snap-polygon": snapPolygonMode,
       "split-route": splitRouteMode,
     };
 
@@ -57,6 +59,7 @@
   onDestroy(() => {
     pointTool?.tearDown();
     polygonTool?.tearDown();
+    routeTool?.tearDown();
   });
 </script>
 
@@ -98,11 +101,26 @@
   <div>
     <button
       type="button"
-      on:click={() => changeMode("polygon")}
-      disabled={mode == "polygon"}>New polygon</button
+      on:click={() => changeMode("free-polygon")}
+      disabled={mode == "free-polygon"}>New polygon (freehand)</button
     >
     <PolygonMode bind:this={polygonMode} {mode} {changeMode} {polygonTool} />
   </div>
+  <div>
+    <button
+      type="button"
+      on:click={() => changeMode("snap-polygon")}
+      disabled={mode == "snap-polygon"}>New polygon (snapped)</button
+    >
+    {#if routeTool}
+      <SnapPolygonMode
+        bind:this={snapPolygonMode}
+        {mode}
+        {changeMode}
+        {routeTool}
+      />
+    {/if}
+  </div>
   <div>
     {#if !planningMode}
       <button
diff --git a/src/lib/draw/polygon/PolygonMode.svelte b/src/lib/draw/polygon/PolygonMode.svelte
index 249571e77..87432e959 100644
--- a/src/lib/draw/polygon/PolygonMode.svelte
+++ b/src/lib/draw/polygon/PolygonMode.svelte
@@ -6,7 +6,7 @@
   import { gjScheme, newFeatureId, formOpen } from "../../../stores";
   import PolygonControls from "./PolygonControls.svelte";
 
-  const thisMode = "polygon";
+  const thisMode = "free-polygon";
 
   export let mode: string;
   export let changeMode: (m: Mode) => void;
diff --git a/src/lib/draw/route/RouteControls.svelte b/src/lib/draw/route/RouteControls.svelte
index abbc35e90..b6b5d4f58 100644
--- a/src/lib/draw/route/RouteControls.svelte
+++ b/src/lib/draw/route/RouteControls.svelte
@@ -6,7 +6,7 @@
 
   // TODO Save this in the route
   let avoidDoublingBack = false;
-  $: routeTool.setConfig({
+  $: routeTool.setRouteConfig({
     avoid_doubling_back: avoidDoublingBack,
   });
 
diff --git a/src/lib/draw/route/RouteMode.svelte b/src/lib/draw/route/RouteMode.svelte
index 2b5faaf42..f800af1ee 100644
--- a/src/lib/draw/route/RouteMode.svelte
+++ b/src/lib/draw/route/RouteMode.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Mode } from "../types";
-  import { onMount, onDestroy } from "svelte";
+  import { onMount } from "svelte";
   import init from "route-snapper";
   import { fetchWithProgress } from "route-snapper/lib.js";
   import { RouteTool } from "./route_tool";
@@ -24,7 +24,7 @@
     // When we enter this mode by clicking the button from edit-geometry, we
     // call routeTool.stop(). Re-activate it if so.
     if (!routeTool.isActive()) {
-      routeTool.start();
+      routeTool.startRoute();
     }
   }
   export function stop() {
@@ -49,7 +49,7 @@
         changeMode("edit-attribute");
       }
     });
-    routeTool.addEventListenerSuccess((feature) => {
+    routeTool.addEventListenerSuccessRoute((feature) => {
       if (mode == thisMode) {
         gjScheme.update((gj) => {
           feature.id = newFeatureId(gj);
@@ -63,10 +63,6 @@
       }
     });
   });
-
-  onDestroy(() => {
-    routeTool?.tearDown();
-  });
 </script>
 
 {#if !routeTool}
diff --git a/src/lib/draw/route/route_tool.ts b/src/lib/draw/route/route_tool.ts
index 434ed57b1..6d80984b6 100644
--- a/src/lib/draw/route/route_tool.ts
+++ b/src/lib/draw/route/route_tool.ts
@@ -1,14 +1,16 @@
 import { JsRouteSnapper } from "route-snapper";
 import type { Map, GeoJSONSource, MapMouseEvent } from "maplibre-gl";
-import type { LineString } from "geojson";
+import type { Feature, LineString, Polygon } from "geojson";
 import {
   emptyGeojson,
   isPoint,
   isLine,
+  isPolygon,
   overwriteSource,
   overwriteLayer,
   drawCircle,
   drawLine,
+  drawPolygon,
   type FeatureWithProps,
 } from "../../../maplibre_helpers";
 import { EventManager } from "../events";
@@ -22,7 +24,8 @@ export class RouteTool {
   map: Map;
   inner: JsRouteSnapper;
   active: boolean;
-  eventListenersSuccess: ((f: FeatureWithProps<LineString>) => void)[];
+  eventListenersSuccessRoute: ((f: FeatureWithProps<LineString>) => void)[];
+  eventListenersSuccessArea: ((f: FeatureWithProps<Polygon>) => void)[];
   eventListenersFailure: (() => void)[];
 
   events: EventManager;
@@ -33,7 +36,8 @@ export class RouteTool {
     this.inner = new JsRouteSnapper(graphBytes);
     console.timeEnd("Deserialize and setup JsRouteSnapper");
     this.active = false;
-    this.eventListenersSuccess = [];
+    this.eventListenersSuccessRoute = [];
+    this.eventListenersSuccessArea = [];
     this.eventListenersFailure = [];
 
     // Rendering
@@ -72,6 +76,12 @@ export class RouteTool {
       filter: isLine,
       ...drawLine("black", 2.5),
     });
+    overwriteLayer(map, {
+      id: "route-polygons",
+      source,
+      filter: isPolygon,
+      ...drawPolygon("black", 0.5),
+    });
 
     // Set up interactions
     this.events = new EventManager(this, map);
@@ -161,13 +171,27 @@ export class RouteTool {
   }
 
   // Activate the tool with blank state.
-  start() {
+  startRoute() {
+    // If we were already active, don't do anything
+    // TODO Or... error? Why'd this happen?
+    if (this.active) {
+      return;
+    }
+
+    this.active = true;
+    // Otherwise, shift+click breaks
+    this.map["boxZoom"].disable();
+  }
+
+  // Activate the tool with blank state.
+  startArea() {
     // If we were already active, don't do anything
     // TODO Or... error? Why'd this happen?
     if (this.active) {
       return;
     }
 
+    this.inner.setConfig({ avoid_doubling_back: true, area_mode: true });
     this.active = true;
     // Otherwise, shift+click breaks
     this.map["boxZoom"].disable();
@@ -185,9 +209,9 @@ export class RouteTool {
   // properties returned originally. If waypoints are missing (maybe because
   // the route was produced by a different tool, or an older version of this
   // tool), the edited line-string may differ from the input.
-  editExisting(feature: FeatureWithProps<LineString>) {
+  editExistingRoute(feature: FeatureWithProps<LineString>) {
     if (this.active) {
-      window.alert("Bug: editExisting called when tool is already active");
+      window.alert("Bug: editExistingRoute called when tool is already active");
     }
 
     if (!feature.properties.waypoints) {
@@ -211,7 +235,24 @@ export class RouteTool {
       ];
     }
 
-    this.start();
+    this.startRoute();
+    this.inner.editExisting(feature.properties.waypoints);
+    this.redraw();
+  }
+
+  // This only handles features previously returned by this tool.
+  editExistingArea(feature: FeatureWithProps<Polygon>) {
+    if (this.active) {
+      window.alert("Bug: editExistingArea called when tool is already active");
+    }
+
+    if (!feature.properties.waypoints) {
+      window.alert(
+        "Bug: editExistingArea called for a polygon not produced by the route-snapper"
+      );
+    }
+
+    this.startArea();
     this.inner.editExisting(feature.properties.waypoints);
     this.redraw();
   }
@@ -221,12 +262,20 @@ export class RouteTool {
     // TODO Will these throw if they're not there?
     this.map.removeLayer("route-points");
     this.map.removeLayer("route-lines");
+    this.map.removeLayer("route-polygons");
     this.map.removeSource("route-snapper");
     this.events.tearDown();
   }
 
-  addEventListenerSuccess(callback: (f: FeatureWithProps<LineString>) => void) {
-    this.eventListenersSuccess.push(callback);
+  addEventListenerSuccessRoute(
+    callback: (f: FeatureWithProps<LineString>) => void
+  ) {
+    this.eventListenersSuccessRoute.push(callback);
+  }
+  addEventListenerSuccessArea(
+    callback: (f: FeatureWithProps<Polygon>) => void
+  ) {
+    this.eventListenersSuccessArea.push(callback);
   }
   addEventListenerFailure(callback: () => void) {
     this.eventListenersFailure.push(callback);
@@ -240,8 +289,18 @@ export class RouteTool {
   finish() {
     let rawJSON = this.inner.toFinalFeature();
     if (rawJSON) {
-      for (let cb of this.eventListenersSuccess) {
-        cb(JSON.parse(rawJSON) as FeatureWithProps<LineString>);
+      // Parse once just to check geometry type. But keep parsing the string
+      // for each callback, to copy and make sure different callbacks
+      // don't have the same reference
+      let f = JSON.parse(rawJSON) as Feature;
+      if (f.geometry.type == "LineString") {
+        for (let cb of this.eventListenersSuccessRoute) {
+          cb(JSON.parse(rawJSON) as FeatureWithProps<LineString>);
+        }
+      } else {
+        for (let cb of this.eventListenersSuccessArea) {
+          cb(JSON.parse(rawJSON) as FeatureWithProps<Polygon>);
+        }
       }
     } else {
       for (let cb of this.eventListenersFailure) {
@@ -257,8 +316,8 @@ export class RouteTool {
     this.finish();
   }
 
-  setConfig(config: { avoid_doubling_back: boolean }) {
-    this.inner.setConfig(config);
+  setRouteConfig(config: { avoid_doubling_back: boolean }) {
+    this.inner.setConfig({ ...config, area_mode: false });
     this.redraw();
   }
 
diff --git a/src/lib/draw/snap_polygon/SnapPolygonControls.svelte b/src/lib/draw/snap_polygon/SnapPolygonControls.svelte
new file mode 100644
index 000000000..19de0e4f0
--- /dev/null
+++ b/src/lib/draw/snap_polygon/SnapPolygonControls.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { RouteTool } from "../route/route_tool";
+  import KeyHandler from "../KeyHandler.svelte";
+
+  export let routeTool: RouteTool;
+
+  // TODO Disable finish when the route is invalid
+</script>
+
+<ul>
+  <li>
+    <b>Click</b> green points on the transport network to create snapped routes
+  </li>
+  <li><b>Click and drag</b> any point to move it</li>
+  <li><b>Click</b> a red waypoint to delete it</li>
+  <li>Press <b>Enter</b> to finish area</li>
+  <li>Press <b>Escape</b> to cancel</li>
+</ul>
+
+<div style="display: flex; justify-content: space-between">
+  <button type="button" on:click={() => routeTool.finish()}>Finish</button>
+  <button type="button" on:click={() => routeTool.cancel()}>Cancel</button>
+</div>
+<KeyHandler tool={routeTool} />
diff --git a/src/lib/draw/snap_polygon/SnapPolygonMode.svelte b/src/lib/draw/snap_polygon/SnapPolygonMode.svelte
new file mode 100644
index 000000000..17226104c
--- /dev/null
+++ b/src/lib/draw/snap_polygon/SnapPolygonMode.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { Mode } from "../types";
+  import type { Polygon } from "geojson";
+  import type { Feature } from "../../../types";
+  import type { RouteTool } from "../route/route_tool";
+  import { gjScheme, newFeatureId, formOpen } from "../../../stores";
+  import SnapPolygonControls from "./SnapPolygonControls.svelte";
+
+  const thisMode = "snap-polygon";
+
+  export let mode: string;
+  export let changeMode: (m: Mode) => void;
+  export let routeTool: RouteTool;
+
+  export function start() {
+    routeTool.startArea();
+  }
+  export function stop() {
+    routeTool.stop();
+  }
+
+  routeTool.addEventListenerSuccessArea((feature) => {
+    if (mode == thisMode) {
+      gjScheme.update((gj) => {
+        feature.id = newFeatureId(gj);
+        feature.properties.intervention_type = "area";
+        gj.features.push(feature as Feature<Polygon>);
+        return gj;
+      });
+
+      changeMode("edit-attribute");
+      formOpen.set(feature.id as number);
+    }
+  });
+  routeTool.addEventListenerFailure(() => {
+    if (mode == thisMode) {
+      changeMode("edit-attribute");
+    }
+  });
+</script>
+
+{#if mode == thisMode}
+  <SnapPolygonControls {routeTool} />
+{/if}
diff --git a/src/lib/draw/types.ts b/src/lib/draw/types.ts
index 57b6403fd..648816854 100644
--- a/src/lib/draw/types.ts
+++ b/src/lib/draw/types.ts
@@ -3,5 +3,6 @@ export type Mode =
   | "edit-geometry"
   | "route"
   | "point"
-  | "polygon"
+  | "free-polygon"
+  | "snap-polygon"
   | "split-route";