Time Zone Map Widget With HTML CSS and JavaScript

We’ve been recently tasked with building an interactive time zone picker for Date.Tools, and surprisingly, there was no solid ready-made solution available online. So we created our own. We started with a public SVG world map from Wikimedia Commons, stripped out unnecessary layers, and made it fully interactive using jQuery. In this article, I’ll explain how we built it, with a live demo included.

time zone map script website widget plugin

What are Time Zones?

Time zones are regions that observe the same standard time, defined as an offset from Coordinated Universal Time (UTC). Offsets can include minutes (e.g., UTC−03:30, UTC+09:30) and may change seasonally where daylight saving time is used.

Interesting Time Zone Facts

  • China⛩️ uses one time zone, even though it spans five natural ones.
  • Nepal’s 🏔️ time zone is UTC+5:45, a rare 45-minute offset.
  • Kiribati 🏝️ adopted the world’s first UTC+14 time zone in 1995.
  • Samoa 🥥 skipped December 30, 2011 by moving across the Date Line.
  • Spain 💃🏽 still uses CET, causing unusually late sunsets.

Demo

See the picker in action in the iframe below or visit date.tools for integrations with even more features and converters. Open the demo in a new browser tab here.

How this Timezone Map Works

This interactive timezone map is using a single inline SVG layered over a static background png image. which you can adjust to match your own site design or even display countries. Each region is a clickable SVG <path> with a specific class name that encodes its UTC offset. Lightweight JavaScript reads the offset from the class, formats it, and shows it in the info panel below on hover or click. Everything runs client‑side: no frameworks or databases, just plain HTML,CSS and JS.

1) Main Features

  • Responsive Container: #wrapTimeZoneMap sets aspect ratio and the background image and scales naturally on smaller screens.
  • Inline SVG: Contains a lot of <path> elements.
  • Hit regions: Paths with class .www represent interactive (hover and click) timezone shapes.
  • Offset encoding: The class wXXXX encodes the UTC offset. Examples:
    • w-330 → UTC−03:30
    • w930 → UTC+09:30
    • w1245 → UTC+12:45
  • Optional boundaries: Lines with classes like .z and .bndry render borders; .bndry is hidden by default but you can show them by deleting this line from the CSS:
    path.bndry { display: none; }
  • Info panel: #timezonMapInfo shows the formatted UTC label on hover. This is great for debugging.
  • jQuery: Used for simple event binding.
  • Touch: Hover behavior falls back to tap/click to reveal the info panel.
  • Internationalization: Output is a simple UTC string; localize the prefix or format it if you wish.

2) CSS: Visuals and Hit Layer

The hit layer (path.www) is styled to be barely transparent at rest and emphasized on hover. It uses a thin stroke to show borders.

body{
  font-family:Arial, sans-serif;
  background:#f8f8f8;
}
a{
  color:#0e658f;
  text-decoration:none;
}
.button{ background:#0e658f;
 color:#fff; padding:8px 12px;
 border-radius:6px }
.note{ font-style:italic; color:#b84516 }

Color fills for each zone are defined via classes like .w-3, .w7, etc. Pattern fills are declared in the SVG <defs>.

3) JavaScript To Extract, Format & Display

On hover, we parse the offset from the path class, turn it into a human‑readable labels, add a temporary .hovered class to all shapes with the same offset, and render the UTC string in #timezonMapInfo.

// Extract the numeric offset from classes like "www w-330" or "www w1030"
function extractNumberZone(className) {
  let match = className.match(/\bw(-?\d+)\b/);
  return match ? parseInt(match[1], 10) : null;
}

// Convert "1030" &rarr; "10:30", "45" &rarr; "45:00", "-330" is handled as a whole number
function formatTimeZone(input) {
  let str = input.toString();
  if (str.length&nbsp;&lt; 3) return str + ":00";
  return str.slice(0, -2) + ":" + str.slice(-2);
}

// Prepend +/&minus; and a space for display consistency
function relativeToUtc(input) {
  return input.startsWith("-") ? "- " + input.slice(1) : "+ " + input;
}

// Hover/click behavior
var seg = "yo";
$(document).ready(function() {
  $(".www").mouseover(function() {
    seg = Number(extractNumberZone($(this).attr("class")));
    $(".www.w" + seg).addClass("hovered");
    $("#timezonMapInfo").html("UTC " + relativeToUtc(formatTimeZone(seg)));
  });
  $(".www").mouseout(function() {
    $("#timezonMapInfo").html("");
    $(".www").removeClass("hovered");
  });
  $(".www").click(function() {
    console.log("UTC " + relativeToUtc(formatTimeZone(seg)));
  });
});

4) Customization Tips

This is a very basic setup that you can extend further to match your website and custom

  • Change borders: Tweak stroke and stroke-width on path.www.
  • Enable boundary lines: Unhide path.bndry in CSS to show underlying boundaries.
  • Highlight strategy: Use the shared .wXXXX class to highlight all fragments of a split timezone.
  • Keyboard support: Add tabindex="0" and key handlers if you need full keyboard navigation.
  • Selection state: Persist the chosen offset in localStorage or bind to a hidden input for forms.