Maps for the web, built from WDS
Vector tiles, markers you can reach with the keyboard, routes and arrival times, in panels that follow your theme.
Click a truck to open its panel and replay the trip.
Three layers, one element
<wds-map> stacks the tiles, your data and the controls. Each layer has a small API and follows your theme.
01Map
The map itself: vector tiles rendered by MapLibre GL JS. The base style follows the light or dark theme, no API key needed.
<wds-map>centerzoommap-style02Layers
Markers are buttons you can reach with Tab, lines are solid or dashed. Colors come straight from design tokens.
markerslinesselected03Controls
Zoom in, zoom out and reset north, plus your own menus over the map, like the layers menu above.
controlsflyTo()resize()
One map, any basemap
Switch the style and keep your markers and routes. Free vector styles with no API key, or your own with map-style.
Behavior you plug in
Plugins build on the map API: they move the camera, follow routes, count arrival times, add controls, places and menus. On this page they are a few lines of app code.
View plugin
Moves the camera to what matters: fits the fleet on load and the route of a truck next to the open panel.
fitBounds()wds-loadwds-move-endPlan the route, know the arrival
Pick the towns and the departure time. The fastest route, the timeline and the ETA update as you go, and rush hour slows the city roads.
Timeline
Demo on a simplified road network of the Bay Area; plug in your own routing service in an app.
Everything you need to know
Quick answers about keys, bundle size, accessibility and routing.
01 Do I need an API key?
No. The default styles come from CARTO and OpenFreeMap with OpenStreetMap data and need no key. Point map-style at your own style when you have one.
02 How much does the map add to my bundle?
wds-map ships as a separate bundle with MapLibre GL JS (maplibre-gl is an optional peer), so only the pages that show a map load it.
03 Can people use the map with the keyboard?
Yes. Markers are buttons: Tab moves between them, Enter opens them, and each one is named from its label.
04 Does it follow the dark theme?
Yes. By default the map switches between Positron and Dark Matter with the page theme. Set map-style and dark-style to use your own pair.
05 Can I plan real routes on roads?
The route demo on this page uses a simplified road network. In an app, plug in a routing service such as OSRM, Valhalla or GraphHopper and draw its route as a line.
Put your fleet on the map
Start from the Fleet management block: sidebar, live map, vehicle list and details, ready to copy.
MapLibre GL JS · OpenStreetMap · no API key