terra-draw-route-snap-mode 0.0.1

package/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

package/CNAME

@@ -0,0 +1 @@
+terradraw.io

package/LICENSE.txt

@@ -0,0 +1,8 @@
+The MIT License (MIT)
+Copyright © 2025 James Milner
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,66 @@
+# Terra Draw Route Snapping Mode
+
+
+This repository is for the `TerraDrawRouteSnappingMode` module. `TerraDrawRouteSnappingMode` is designed to help with the scenario where you want to be able to create a multi-stop route on a map, snapping the route against a predefined route network. This is achieved by client side routing on a FeatureCollection<LineString> where the LineStrings have identical coordinates.
+
+## Install
+
+```shell
+npm install terra-draw-route-snap-mode
+```
+
+## Usage
+
+We can import `TerraDrawRouteSnapMode` in this way:
+
+```typescript
+import { TerraDrawRouteSnapMode } from terra-draw-route-snap-mode
+```
+
+We can construct `TerraDrawRouteSnapMode` like so:
+
+```typescript
+  new TerraDrawRouteSnapMode({
+    routing,
+    maxPoints: 5,
+    styles: {
+        lineStringColor: '#990000',
+        routePointColor: '#990000'
+    }
+    }),
+```
+
+Where routing is of type:
+
+```typescript
+ export interface RoutingInterface {
+    getRoute: (startCoord: Position, endCoord: Position) => Feature<LineString> | null;
+    getClosestNetworkCoordinate: (coordinate: Position) => Position | null;
+}
+```
+
+You could construct the `routing` like so:
+
+```typescript
+import { Routing } from "../../../src/terra-draw-route-snap-mode";
+import { FeatureCollection, LineString } from "geojson";
+import { TerraRoute, createCheapRuler } from 'terra-route';
+
+// Initialise the TerraRoute instance with the default distance
+const terraRoute = new TerraRoute()
+
+// Construct the route network ready to call `getRoute` on terraRoute later in the TerraDrawRouteSnapMode instance
+terraRoute.buildRouteGraph(network)
+
+const terraRouting = new Routing({
+    network,
+    useCache: true,
+    routeFinder: terraRoute
+})
+```
+
+If you want to see the faster CheapRuler implementation from the `terra-route` package, please see the demo folder in the `setup-routing.ts` file for an examples. CheapRuler is a reasonable distance metric to use for network graphs of less than 500km size that are not located on or near the poles.
+
+## License
+
+MIT

package/demo/components/app.tsx

@@ -0,0 +1,18 @@
+import { h } from "preact";
+// import { Route, Router, CustomHistory } from "preact-router";
+// import { createHashHistory } from "history";
+import Header from "./header/Header";
+
+// Code-splitting is automated for `routes` directory
+import Home from "../routes/home";
+
+console.log('App.tsx');
+
+const App = () => (
+  <div id="app">
+    <Header />
+    <Home />
+  </div>
+);
+
+export default App;

package/demo/components/geojson-tab/GeoJSONTab.tsx

@@ -0,0 +1,42 @@
+import { h } from "preact";
+import style from "./style.module.css";
+import { useMemo } from "preact/hooks";
+import { GeoJSONStoreFeatures } from "../../node_modules/terra-draw/dist/store/store";
+import { useDownloadJSON } from "./useDownloadJSON";
+import { fileDate } from "../../utils/dates";
+
+const GeoJSONTab = ({ features }: { features: GeoJSONStoreFeatures[] }) => {
+  // Create a FeatureCollection when features changes
+  const featureCollection = useMemo(
+    () => ({
+      type: "FeatureCollection",
+      features,
+    }),
+    [features]
+  );
+
+  // Turn it into a string so it can be rendered,
+  // again only when features change
+  const featureCollectionString = useMemo(() => {
+    return JSON.stringify(featureCollection, null, 4);
+  }, [featureCollection]);
+
+  const downloadJSON = useDownloadJSON();
+
+  // Download to a file called terradraw.geojson
+  const downloadGeoJSON = () =>
+    downloadJSON(featureCollection, `terradraw_${fileDate()}.geojson`);
+
+  return (
+    <div class={style.container}>
+      <textarea class={style.geojson} readonly>
+        {featureCollectionString}
+      </textarea>
+      <button class={style.download} onClick={downloadGeoJSON}>
+        Download GeoJSON
+      </button>
+    </div>
+  );
+};
+
+export default GeoJSONTab;

