TimeZoneAPI example

by Mapycz

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Simple map in Leaflet</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css" integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js" integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg=" crossorigin=""></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

CSS

body {
  margin: 0;
  padding: 0;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

JavaScript

// replace with your own API key
const API_KEY =
  "eyJpIjoyNTcsImMiOjE2Njc0ODU2MjN9.c_UlvdpHGTI_Jb-TNMYlDYuIkCLJaUpi911RdlwPsAY"

// Create the map and set the default view
const map = L.map("map").setView([49.8729317, 14.8981184], 3)

// Add a layer with Mapy.cz tiles
L.tileLayer(
  `https://api.mapy.cz/v1/maptiles/basic/256/{z}/{x}/{y}?apikey=${API_KEY}`,
  {
    minZoom: 0,
    maxZoom: 19,
    attribution:
      '<a href="https://api.mapy.cz/copyright" target="_blank">&copy; Seznam.cz a.s. and others</a>',
  },
).addTo(map)

// Add the Mapy.cz logo
const LogoControl = L.Control.extend({
  options: {
    position: "bottomleft",
  },

  onAdd: function (map) {
    const container = L.DomUtil.create("div")
    const link = L.DomUtil.create("a", "", container)

    link.setAttribute("href", "http://mapy.cz/")
    link.setAttribute("target", "_blank")
    link.innerHTML = '<img src="https://api.mapy.cz/img/api/logo.svg" />'
    L.DomEvent.disableClickPropagation(link)

    return container
  },
})

new LogoControl().addTo(map)

// Function to format UTC offset
function formatUtcOffset(offsetSeconds) {
  let sign = offsetSeconds >= 0 ? "+" : "-"
  let absOffset = Math.abs(offsetSeconds)
  let hours = Math.floor(absOffset / 3600)
  let minutes = Math.floor((absOffset % 3600) / 60)
  return `${sign}${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`
}

// Add an event listener for map clicks
map.on("click", function (e) {
  let lat = e.latlng.lat
  let lon = e.latlng.lng
  const timeZoneApiUrl = `https://api.mapy.cz/v1/timezone/coordinate?lon=${lon}&lat=${lat}&lang=cs&apikey=${API_KEY}`

  fetch(timeZoneApiUrl)
    .then((response) => response.json())
    .then((data) => {
      let localTimeStr = data.timezone.currentLocalTime
      let timeZone = data.timezone.timezoneName
      let utcOffset = formatUtcOffset(data.timezone.currentUtcOffsetSeconds)

      // Format the local time
      let localTime = new Date(localTimeStr)
      let options =...