route-snapper

Draw road-snapped routes

Maintained by Dustin Carlino

A MapLibre GL JS plugin for drawing routes that snap to the road network. Useful for planning cycling routes, bus routes, or delivery paths.

Live demo

route-snapper running on MapLibre GL JS in your browser

Loading the map…

Demo code

import { init, RouteSnapper } from "route-snapper/lib.js";
import type { PluginDemo } from "../types";

export default {
  center: [-0.0925, 51.4875], // Southwark, London
  zoom: 14,
  async run({ map }) {
    // Shift-click adds a freehand point and a double click ends a route.
    map.boxZoom.disable();
    map.doubleClickZoom.disable();

    // The tool draws its buttons into an element we give it: put that in a map control.
    const panel = document.createElement("div");
    panel.className = "maplibregl-ctrl maplibregl-ctrl-group";
    panel.style.cssText = "padding: 6px; font: 12px sans-serif; max-width: 220px";
    map.addControl({ onAdd: () => panel, onRemove: () => panel.remove() }, "top-left");

    // Load the WebAssembly router and a street graph of Southwark (the author's sample, ~700 KB).
    await init();
    const graph = await fetch("https://dabreegster.github.io/route_snapper/southwark.bin");
    const snapper = new RouteSnapper(map, new Uint8Array(await graph.arrayBuffer()), panel);

    // The tool sets itself up on the map's next "idle"; wait for that, then open it on a snapped route.
    map.triggerRepaint();
    await map.once("idle");
    snapper.editExisting({
      type: "Feature",
      properties: {},
      geometry: {
        type: "LineString",
        coordinates: [
          [-0.1043, 51.4945],
          [-0.0795, 51.4812],
        ],
      },
    });
  },
} satisfies PluginDemo;