Isochrones - launch the Javascript code


#1

Hi,

Do you know how to input JS code for Isochrones?

The code is below:

let request = new XMLHttpRequest();

request.open('POST', "https://api.openrouteservice.org/v2/isochrones/driving-car");

request.setRequestHeader('Accept', 'application/json, application/geo+json, application/gpx+xml, img/png; charset=utf-8');
request.setRequestHeader('Authorization', '5b3ce3597851110001cf62483b2e5087b0784fb6b7eaf41578e1b99e');

request.onreadystatechange = function () {
  if (this.readyState === 4) {
    console.log('Status:', this.status);
    console.log('Headers:', this.getAllResponseHeaders());
    console.log('Body:', this.responseText);
  }
};

const body = '{"locations":[[8.681495,49.41461],[8.686507,49.41943]],"range":[300,200]}';

request.send(body);

I was trying it putting into

<script>
var map = L.map('mapid').setView([52.257525, 0.068939], 10);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.streets',
    accessToken: 'pk.eyJ1Ijoia3J1a2FyaXVzIiwiYSI6ImNqZ2tuaHZqODAxMjYzM28yam40MmpxMmEifQ.3chgJkJajjDBxsF4YHgENA'
}).addTo(map);

//...and JS openroute isochrones underneath...
</script>

But there is no reaction on my map at all,

Is there something missing?

Thanks & Regards


#2

There’a leaflet plugin for ORS isochrones:

And we have our own JS client lib: