Skip to content
Branch: master
Find file Copy path
Find file Copy path
1 contributor

Users who have contributed to this file

117 lines (99 sloc) 6.77 KB
<!DOCTYPE html>
<title>Get Users Timezone with Prompt - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="This sample shows how to determine a users timezone by passing the users location into the Azure Maps REST Timezone service. The users location is retrieved using the HTML5 geolocation API which displays a prompt to the user to share their location." />
<meta name="keywords" content="map, gis, API, SDK, REST, service, timezone, user, location, geolocation" />
<meta name="author" content="Microsoft Azure Maps" />
<script type='text/javascript'>
//Get your Azure Maps key at
var subscriptionKey = '<Your Azure Maps Key>';
var timezoneRequestUrl = '{subscription-key}&options=all&query={latitude},{longitude}&view=Auto';
function getTimezone() {
var output = document.getElementById('output');
output.innerHTML = '<img src="../Common/images/loadingIcon.gif" title="Loading"/>';
//Request the users location from the browser, this will display a prompt to the user to share their location.
navigator.geolocation.getCurrentPosition(function (position) {
//Create a URL request to the Azure Maps Timezone service.
//Coordinates only need 5 decimal places to represent a high accuracy location.
var requestUrl = timezoneRequestUrl
.replace('{subscription-key}', subscriptionKey)
.replace('{latitude}', position.coords.latitude)
.replace('{longitude}', position.coords.longitude);
//Process the request.
.then(function (response) {
return response.json();
}).then(function (response) {
if (response.TimeZones && response.TimeZones.length > 0) {
var timeZoneInfo = response.TimeZones[0];
var html = [];
html.push('IANA Id: ', timeZoneInfo.Id, '<br/>');
if (response.Names) {
html.push('ISO6391 Language Code: ', timeZoneInfo.Names.ISO6391LanguageCode, '<br/>');
html.push('Generic Standard: ', timeZoneInfo.Names.Id, '<br/>');
html.push('Standard Name: ', timeZoneInfo.Names.Id, '<br/>');
html.push('Daylight Savings Name: ', timeZoneInfo.Names.Id, '<br/>');
if (response.ReferenceTime) {
html.push('Tag: ', timeZoneInfo.ReferenceTime.Tag, '<br/>');
html.push('Standard Offset: ', timeZoneInfo.ReferenceTime.StandardOffset, '<br/>');
html.push('Daylight Savings Offset: ', timeZoneInfo.ReferenceTime.DaylightSavings, '<br/>');
html.push('Wall Time: ', timeZoneInfo.ReferenceTime.WallTime, '<br/>');
if (timeZoneInfo.Countries && timeZoneInfo.Countries.length > 0) {
html.push('<br/>Countries: <br/>');
for (var i = 0; i < timeZoneInfo.Countries.length; i++) {
html.push('&nbsp;&nbsp;&nbsp;&nbsp;', timeZoneInfo.Countries[i].Name, ' (', timeZoneInfo.Countries[i].Code, ')<br/>');
if (timeZoneInfo.TimeTransitions && timeZoneInfo.TimeTransitions.length > 0) {
html.push('Time Transitions: <br/>');
for (var i = 0; i < timeZoneInfo.TimeTransitions.length; i++) {
html.push('<br/>&nbsp;&nbsp;&nbsp;&nbsp;Tag: ', timeZoneInfo.TimeTransitions[i].Tag, '<br/>');
html.push('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Utc Start Date: ', timeZoneInfo.TimeTransitions[i].UtcStart, '<br/>');
html.push('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Utc End Date: ', timeZoneInfo.TimeTransitions[i].UtcEnd, '<br/>');
html.push('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Standard Offset: ', timeZoneInfo.TimeTransitions[i].StandardOffset, '<br/>');
html.push('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Daylight Savings Offset: ', timeZoneInfo.TimeTransitions[i].DaylightSavings, '<br/>');
output.innerHTML = html.join('');
} else {
output.innerHTML = "No timezone information found."
}, function (error) {
//If an error occurs when trying to access the users location information, display an error message.
switch (error.code) {
output.innerHTML = 'User denied the request for Geolocation.';
output.innerHTML = 'Location information is unavailable.';
case error.TIMEOUT:
output.innerHTML = 'The request to get user location timed out.';
case error.UNKNOWN_ERROR:
output.innerHTML = 'An unknown error occurred.';
<input type="button" value="Get your timezone" onclick="getTimezone()"/>
<div id="output" style="margin:20px 0;"></div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend>Get Users Timezone with Prompt</legend>
This sample shows how to determine a users timezone by passing the users location into the Azure Maps REST Timezone service.
The users location is retrieved using the <a href="">HTML5 geolocation API</a> which displays a prompt to the user to share their location.
You can’t perform that action at this time.