Select your country and timezone

Timezone Picker jQuery and Imagemap Library

Timezone Picker is intended to be a free use combination library of a jQuery library (jquery.timezone-picker.js) and an ImageMap format (as demonstrated here). To generate your ImageMap, simply choose an image width from above. All images are half-height of the width, in the standard Equirectangular projection. You should be able to use any variety of images in this standard format.

Features

  • 400+ individual clickable areas
  • Expanded island regions for easy selection
  • Lightweight implementation (140KB)
  • Completely standalone; no internet connection or APIs required
  • Universally compatible (IE6+, Firefox, Chrome, Safari, Opera, mobile browsers)
  • Geolocation when available (IE9+, and all the above)
  • Mobile and Touch event friendly
  • Automatic select list updating, both country and timezone
  • Timezone pin locations

Recommended Use

Generation of the ImageMap files can be rather computationally expensive, especially from the raw data files. It's therefor recommended that you simply copy/paste the entire ImageMap from the source code, rather than generating the ImageMap code on your own. However, please do not attempt to hotlink images or files from TimezonePicker.com. Just copy/paste the pieces, it's all meant to work independently of an external internet connections, making it perfect for offline, intranet, or secure websites.

Alternatively, you may also use this data feed in JSON format to generate your own ImageMap data. Adjust the ?w= query string parameter as needed for your desired map dimensions.

On Mobile

ImageMaps are not very friendy to adaptive/responsive designs. Because the coordinates are coded to a particular image width and height, they do not resize easily (though the library does support this, but it's slow). However, it's not recommended to decrease the size of the map for the mobile version anyway, because selection becomes more difficult on mobile due to the "touch behavior" required. Your finger is a lot less accurate than a mouse. Therefor it's recommended to use an "overflow: auto;" on the containing DIV, which adds a horizontal scrollbar to the map. This can keep the map the same size, while making it easier for mobile users to select the timezone. Of course they could also just use the "Detect" button. :)

Credits