# Using OSR Request with Leaflet

**URL:** https://ask.openrouteservice.org/t/using-osr-request-with-leaflet/2408
**Category:** isochrones
**Created:** [January 4, 2021, 12:36pm UTC](https://ask.openrouteservice.org/t/using-osr-request-with-leaflet/2408 "2021-01-04T12:36:09Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![mat109](https://ask.openrouteservice.org/user_avatar/ask.openrouteservice.org/mat109/32/867_2.png) [@mat109](https://ask.openrouteservice.org/u/mat109)
#### Post date: [January 4, 2021, 12:36pm UTC](https://ask.openrouteservice.org/t/using-osr-request-with-leaflet/2408/1 "2021-01-04T12:36:09Z")

</div>

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](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:

```auto
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 🙂

---

<div class="post-metadata">

### Author: ![amandus](https://ask.openrouteservice.org/user_avatar/ask.openrouteservice.org/amandus/32/669_2.png) [@amandus](https://ask.openrouteservice.org/u/amandus)
#### Post date: [January 4, 2021, 2:07pm UTC](https://ask.openrouteservice.org/t/using-osr-request-with-leaflet/2408/2 "2021-01-04T14:07:10Z")

</div>

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](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

---

<div class="post-metadata">

### Author: ![mat109](https://ask.openrouteservice.org/user_avatar/ask.openrouteservice.org/mat109/32/867_2.png) [@mat109](https://ask.openrouteservice.org/u/mat109)
#### Post date: [January 4, 2021, 5:02pm UTC](https://ask.openrouteservice.org/t/using-osr-request-with-leaflet/2408/3 "2021-01-04T17:02:57Z")

</div>

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