Creating multiple points on Mapbox Isochrone map

Question

Is it possible to create multiple points on an isochrone map in Mapbox?

This is the documentation for one of their maps with one point: https://docs.mapbox.com/help/tutorials/get-started-isochrone-api/

I want to do the exact same thing, just have multiple points with the buffers around them.

Answer 1

Is it possible to create multiple points on an isochrone map in Mapbox?

Yes, sure. You just need to make multiple requests to Isochrone API and draw the results properly.

Something like this:

  map.on('load', function () {

    map.addSource('iso', {
      type: 'geojson',
      data: {
        'type': 'FeatureCollection',
        'features': []
      }
    });

    map.addLayer(
      {
        'id': 'isoLayer',
        'type': 'fill',
        'source': 'iso',
        'layout': {},
        'paint': {
          'fill-color': '#5a3fc0',
          'fill-opacity': 0.3
        }
      },
      'poi-label'
    );
            
    $.when(
        $.ajax('https://api.mapbox.com/isochrone/v1/mapbox/cycling/-77.034,38.899?contours_minutes=10&polygons=true&access_token=' + mapboxgl.accessToken),
        $.ajax('https://api.mapbox.com/isochrone/v1/mapbox/cycling/-77.003,38.784?contours_minutes=10&polygons=true&access_token=' + mapboxgl.accessToken)
    )
    .then(function(response1, response2) {
        map.getSource('iso').setData({
            'type': 'FeatureCollection',
            'features': [response1[0].features[0], response2[0].features[0]]
        });
    })
    .fail(function(err) {
        console.log('Something went wrong', err);
    });
  });

Here is a working demo: https://anatolysukhanov.com/mapbox/stackoverflow/isochrone.html