IP Geolocation with ipstack

By (Sponsor)  on  

Knowing where your web visitor is located is an incredible advantage to any website; you can show relative content like maps, pricing, and availability, output your content in their likely language, etc -- I cannot overstate how useful that information is.  Of course we have the HTML5 Geolocation API but that's permission based and, even if your service doesn't neglect its purpose, the browser's geolocation popup can look scary.

If geolocation is critical to your app, the HTML5 Geolocation API isn't reliable enough; you'll instead want to use, as primary or a secondary option, an IP-based location service, and I've really enjoyed experimenting with ipstack!

Quick Hits

  • ipstack allows you to sign up for free
  • Only required information is the IP address -- ipstack does the rest
  • Receive the country name and code, country, region, zip code, and more
  • Response JSON is small, simple, and customizable
  • Receive currency preference of the location
  • Trusted by Airbnb, Microsoft, Samsung, Activision, and more
  • ipstack is from apilayer, the same service provider for currencylayereversign, and streetlayer
  • ipstack allows you to use JSONP

Using ipstack

Based on my previous experience with apilayer APIs, I knew that ipstack would be easy to use, and it did not disappoint.  To get the basic information about a given visitor IP address, make a call to the following URL:

http://api.ipstack.com/75.135.72.123
    ?access_key=MY_API_KEY
    &format=1

A simple API response would look like:

{
  "ip":"75.135.72.123",
  "type":"ipv4",
  "continent_code":"NA",
  "continent_name":"North America",
  "country_code":"US",
  "country_name":"United States",
  "region_code":"WI",
  "region_name":"Wisconsin",
  "city":"Madison",
  "zip":"53711",
  "latitude":43.0208,
  "longitude":-89.36,
  "location":{
    "geoname_id":5261457,
    "capital":"Washington D.C.",
    "languages":[
      {
        "code":"en",
        "name":"English",
        "native":"English"
      }
    ],
    "country_flag":"http:\/\/assets.ipstack.com\/flags\/us.svg",
    "country_flag_emoji":"\ud83c\uddfa\ud83c\uddf8",
    "country_flag_emoji_unicode":"U+1F1FA U+1F1F8",
    "calling_code":"1",
    "is_eu":false
  }
}

You can also send IPs in bulk by separating IPs by comma:

http://api.ipstack.com/75.135.72.123,75.135.72.124
    ?access_key=MY_API_KEY
    &format=1

## Result: [{ }, { }]

ipstack also allows the developer to specify output fields, including more information like currency of the region:

http://api.ipstack.com/75.135.72.123
    ?access_key=MY_API_KEY
    &fields=ip,location,security
{
  "ip":"75.135.72.123",
  "location":{
    "geoname_id":5261457,
    "capital":"Washington D.C.",
    "languages":[
      {
        "code":"en",
        "name":"English",
        "native":"English"
      }
    ],
    "country_flag":"http:\/\/assets.ipstack.com\/flags\/us.svg",
    "country_flag_emoji":"\ud83c\uddfa\ud83c\uddf8",
    "country_flag_emoji_unicode":"U+1F1FA U+1F1F8",
    "calling_code":"1",
    "is_eu":false
  }
}

You can even use JSONP -- no server required:

https://api.ipstack.com/75.135.72.123
    ?access_key=MY_API_KEY
    &callback=MY_FUNCTION_NAME

Not needing a server proxy for front-end functionality is such a useful future for developers like myself.

Closing

The only surprise I get when using apilayer IP services is how much information I can get based on so little information; the call URL is always predictable and the response is always as simple as I'd hoped.  I was presently surprised with ipstack providing currency information and allowing developers to specify the desired response information -- APIs don't usually allow you to do that.  In the end, ipstack is exactly what you want in an API: provides as much information as you want, is easy to use, and is flexible in use!

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!