Using OSR Request with Leaflet

openrouteservice isochrones
1

Hello,
first of all thanks for your work on this great service.

So, I wanted to implement the result of an isochrone request on my leaflet basemap using the leaflet plugin for your service: https://github.com/traffordDataLab/leaflet.reachability

But I can’t really figure out how to make the isochrone request after initializing the plugin. Maybe someone could me out here? Or is there an easier way to add the result of the request from the website to a leaflet map?

Request parameter:

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('Content-Type', 'application/json');
request.setRequestHeader('Authorization', 'api key');

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":[[10.992193,47.456659]],"range":[3600],"attributes":["total_pop"]}';

request.send(body);
Leaflet Map" 
<script type='text/javascript'>
     
    var Karte = L.map('Karte').setView([48.896465, 10.996526], 7);  
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     'attribution':  'Kartendaten &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> Mitwirkende',
     'useCache': true
     }).addTo(Karte); 

	// Initialise the reachability plugin
    L.control.reachability({
        // add settings/options here 
		
        apiKey: 'api key'
    }).addTo(map);

 </script>

Help would be much appreciated :slight_smile:

1 Like
2

Hi @mat109,

thank you so much for sharing this, i was not aware this plugin exists.

The isochrone request is made by the leaflet control itself.
You just have to click on the map it seems.

Did you run this example? https://github.com/traffordDataLab/leaflet.reachability/blob/master/leaflet.reachability_example.html
just copy paste it into an html file (or download) and open it in your browser.

To generate isochrones press the draw button and click somewhere on the map.
you can adjust the mode (time, distance), the profile and the time or distance limit to prefilled values.

If you use the script part from that file and adjust it to your needs you should be able to get somewhere.

Best regards

1 Like
3

Thanks for the quick response and the link.
Must have missed it earlier, now it works as I wanted to. It’s a neat plugin actually.

Best wishes