Lab 2 Option 2
Published: 2022-01-31 11:31:16

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tuxj6o50k61imsikj8py.png)
## 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. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pea220zdqoh54ui2lebm.png)
## 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kni3dvw970fw0z86h1v2.png)
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. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6a4qnycifoei9zx0xtw.png)
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.  

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2s795vxyq0ylkluyamj0.png)
The Wikipedia Query is achieved through the use of the `<wikipedia-query>` web component, which searches and produces three articles in total.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3o5t2qqfmvsz4i70c0et.png)