API Connections on the Back End.

In this post I will be showing how to connect websites to APIs by using IP address longitude and latitude to render a google Maps iframe as well as a Wikipedia query tag.

GeoIP

GeoIP is a free-to-use API that collects your geographic information as well as your IP address from your Internet Service Provider (ISP). This information is then used for your lat, long, city, and state. After retrieving the information from GeoIP, it is important to set the properties for data population. Lat and long should be returned as integers while city and state should be returned as strings.

Fetching Data

Fetch API allows you to make HTTP requests to servers in web browsers. In this block fetch is used to retrieve location data from the IP address.

This code uses the URL set by locationEndpoint to fetch your location based on your IP address. Then we set the proerties lat, long, city, and state as properties in the api for use rendering the location in google maps and making the Wikipedia query.

Render

The render method is used here to return any values renderable b lit-HTML elements. This is where we generate the google maps and wikipedia query.

In order for this method of creating a Wikipedia link work you nust first run npm install @lrnwebcomponents/wikipedia-query
After that the package must be imported into the project as shown in this code block:
The command is used to create a wikipedia query tag from the this.city and this.region properties.