package/demo/components/geojson-tab/style.module.css

@@ -0,0 +1,30 @@
+.geojson {
+  resize: none;
+  width: 100%;
+  flex-grow: 1;
+  height: calc(100vh - 193px);
+  /** accomidate the 3px margin top for the download button **/
+}
+
+.container {
+  padding: 20px;
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+}
+
+.download {
+  padding: 10px;
+  font-weight: bold;
+  background: #00d088;
+  color: white;
+  border: 0;
+  border: 2px solid rgba(0, 0, 0, 0.2);
+  margin-top: 3px;
+}
+
+.download:hover {
+  background: #00d088c4;
+  border: 2px solid rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+}

package/demo/components/geojson-tab/useDownloadJSON.ts

@@ -0,0 +1,34 @@
+import { useCallback } from "preact/hooks";
+
+export function useDownloadJSON() {
+  const downloadJSON = useCallback(
+    (json: Record<string, any>, filename: string) => {
+      // Turn the JSON object into a string
+      const data = JSON.stringify(json, null, 4);
+
+      // Pass the string to a Blob and turn it
+      // into an ObjectURL
+      const blob = new Blob([data], { type: "text/plain" });
+      const jsonObjectUrl = URL.createObjectURL(blob);
+
+      // Create an anchor element, set it's
+      // href to be the Object URL we have created
+      // and set the download property to be the file name
+      // we want to set
+      const anchorEl = document.createElement("a");
+      anchorEl.href = jsonObjectUrl;
+      anchorEl.download = filename;
+
+      // There is no need to actually attach the DOM
+      // element but we do need to click on it
+      anchorEl.click();
+
+      // We don't want to keep a reference to the file
+      // any longer so we release it manually
+      URL.revokeObjectURL(jsonObjectUrl);
+    },
+    []
+  );
+
+  return downloadJSON;
+}

package/demo/components/header/Header.tsx

@@ -0,0 +1,25 @@
+import { h } from "preact";
+import { Link } from "preact-router/match";
+import style from "./style.module.css";
+import logo from "../../assets/imgs/logo.png";
+import github from "../../assets/imgs/github.png";
+
+const Header = () => (
+  <header class={style.header}>
+    <div class={style.nav}>
+      <img class={style.logo} src={logo} />
+      <nav>
+        <Link activeClassName={style.active} href="/">
+          Home
+        </Link>
+      </nav>
+    </div>
+    <div class={style.github}>
+      <a href="https://www.github.com/JamesLMilner/terra-draw">
+        <img src={github} />
+      </a>
+    </div>
+  </header>
+);
+
+export default Header;

package/demo/components/header/style.module.css

@@ -0,0 +1,78 @@
+.header {
+  width: 100%;
+  height: 70px;
+  padding: 0;
+  background: #fdfdfd;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+  z-index: 50;
+  display: flex;
+  color: #565656;
+  display: flex;
+  justify-content: space-between;
+}
+
+.header .nav {
+  width: 100%;
+  display: flex;
+}
+
+.github {
+  display: flex;
+  justify-items: center;
+  align-items: center;
+  margin-right: 20px;
+}
+
+.logo {
+  height: 35px;
+  display: flex;
+  align-self: center;
+  padding-left: 20px;
+}
+
+.header h1 {
+  float: left;
+  margin: 0;
+  padding: 0 15px;
+  font-size: 24px;
+  line-height: 70px;
+  font-weight: 400;
+  color: #fdfdfd;
+}
+
+.header nav {
+  font-size: 100%;
+  margin-left: 20px;
+}
+
+.header nav a {
+  display: inline-block;
+  height: 70px;
+  line-height: 70px;
+  padding: 0 15px;
+  min-width: 50px;
+  text-align: center;
+  background: fdfdfd;
+  text-decoration: none;
+  color: #565656;
+  will-change: background-color;
+}
+
+.header nav a:hover,
+.header nav a:active {
+  border-bottom: solid 5px #00d088;
+}
+
+.header nav a.active {
+  border-bottom: solid 5px #00d088;
+}
+
+@media screen and (max-width: 500px) {
+  .logo {
+    display: none;
+  }
+
+  .header nav {
+    margin-left: 0px;
+  }
+}

