How to call HTTP Get request

All Geoapify APIs work via HTTP Get requests. In this article, we would like to highlight some examples, how to implement HTTP request in your application.

JavaScript: Get request with XMLHttpRequest object

Firstly, one HTTP request example with the XMLHttpRequest object. The XMLHttpRequest object is classical and proved by time way to build HTTP request in JavaScript.

Do not be confused by word "XML" in the name. XMLHttpRequest is very flexible in nature and allows to operate with any data type. Of cause, the method perfectly works with JSON objects as well.

For example, the implementation could look like:

var xmlHttp = new XMLHttpRequest();
xmlHttp.responseType = 'json';
var url = "https://api.geoapify.com/v1/isoline?lat=47.68388118858141&lon=8.614278188654232&type=time&mode=drive&range=2700&api_key=YOUR_API_KEY";
xmlHttp.onreadystatechange = () => {
    if (xmlHttp.readyState === 4) {
        if (xmlHttp.status === 200) {
            // check xmlHttp.responseText here;
            console.log(xmlHttp.response);
        } else {
            console.log(xmlHttp.response);
        }
    }
};
xmlHttp.open("GET", url, true); // true for asynchronous 
xmlHttp.send(null);

JavaScript: fetch() to build HTTP request

Another we-known way to build an HTTP request in JavaScript application is using fetch(). Fetch() provides similar functionality as XMLHttpRequest, but instead of callbacks and a bit complicated API, fetch() returns a promise. Moreover, you can define URI parameters separately as an object. So fetch() allows making your code cleaner and smaller.

For instance, fetch() could look that way in your code:

var url = new URL('https://api.geoapify.com/v1/isoline');

var params = [['lat', '47.68388118858141'], ['lon', '8.614278188654232'], ['mode', 'drive'], ['type', 'time'], ['range', '2700'], ['api_key', 'YOUR_API_KEY']];
url.search = new URLSearchParams(params);

fetch(url).then(response => response.json()).then(data => console.log(data)).catch(err => console.log(err));

Angular: HttpClient

Angular brings new standards into our code and life. The common way to implement HTTP request in Angular is by using HTTPClient.

You just add HttpClient to a class constructor and call get(). However, don't forget to import HttpClientModule in your module file. The data returned is already in JSON format, you do not need to convert it separately.

// import BrowserModule and HttpClientModule in a module file
constructor(private httpClient: HttpClient, ...) {

}

getData() {
  const url = "https://api.geoapify.com/v1/isoline?lat=47.68388118858141&lon=8.614278188654232&type=time&mode=drive&range=2700&api_key=YOUR_API_KEY";

  this.httpClient.get(url).subscribe(data => {
    // check for returned data
  }, err => {
    // check for error
  });
}

HTTP Request in Terminal

Sometimes it's useful to call HTTP requests from terminal to check if the functionality works independently from a platform or framework. You can do it with curl, for example:

curl -i -H "Accept: application/json" -H "Content-Type: application/json" -X GET "https://api.geoapify.com/v1/isoline?lat=47.68388118858141&lon=8.614278188654232&type=time&mode=drive&range=2700&api_key=YOUR_API_KEY"

Geoapify Location Platform APIs work via HTTP Get requests

We offer APIs for digital maps and location intelligence. All our APIs work via HTTP Get and work on all platforms and with any programming languages. Register and get an API key for Free or try our APIs in the Playground without registartion.