brouter-web stands out as a practical browser-based interface translating the BRouter routing engine into an interactive map experience. It combines OpenStreetMap data with client-side routing profile editing, elevation visualization, and multi-point route adjustments—all without embedding the routing logic itself in the frontend.
What brouter-web does and its architecture
brouter-web is a JavaScript web client built around Leaflet, the popular open-source mapping library. It serves as a frontend for BRouter, an established routing engine focused on bike and outdoor navigation using OpenStreetMap (OSM) data. The core function is to request routing paths from a BRouter backend via HTTP API calls and display them interactively on a map.
The project decouples frontend and backend completely. The frontend does not compute routes itself but relies on the BRouter service to generate them on demand. This separation means the frontend can remain lightweight and focused on user interaction, while the backend handles the heavy routing calculations.
Under the hood, the interface uses Leaflet for map rendering and interaction, including dragging and dropping via-points to adjust routes dynamically. For elevation profiles, brouter-web integrates D3.js, a powerful JavaScript visualization library, to render elevation charts alongside the route.
Another notable feature is the in-browser editing of BRouter’s custom routing profiles. This is achieved through CodeMirror, a web-based code editor component, allowing users to tweak routing preferences live and see the effects immediately. The UI is built with Bootstrap, ensuring a responsive and accessible layout, and internationalization is handled by i18next with translations managed via Transifex.
The project is open source under the MIT license and serves as the reference web client deployed at brouter.de. It also supports a plugin system, making it extensible for additional functionality.
Technical strengths and design tradeoffs
The biggest technical strength of brouter-web is its clean separation of concerns. By offloading routing computations to the backend, the frontend code remains focused on providing an intuitive, interactive map experience. This decoupling also means the frontend can be updated independently of backend improvements, and it can work with any backend compatible with BRouter’s HTTP API.
Leaflet is a proven choice for web mapping, widely adopted and well-supported. Its plugin ecosystem and event-driven model make it ideal for handling route editing and map interactions. Using D3.js for elevation profiles is a natural fit given its flexibility for rendering dynamic charts.
The inclusion of CodeMirror for editing routing profiles directly in the browser is a nice touch, enhancing developer and power-user DX (developer experience). Users can customize routing heuristics on the fly without needing to touch backend config files or restart services.
The tradeoff is that the frontend depends entirely on a separate BRouter backend service to function. Without access to a BRouter routing API, the client loses its core capability. This means deployment scenarios require a backend instance running somewhere, or reliance on the public service at brouter.de, which may have rate limits or availability concerns.
Having the routing profiles editable client-side adds complexity in keeping the UI and backend profile formats in sync. Users might create profiles that the backend cannot interpret if there are version mismatches or unsupported features.
Overall, the code quality is surprisingly clean for a JavaScript single-page app of this complexity. The use of established libraries and frameworks reduces technical debt and improves maintainability.
Explore the project
The repository’s root contains the main frontend source code, primarily JavaScript, alongside HTML and CSS assets. Key directories include the mapping components built on Leaflet and the routing profile editor integrating CodeMirror.
Documentation is available in the README, which points to INSTALL.md for installation guidance. While the analysis did not extract specific installation commands, the README and INSTALL.md are the best places to start for deployment instructions.
The project’s internationalization setup using i18next and Transifex hints at active maintenance for multi-language support, important for a global user base.
Since it’s a frontend-only project, the repository does not contain backend routing engine code. Integration relies on a separate BRouter backend accessible via HTTP API.
Reviewing the plugin system and UI components in the source will be helpful for developers looking to extend or customize the client.
Verdict
brouter-web is a solid, well-structured web client for BRouter’s bike and outdoor routing engine. It excels at providing rich, interactive features—custom routing profiles, elevation charts, dynamic via-point editing—in the browser using established JavaScript libraries.
Its main limitation is the dependency on an external BRouter backend service. This design suits scenarios where you can either use the public backend or deploy your own, but it’s not a standalone routing solution.
For developers or organizations needing a customizable and extendable web frontend for OpenStreetMap-based bike routing, brouter-web offers a robust foundation. It’s particularly attractive if you want to allow users to tweak routing profiles live and visualize elevation data alongside routes.
However, if you require offline routing or a fully integrated single binary solution, this project is not the right fit. Still, the clean architecture and codebase make it worth understanding for anyone working with web-based geospatial routing interfaces.
Related Articles
- Organic Maps: A privacy-first offline map and navigation engine in C++ for mobile — Organic Maps is a C++ cross-platform mobile app delivering offline maps, routing, and turn-by-turn navigation with a pri
- Chartbrew: open-source data visualization and dashboard builder with NodeJS backend and Docker deployment — Chartbrew is an open-source data visualization tool with a NodeJS backend, supporting MySQL/PostgreSQL and Redis, deploy
- Ferret v2: A declarative Go engine for web data extraction with a new API architecture — Ferret v2 is a Go-based declarative system for web scraping that introduces a native Go API and a compatibility layer to
- Blackbox Node: offline AI assistant over LoRa mesh with local llama.cpp and ecash payments — Blackbox Node runs a local llama.cpp LLM over a Meshtastic LoRa mesh, enabling offline AI queries and ecash payments via
- SnapDOM: flexible zero-dependency DOM snapshotting with a reusable capture pipeline — SnapDOM captures DOM subtrees as images or SVGs using a reusable clone and plugin hooks. It’s zero-dependency, extensibl
→ GitHub Repo: nrenner/brouter-web ⭐ 482 · JavaScript