A couple of months ago, for a 12 hour hackathon, I built https://geochattr.netlify.app/ with Maggie Liu and Gautam Paranjape.

The project is essentially a way of communicating through drawings, and you can chat with people in your city.

The way we got the location to put in that city's chat room is by using your IP.

Guide

To do this, we're going to have to use an API to get the location information.

I generally found that most have some sort of premium plan, but IpAPI is good enough and has a good amount of accuracy for it to function.

Quick Method

To get your location, simply make a GET request to https://ipapi.co/json/ from the client. This will give directly give us all of our necessary information to get the user's location.

You can use any library you want from the client. I tend to stick to axios, so here is an example in axios:

axios.get("https://ipapi.co/json/").then(location => {
    console.log(location.data)
});

However, if you're doing this with plain HTML, CSS, JS, you're going to want to use the browser's fetch API.

fetch("https://ipapi.co/json/").then(data=>data.json()).then(location=>{
   console.log(location);
})

Then, you'll have something that looks like this (obviously I'm using a VPN):

{
    "ip": "89.238.130.72",
    "version": "IPv4",
    "city": "Manchester",
    "region": "England",
    "region_code": "ENG",
    "country": "GB",
    "country_name": "United Kingdom",
    "country_code": "GB",
    "country_code_iso3": "GBR",
    "country_capital": "London",
    "country_tld": ".uk",
    "continent_code": "EU",
    "in_eu": false,
    "postal": "M32",
    "latitude": 53.4507,
    "longitude": -2.3186,
    "timezone": "Europe/London",
    "utc_offset": "+0100",
    "country_calling_code": "+44",
    "currency": "GBP",
    "currency_name": "Pound",
    "languages": "en-GB,cy-GB,gd",
    "country_area": 244820.0,
    "country_population": 66488991,
    "asn": "AS9009",
    "org": "M247 Ltd"
}

More Secure Method

Of course, the client can always disable JavaScript when they want to, meaning that they can disable the GET request to the API. However, we can still get the IP on the server.

For example if a user wants to upload a post, and you want to categorize it based on what city they took it in, you can get the IP as such. We can get the IP from the user like so:

app.post("/upload", (req,res)=>{
    /* ... */
    const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
  console.log(ip); // ip address of the user

})

Then, we can make a GET request to the ipapi.co again, but this time, we're going to send a bit of a different request.

Instead of sending a request to https://ipapi.co/json, we'll send a request to https://ipapi.co/{ip}/json, where {ip} is the IP that you extracted from the incoming user's request. This would look like, for example, https://ipapi.co/89.238.130.72/json/. You should probably use axios for server side requests, so follow the example above on how to make the GET request.

Conclusion

I hope you learned something new on how to actually do this. I remember getting stuck for an hour or two on how exactly to do this during the hackathon, and I wanted to help prevent that confusion for others in the future.

If you want to see a cool demo, check out https://ip-grabber-demo.shubhampatilsd.repl.co/ for an interactive map.

The source code is at https://replit.com/@ShubhamPatilsd/ip-grabber-demograbber-demo#index.html

Anyways, leave a reaction on the left if you enjoyed this blog and follow me on Twitter!