DEV Community

GigiFitiany
GigiFitiany

Posted on

How IP Address, API and GeoIP Interact to Detect Logitude and Latitude

I am still not completely sure on how all of the components are working together, but to the best of my abilities here is my explanation of what I think is happening.

IP Address

The first API we see being used by this web component would be the IP Fast API that gives us the users exact location. The location is made up of the users IP address, city and country in this case and is portrayed below in the raw data image.

Image description

This API has been assigned to the object ipLookUp within the code.

Image description

When parsing through and displaying the the information we get from the IP Fast API we have the next section of code. We see the operation fetch in relation to ipLookUp which we have established is our API object. Therefore, we are using the operation fetch to pull up our IP address from the API. the next section of code relates to whether or not the json data can be accessed, once that accessibility is given we are able to label and display our IP address.

Image description

warning! this is where I get a little confused!

Now that we have established our first API we "tag" it which is I think what is happening at the bottom of our UserIP.js file with this command: customElements.define(UserIP.tag, UserIP); I assume, but once again could be extremely wrong.

In order to interact with our second API we must move to a new file LocationFromIP where we see the data from UserIP being imported at the very beginning of the file.

FREEGEOIP

We see our second API GeoIP being introduced very similarly to the first, but this one has been named locationEndpoint. This API is where we gather our longitude and latitude and can finally put both together in the code below.

Image description

In this code we see the locationEndpoint which is our lat and long and our userIPData.ip and using the fetch function we are able to pool all of our info into one place to create a neat little location!

now, if you would like to take a look at mine I hate to break it to you but I am having some technical difficulties with pushing my code back up to github :( but for the sake of it I'm going to link it just incase I get it working soon--link!

Top comments (0)