QUICKSTART / HOSTED ROUTING
Make your first route.
Two points in Frankfurt. Your Europe routing dataset. A real route calculated in your browser.
1. Your project
This identifier is safe to use in your browser app. Your secret API key stays on your server. Register your app’s origin; localhost:5173 is included for new projects.
2. Run a route
Frankfurt Hauptbahnhof → Bockenheim. The first route downloads the required graph tiles; running it again can reuse the cache.
This test uses hosted Europe tiles, not a separate demo dataset. The temporary MapLibre basemap requires a connection. Hosted Protomaps and offline map downloads are coming separately.
MapLibre demo style · route overlay from RouteWasm
Route response
Run a route to see the result.
3. Use it in your app
Create a Vite project, install the SDK, and paste the code below into main.js. Run on http://localhost:5173.
npm create vite@latest my-routing-app -- --template vanilla cd my-routing-app npm install npm install routewasm maplibre-gl npm run dev
Replace the Vite starter’s main.js and remove its starter CSS import. The snippet creates its own output element and map container.
The project ID and API endpoint remain the same when your plan changes. No GB or installation limits are enabled during preview. Browser origins restrict browser usage; they are not a secret or a defense against every non-browser client.
Offline maps are a separate download
Routing graph tiles and visual map tiles are different data. The SDK can persist graph tiles; a complete offline map also needs its style, glyphs, sprites, map tiles and app assets. This example does not cache the public MapLibre style for offline use.
Our planned Protomaps integration will handle an explicit area download with a size estimate, progress, storage limits and a way to remove it. We’ll test offline reloads and map rendering before claiming the whole map works offline.