DEV Community

jfz5219
jfz5219

Posted on

Using Your IP Address to Find Your Long/Lat Coordinates

ipLookUp API: Finding My IP Address
This part was completed in my previous lab 2 activity. I basically used the ipLookUp API to fetch the IP of my current location. I will be posting my source code at the end, but you can find this part under the UserIP.js file.


ip-api API: Finding My Coordinates
For this part, I was suppose to use the GeoIP API to find my coordinates, but it was not cooperating with me. I kept getting a 502 Error. Image description

After failing to find a solution, I decided to use another API and stumbled across ip-api. Similar to GEOIP, its response contained location data. It was neat that this API automatically found my IP address and used it to locate my coordinates.

These are the information returned in json format:

{"status":"success","country":"United States","countryCode":"US","region":"PA","regionName":"Pennsylvania","city":"Williamsport","zip":"17701","lat":41.2382,"lon":-76.9978,"timezone":"America/New_York","isp":"Comcast Cable Communications, LLC","org":"Comcast IP Services, L.L.C.","as":"AS7922 Comcast Cable Communications, LLC","query":"73.230.71.189"}
Enter fullscreen mode Exit fullscreen mode

However, to fully understand this assignment, I needed to incorporate what I had in my second lab. Luckily, ip-api had an option for developers to manually input an IP address.
Image description

In the getGEOIPData() function, an instance of UserIP(named IPClass) was created. Next, using IPClass's updateUser() function, my IP address can be returned. In fetch, both the locationEndpoint url("http://ip-api.com/json/") and my IP address is combined. ip-api will then use this information to respond with my location data. I was able to plug this information into the Google Maps URL and the wikipedia-query element.
Image description
Image description


Result
This is how my website looked like when everything worked!
Image description


Links

Top comments (0)