DEV Community

Kaique Garcia
Kaique Garcia

Posted on

Discovering client location with public APIs

Hi there!

Sometimes we want to add some filters on our web projects focused on user location and it's pretty obvious there's a lot of APIs available to reach that.
So before I start, I want to share with you this perfect repository where you can find a nice list of public APIs around the world. For this post we could use a lot of APIs we can found on this list. For example:

  • IPify to discover our client's IP
  • IP Geolocation API to discover the location from IP (or maybe from client's IP itself)
  • etc

What we'll use for our magic is IP Location. The reason is simple: we can use the SSL protocol for free and we don't need to register anything to use them. Let me know if you prefer others and why.

Before starting: Javascript expected knowledge

Block 1: planning

It's not news that someone can find your address with your IP, but for who's starting with web development this still looks like something hard to do. The reason is we would have a lot of work to discover the real client's IP, for example. How would you do that?

Whatever, with APIs like ipapi.co you can ask to the client's browser to make a request to another platform and they will be responsible to do the rest for you. So if you're a beginner here, please pay attention: when I say "client's browser" it means it wouldn't work from back-end - because the request would be made by your server. But it's possible to do that on the back if you got the client's IP.

It's soooo haaaard to make this request... And with the same API we'll receive the location info we need. You just need to send a GET command to the specific URL, for example, https://ipapi.co/json/. If you open that in your browser, it'll print your data in JSON format. And as you can see on their docs, we can choose one from these five formats:

  • json
  • jsonp (with the callback name 'callback')
  • xml
  • csv
  • yaml

As I want to make this solution in Javascript, it's a great idea to choose the JSON format, right? (haha)

Ok, that's fine... So now we've decided which API and format we'll use... So what?

We need to make this request to be called from the JS.
There's a lot of projects to make this happen but I don't want to explain any of them, so let me use our classic XMLHttpRequest instance.

Block 2: making a GET request

The first thing I want to do is to prepare a function to create requests, just like other abstractions you can found anywhere. As we're going to do GET requests only my function will work just with that.

function GET(url) {
  return new Promise((resolve) => {
    let xmlHttpRequest = new XMLHttpRequest();
    xmlHttpRequest.open('GET', url, false);
    xmlHttpRequest.send(null);
    resolve(xmlHttpRequest.responseText);
    // yeah, I don't care about errors on this demo :v
  });
}
Enter fullscreen mode Exit fullscreen mode

That's not an incredible function but it's what we need for this post.

So now we can do simple requests to whatever we want to. For example: GET('https://http.cat/200'). That's it.

Block 3: getting the prize

Now we can do that request we were talking about. For that, I want to create another function. Take a look:

async function getClientInfo() {
  let jsonString = await GET('https://ipapi.co/json/');
  return JSON.parse(jsonString);
}
Enter fullscreen mode Exit fullscreen mode

That's it. When you want to discover the client's location you'll use that getClientInfo().

There's the possible things you can do with that:

  • automatic choosing the page translation on the first access
  • filter content by country and region_code
  • place the user avatar (or whatever) on his latitude-longitude position on any map
  • move your map to the user's position
  • discover the user's timezone to automatic data translation on client side
  • discover the user's country_calling_code to automatic fill up phone DDI
  • etc

My purpose on this study was to find a way to filter content based on country and region_code. It's something like that:

let options = ['BR-SE', 'BR-BA', 'US-FL'];
getClientInfo().then((client) => {
  let optionCode = `${client.country}-${client.region_code}`;
  if (options.includes(optionCode)) {
    filterContent(optionCode); // this function doesn't exists but it's what I wanted to do
  }
});
Enter fullscreen mode Exit fullscreen mode

You can do a lot of other stuffs with that.
Tell me if you liked ;)

Cheers!

Discussion (0)