Показываем пользователю флаг страны при посещении сайта

Рассмотрим небольшую практическую задачу: как показать пользователю флаг страны, в которой он находится, когда он заходит на ваш сайт?
Для решения этой задачи понадобятся два сервиса: Flag Sprites и freegeoip.net, рассмотренный в предыдущей статье.

1. Готовим флаги

С помощью сервиса Flag Sprites получаем архив, содержащий изображение со всеми флагами мира, и CSS-файл, определяющий координаты каждого флага. В примере рассматриваются большие флаги 32×32.
Распаковываем архив в папку проекта, например flags и подключаем полученный CSS к html странице.

2. HTML и CSS

На странице, где будет флаг, вставляем заготовку.

Для класса flag уже существует набор стилей, полученных на шаге 1. Это:

.flag { 
  display: inline-block; 
  width: 32px; 
  height: 32px; 
  background: url('flags.png') no-repeat; 
}

При таком решении в случае, если не удалось определить страну пользователя, ему будет показан первый слева флаг — флаг Республики Молдова. Чтобы избежать этого, стили можно переназначить или усовершенствовать, например:

.flag {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url('flags.png') no-repeat;
  vertical-align: middle;
  background-position: 32px 32px;
}

После этого на странице будет зарезервировано пустое место размером 32 на 32 пикселя.

3. Определяем страну пользователя

Данный фрагмент кода на jQuery определит код страны пользователя и сгенерирует класс, который позволит «выдернуть» правильную картинку из спрайта.

$.getJSON("https://freegeoip.net/json/?callback=?", function (data) {
  var code = data.country_code;
  if (code) {
    var flag = 'flag-'+code.toLowerCase(); 
    $('.flag').addClass(flag); 
  } 
});

Предполагается, что jQuery уже подключен к проекту. Не забывайте также, что путь к файлу flags.png нужно указывать для конкретного проекта. Если картинка не показывается, проверьте, правильно ли вы указали путь к ней.