package/demo/components/info-tab/InfoTab.tsx

@@ -0,0 +1,101 @@
+import { h } from "preact";
+import style from "./style.module.css";
+import { getHHMMSS } from "../../utils/dates";
+import { area, length } from "../../utils/geo";
+import { useMemo } from "preact/hooks";
+import { GeoJSONStoreFeatures } from "../../node_modules/terra-draw/dist/store/store";
+
+const InfoTab = ({
+  selected,
+  features,
+}: {
+  selected: undefined | GeoJSONStoreFeatures;
+  features: GeoJSONStoreFeatures[];
+}) => {
+  const { points, lines, polygons } = useMemo(() => {
+    const points: GeoJSONStoreFeatures[] = [];
+    const lines: GeoJSONStoreFeatures[] = [];
+    const polygons: GeoJSONStoreFeatures[] = [];
+    features.forEach((f) => {
+      if (f.geometry.type === "Point") {
+        points.push(f);
+      }
+      if (f.geometry.type === "LineString") {
+        lines.push(f);
+      }
+      if (f.geometry.type === "Polygon") {
+        polygons.push(f);
+      }
+    });
+
+    return { points, lines, polygons };
+  }, [features]);
+
+  return (
+    <div class={style.container}>
+      <div class={style.all}>
+        <h3 class={style.header}> All Features </h3>
+        <span class={style.row}>
+          <span class={style.type}>Total</span> {features.length}
+        </span>
+        <span class={style.row}>
+          <span class={style.type}>Polygons:</span>
+          {polygons.length}
+        </span>
+        <span class={style.row}>
+          <span class={style.type}>LineStrings:</span>
+          {lines.length}
+        </span>
+        <span class={style.row}>
+          <span class={style.type}>Points:</span>
+          {points.length}
+        </span>
+      </div>
+      <div class={style.current}>
+        <h3 class={style.header}> Selected Feature </h3>
+        <span class={style.row}>
+          <span class={style.type}>ID</span>
+          {selected ? (selected.id as string).slice(0, 8) + "..." : "N/A"}
+        </span>
+        <span class={style.row}>
+          <span class={style.type}>Geometry Type</span>
+          {selected ? selected.geometry.type : "N/A"}
+        </span>
+        <span class={style.row}>
+          <span class={style.type}>Created</span>
+          {selected
+            ? getHHMMSS(selected.properties.createdAt as number)
+            : "N/A"}
+        </span>
+        <span class={style.row}>
+          <span class={style.type}>Updated</span>
+          {selected
+            ? getHHMMSS(selected.properties.updatedAt as number)
+            : "N/A"}
+        </span>
+        <span class={style.row}>
+          <span class={style.type}>Coordinates</span>
+          {selected && selected.geometry.type === "Polygon"
+            ? selected.geometry.coordinates[0].length
+            : selected && selected.geometry.type === "LineString"
+              ? selected.geometry.coordinates.length
+              : "N/A"}
+        </span>
+        <span class={style.row}>
+          <span class={style.type}>Area (m2)</span>
+          {selected && selected.geometry.type === "Polygon"
+            ? area(selected).toFixed(2)
+            : "N/A"}
+        </span>
+        <span class={style.row}>
+          <span class={style.type}>Length (km)</span>
+          {selected && selected.geometry.type === "LineString"
+            ? length(selected).toFixed(2)
+            : "N/A"}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default InfoTab;

package/demo/components/info-tab/style.module.css

@@ -0,0 +1,42 @@
+.current,
+.all {
+  display: flex;
+  flex-direction: column;
+  border-radius: 20px;
+  border: solid 3px #565656;
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.header {
+  margin-top: 0;
+  font-weight: bolder;
+  font-size: 20px;
+  text-transform: capitalize;
+}
+
+.type {
+  display: inline-block;
+  width: 150px;
+}
+
+button:hover {
+  background: white;
+  border: solid 3px #222222;
+}
+
+.container {
+  width: 100%;
+  padding: 20px;
+}
+
+.row {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #d9d9d9;
+  margin-bottom: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/demo/components/map-button/ClearButton.tsx

@@ -0,0 +1,24 @@
+import { h } from "preact";
+import style from "./style.module.css";
+
+const ClearButton = ({
+  label,
+  onClick,
+}: {
+  onClick: () => void;
+  label?: string;
+}) => {
+  return (
+    <button
+      id={'clear'}
+      class={style.button}
+      onClick={() => {
+        onClick()
+      }}
+    >
+      {label}
+    </button>
+  );
+};
+
+export default ClearButton;

package/demo/components/map-button/MapButton.tsx

@@ -0,0 +1,41 @@
+import { h } from "preact";
+import style from "./style.module.css";
+import { titleCase } from "../../utils/casing";
+
+const MapButton = ({
+  mode,
+  currentMode,
+  changeMode,
+  label,
+  hiddenOnTouch,
+}: {
+  mode: string;
+  currentMode: string;
+  changeMode: (mode: string) => void;
+  label?: string;
+  hiddenOnTouch?: boolean;
+}) => {
+  let classes = style.button;
+
+  if (hiddenOnTouch) {
+    classes = `${style.hiddenOnMobile} ${classes}`;
+  }
+
+  if (currentMode === mode) {
+    classes = `${style.active} ${classes}`;
+  }
+
+  return (
+    <button
+      id={mode}
+      class={classes}
+      onClick={() => {
+        changeMode(mode);
+      }}
+    >
+      {label ? label : titleCase(mode)}
+    </button>
+  );
+};
+
+export default MapButton;

package/demo/components/map-button/style.module.css

@@ -0,0 +1,42 @@
+.button {
+  padding: 10px;
+  width: 115px;
+  background: #fdfdfd;
+  border: solid 1px #ebebeb;
+  cursor: pointer;
+  border-radius: 10px;
+  font-weight: bold;
+  font-size: 16px;
+  color: #565656;
+  margin: 4px;
+  margin-top: 8px;
+  border: solid 3px #565656;
+}
+
+.button:hover {
+  background: white;
+  border: solid 3px #222222;
+}
+
+.active {
+  color: #02cf87;
+  transition: color 0.5s;
+}
+
+.hiddenOnMobile {
+}
+
+@media screen and (max-width: 900px) {
+  .expanded,
+  .collapsed {
+    display: none;
+  }
+
+  .button {
+    padding: 9px;
+  }
+
+  .hiddenOnMobile {
+    display: none;
+  }
+}

package/demo/components/map-buttons/MapButtons.tsx

@@ -0,0 +1,28 @@
+import MapButton from "../map-button/MapButton";
+import ClearButton from "../map-button/ClearButton";
+import { h } from "preact";
+import style from "./style.module.css";
+
+const MapButtons = ({
+  mode,
+  onClear,
+  changeMode,
+}: {
+  mode: string;
+  changeMode: (mode: string) => void;
+  onClear: () => void;
+}) => {
+  return (
+    <div class={style.buttons}>
+      <MapButton
+        label={"Route Snap"}
+        mode={"routesnap"}
+        currentMode={mode}
+        changeMode={changeMode}
+      />
+      <ClearButton onClick={onClear} label='Clear' />
+    </div>
+  );
+};
+
+export default MapButtons;

package/demo/components/map-buttons/style.module.css

@@ -0,0 +1,17 @@
+.buttons {
+  position: relative;
+  top: 0;
+  z-index: 1000;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+@media screen and (max-width: 900px) {
+  .buttons {
+    width: 85%;
+    margin: auto;
+    margin-left: 45px;
+  }
+}

package/demo/declaration.d.ts

@@ -0,0 +1,9 @@
+declare module "*.css" {
+  const mapping: Record<string, string>;
+  export default mapping;
+}
+
+declare module "*.png" {
+  const mapping: string;
+  export default mapping;
+}

package/demo/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/favicon.ico" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
+        integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
+    <title>Terra Draw - route snap mode</title>
+</head>
+
+<body>
+    <div id="app"></div>
+    <script prerender type="module" src="index.tsx"></script>
+</body>
+
+</html>