Skip to content

Timezones by point

This Timezone API example demonstrates how to integrate real-time timezone information into an interactive map using SmartMaps GL. When a user clicks on any point on the map, the application retrieves and displays the current timezone, local time, and UTC offset for that specific location, providing instant access to accurate time-related data for any geographical point of interest.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://cdn.smartmaps.cloud/packages/smartmaps/smartmaps-gl/v2/umd/smartmaps-gl.min.js"></script>   
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        html,
        body,
        #map {
            height: 100%;
        }

        #controls {
            position: absolute;
            top: 10px;
            left: 10px;
            background: white;
            padding: 10px;
            z-index: 1;
        }
    </style>
    </head>

    <body>
        <div id="map"></div>
        <script>
            const apiKey = 'INSERT API-KEY'; 
            const map = new smartmapsgl.Map({
                apiKey,
                container: "map",
                center: { lat: 49.02164948779226, lng: 8.439330018049352 },
                zoom: 4,
                style: smartmapsgl.MapStyle.AUTO
            });

            map.on('load', () => {
                map.on('click', (e) => {
                    const latitude = e.lngLat.lat;
                    const longitude = e.lngLat.lng;

                    const url = `https://timezone.smartmaps.cloud/api/v1/timezone/current/point?IsoLocale=en-GB&Longitude=${longitude}&Latitude=${latitude}&ApiKey=${apiKey}&Details=SUN`;

                    fetch(url)
                        .then(response => response.json())
                        .then(data => {
                            const timezoneInfo = data.features[0].properties;

                            const popupContent = `
                                <strong>Timezone Information:</strong><br>
                                Timezone: ${timezoneInfo.timezone}<br>
                                Current Time: ${timezoneInfo.isoDateTimeText}<br>
                                UTC Offset: ${timezoneInfo.utcOffset}<br>
                                Timezone ID: ${timezoneInfo.timezoneId}<br>
                                Daylight Saving: ${timezoneInfo.isDaylight ? 'Yes' : 'No'}<br>
                                Sunrise: ${new Date(timezoneInfo.isoSunrise).toLocaleTimeString()}<br>
                                Sunset: ${new Date(timezoneInfo.isoSunset).toLocaleTimeString()}<br>
                            `;

                            new smartmapsgl.Popup()
                                .setLngLat(e.lngLat)
                                .setHTML(popupContent)
                                .addTo(map);
                        })
                });
            });
        </script>
    </body>
</html>