An hour's drive

Everywhere you can drive to in 15, 30, 45, and 60 minutes from five downtowns, each shown 150 miles across, so the cities compare at one scale. Freeways stretch the hour out in long arms, up and down I-5 from Portland and I-25 from Denver, and fan out in a star from Paris, while the Rockies, Lake Michigan, and San Francisco Bay cut it short. Click anywhere for the hour from there.

15 min 30 min 45 min 1 hour

Build it yourself

One request to Mapricot's isochrone API returns the area you can reach within up to four travel times, as GeoJSON polygons that MapLibre draws as they are. The page below asks for an hour's drive from downtown Denver, and again from wherever you click. It was tested with MapLibre GL JS 6.15 in Chromium.

What you need

A web server to serve the page, and a browser key with the Routing and Map tiles products, made as API keys shows. Add http://localhost:* to its allowed origins, so it works from your computer while you build.

Make the page

Make a folder, and in it index.html, with your browser key in place of both mapricot_pk_…:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>An hour's drive</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@6.15.0/dist/maplibre-gl.css">
  </head>
  <body style="margin: 0">
    <div id="map" style="height: 100vh"></div>
    <script type="module">
      import * as maplibregl from "https://cdn.jsdelivr.net/npm/maplibre-gl@6.15.0/+esm";
      import { Mapricot } from "https://cdn.jsdelivr.net/npm/mapricot@latest/+esm";

      const client = new Mapricot({ apiKey: "mapricot_pk_…" });
      const map = new maplibregl.Map({
        container: "map",
        style: "https://api.mapricot.com/tiles/v1/styles/light.json?key=mapricot_pk_…",
        center: [-104.9848, 39.7393],
        zoom: 7.5,
      });
      await map.once("load");

      map.addSource("areas", { type: "geojson", data: { type: "FeatureCollection", features: [] } });
      map.addLayer(
        {
          id: "areas",
          type: "fill",
          source: "areas",
          paint: {
            "fill-color": ["match", ["get", "minutes"], 15, "#7c2d12", 30, "#c2410c", 45, "#fd7e14", "#ffc078"],
            "fill-opacity": 0.8,
          },
        },
        "water",
      );

      async function drive(lat, lon) {
        try {
          const areas = await client.routing.isochrone({ lat, lon }, [15, 30, 45, 60], { mode: "drive" });
          map.getSource("areas").setData(areas);
        } catch (error) {
          new maplibregl.Popup().setLngLat([lon, lat]).setText(error.message).addTo(map);
        }
      }

      map.on("click", ({ lngLat }) => drive(lngLat.lat, lngLat.wrap().lng));
      drive(39.7393, -104.9848);
    </script>
  </body>
</html>

client.routing.isochrone comes from Mapricot's JavaScript client, loaded from jsDelivr like MapLibre. It takes the start, one to four times of 1 to 60 minutes, and the travel mode, and returns a FeatureCollection with one area per time, largest first.
Because the largest area comes first, MapLibre draws the hour first and the 15 minutes on top, so one layer shows all four. The match expression colors each by its minutes, from brown for the closest to light orange for the hour.
Adding the layer before the style's water layer puts it under the water, roads, and labels. Bays and lakes cut into the areas, and the highways that stretch them stay visible on top.
A click anywhere asks for the hour from there. A point with no road near it, out at sea, comes back with no areas and isn't billed, and any other error shows in a popup.
The times have no traffic in them, so the real hour at rush hour reaches much less far.

Open it

Serve the folder with npx serve or python3 -m http.server, and open the address it prints. Opened straight from the file, the map stays blank and the API refuses the key, as Open the page explains. After a second or two you should see Denver's hour reaching north and south along I-25 and east along I-70, and stopping a few miles into the Rockies. Click anywhere for the hour from there.

To walk or cycle instead, pass { mode: "walk" } or { mode: "bicycle" } with shorter times. The routing docs list everything an isochrone request takes.

Data

Isochrones: Mapricot's routing, on OpenStreetMap's roads, with no traffic
Map: OpenStreetMap contributors (ODbL), in Mapricot's map tiles