10/11

10. Third party API

So far you developed webpage with content fully defined locally in the HTML and JavaScript code. As web browsers have natural abilities to communicate with external resources, it is possible to integrate content provided from third parties within your own webpage.

Web Application Programming Interfaces (Web API) are interface able to request resources from code, thus allowing to automatize interactions with external resources.

Web API from url

One of the most simple-to-use Web API consists in querying a resource using parameters embedded in the url.

For instance, searching for the word "butterfly" on Google can be done in writing in your browser url https://www.google.fr/search?q=butterfly.

  • https://www.google.fr/search: corresponds to the url from which the resources can be accessed. It is called the endpoint.

  • q=butterfly: corresponds to the parameter of the query.

Note that website such as Google only allows such query when it is manually writing in your browser. Automatic queries from JavaScript code, or any other automated approach, usually require to be registered and subject to fees.

MapBox

MapBox is an API dealing with map data. Among several possibilities, MapBox allows to query static images from a given url.

  • Type in your browser the following url

https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/2.34,48.86,10.5/640x480?access_token=pk.eyJ1IjoiZHJvaG1lciIsImEiOiJjanR1aDQ4dTMxaGI5NDNwY3E1aTR3ZW4wIn0.ruA3CM8NL1oBwqZYEOec8w

This image is not a pre-stored one, but rendered on demand by MapBox servers. This image is fully parameterized by the values indicated in the url

  • 2.34,48.86,10.5 indicates respectively

    • The longitude 2.34

    • The latitude 48.86

    • The level of zoom 10.5

  • 640x480 is the requested image size

  • access_token=…​ key of the user generating the request

Note

Exercise

Create a webpage that mimics the following example

Tips

  • Every time an input is modified (event of type change) a new image is requested

  • Changing the src attribute of the image generates a new image request.