(opens in a new tab)gmap cloud
Talk to usContact
RoutingBasic2 min readIncludes code

Map a 15-minute delivery area around a store

A circular radius does not reflect real roads. An isochrone gives you the area reachable within a given time over the road network.

· GMap Cloud

Call the isochrone API

contours are the time limits in minutes. Add "polygons": true to get Polygon areas that are easy to fill.

cURL
curl 'https://cloud.gmap.vn/api/tsp/route/isochrone' \
  --header 'x-api-key: public-gmap-cloud-x-api-key-demo' \
  --header 'content-type: application/json' \
  --data '{
    "locations": [{ "lat": 16.0682606, "lon": 108.224093 }],
    "costing": "auto",
    "contours": [{ "time": 15 }],
    "polygons": true
  }'

The result is a GeoJSON FeatureCollection; each Feature is one area and properties.contour gives its minutes.

Shade the areas on a map

Add this to the MapLibre map from “Show a map of Vietnam with MapLibre GL JS”.

JavaScript
map.on('load', async () => {
  const response = await fetch(
    'https://cloud.gmap.vn/api/tsp/route/isochrone?x-api-key=public-gmap-cloud-x-api-key-demo',
    {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({
        locations: [{ lat: 16.0682606, lon: 108.224093 }],
        costing: 'auto',
        contours: [{ time: 15 }, { time: 30 }],
        polygons: true,
      }),
    },
  );
  map.addSource('service-area', { type: 'geojson', data: await response.json() });
  map.addLayer({
    id: 'service-area',
    type: 'fill',
    source: 'service-area',
    paint: { 'fill-color': '#0754ff', 'fill-opacity': 0.18 },
  });
});

What to use it for

  • Price delivery by 15- and 30-minute zones instead of by kilometre.
  • Compare the reach of candidate sites before opening a new store.
  • Check whether an address falls inside the same-day delivery area.

Times are estimates from the routing model and do not include live traffic.