RouteMap
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
A map of the way from one place to another, drawn in black and white so it stays sharp on an e-ink frame. The route is a thick line with a ring at the start and a solid dot at the end, over the roads around it in thinner lines, with the names of the places it passes where there is room.
Pass the route alone and the map draws the roads itself, from OpenStreetMap. Use it instead of a map image from a directions website: it never blurs, it follows dark mode, and it still shows when that website is down.
Import
import { RouteMap } from "~lib/data-display/maps/route-map";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
route | string | { latitude, longitude }[] | Yes | N/A | The route: an encoded polyline from a directions API, or a list of points |
streets | (string | { latitude, longitude }[])[] | No | The real roads | Your own streets to draw instead, each a polyline or a list of points |
width | number | string | No | "100%" | Map width (px or CSS string) |
height | number | string | No | "100%" | Map height (px or CSS string) |
weight | number | No | Automatic | Thickness of the route line in pixels; thinner on small maps when left out |
border | boolean | No | true | Draw a frame with rounded corners around the map |
label | string | No | "Route map" | What the map shows, for screen readers |
The map fits the whole route inside its box with north at the top, and leaves a little room around it. Streets that run past the edge are cut off. The map keeps its proportions, so in a box of another shape it is scaled to fit and centered.
The Roads Around the Route
Without streets, the map fetches the real roads around the route and draws as many as its size calls for: only the main roads on a long route or a small map, every street on a short walk in a big box. Place names are added where the map is large enough to read them, and a small "© OpenStreetMap" credits the data in the corner.
The route shows straight away and the roads appear as soon as they arrive. If they cannot be fetched, the map shows the route on its own.
Examples
Route Over Your Own Streets
Route Only
With streets={[]}, the route stands on its own inside the frame.
Encoded Polyline
Directions APIs send a route's shape as an encoded polyline, a short string of letters and symbols. Pass it straight to route.
Thumbnail
The line gets thinner on a small map.
Strip
Side Panel
Heavier Line
Without a Frame
Filling Its Parent
Leave out width and height and the map fills the box it sits in.
Showing a Route From Google Directions
The Directions API sends each route's shape as overview_polyline.points.
import { RouteMap } from "~lib/data-display/maps/route-map";
const Route = ({
route,
}: {
route: { overview_polyline: { points: string } };
}) => (
<RouteMap route={route.overview_polyline.points} width={240} height={240} />
);
A few APIs encode their polylines more finely, to six decimal places; if your route lands in the wrong place, decode it with decodePolyline and pass the points:
import { RouteMap, decodePolyline } from "~lib/data-display/maps/route-map";
<RouteMap route={decodePolyline(shape, 6)} />;
Drawing Your Own Streets
To draw other lines instead of the real roads, give streets a list of them, each as an encoded polyline or a list of points. The other routes a directions API offers work well (Google Directions sends them when you ask for alternatives=true).
<RouteMap
route={routes[0].overview_polyline.points}
streets={routes.slice(1).map((other) => other.overview_polyline.points)}
/>