Lab 2 Option 2

The aim of this portion is to explain how our group acquired relevant GeoIP data, specifically Latitude and Longitude, to map a User's location onto a Google Map and link them relevant Wikipedia pages based on their location, such as the city and state they are in.

Import

Starting at the top, we need to install something called a dependency. A dependency in JavaScript is some snippet of code from a third party, which we incorporate into our page for some sort of usage. Since we will eventually want to search a Wikipedia page, we import '@lrnwebcomponents/wikipedia-query/wikipedia-query.js', which is a web component (microservice) that we can use to perform a query of Wikipedia pages. The second important and unique dependency is the import { UserIP } from './UserIP.js', which collects the UserIP attribute from the ./UserIP.js file, which is a file that collects the IP of the User in its own manner, discussed in Option 1 of this project. This dependency will give us the information of where a user is, which is information that will be used for locating coordinates.

Constructor

Our constructor has several elements within it. Super() calls the parent class' constructor (LitElement). This. refers to the object's original location and essentially changes its value within the scope of the constructor, assigning it a new value for all intents and purposes. We did this for UserIpInstance, locationEndpoint, long, and lat variables.

Async & Fetch

In order to retrieve the GeoIP Data based off of the user's IP address, we utilize the async function and Fetch API. Async allows one to write a promise based code w/o blocking the rest of the execution thread. A promise is a function that may produce a value in the future. Async allows the code to progress while these promises are yet to be fulfilled. Await is a keyword in the async function that waits for a promise to return a value before it is executed.

Fetch is an API that allows the user to pass a URL and make an asynchronous HTTP request. One such response may be the HTTP response OK, which affirms the HTTP request has gone through without problem. We can now use this knowledge to progress through the code!

We create a method called getGEOIPData utilizing the async function, making this method asynchronous and allows the code to run while this method awaits promises to return values to progress the code. The IPClass awaits to be updated with the User's IP. Once this promise if fulfilled and the IP value is returned, the fetch API progresses. The URL provided is the locationEndpoint, and the User's IP is provided. If the HTTP response is OK (resp.ok), the response is returned in a readable JSON file. The data from the fetch is printed to the console, and the latitude, longitude, city, and region name (State) of the User is returned based on the User's IP and is stored in the variables
this.lat, this.long, this.city, and this.state, respectively. We now have the User's geographic location! Easy!

Render

Now that we have the geographic values for the User's location, we can utilize this data to Google Maps the User, and produce Wikipedia pages based on the city and state of the user. The render function displays html code inside an html element. This function also runs each time a properties() variable changes.

To begin, the URL provided is a google maps link, with the latitude and longitude spliced into the link, which returns the exact location of those coordinates (where the user is located). To produce these results, an iframe is used, an html feature that enables one to produce a URL in a window. By utilizing the URL of the google maps link we created prior, a window of the User's location is produced in an iframe. A link to the google maps location is provided as well in the form of an href, or a link a user can click to a site.