Skip to content

Timezones worldwide

This examples creates an interactive world map displaying the current time and timezone for major cities across the globe. It utilizes the SmartMaps Timezone and Maps API to fetch real-time timezone data and presents it in custom-styled markers for each city. 

<!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%;
            }

            #loading {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: rgba(255, 255, 255, 0.8);
                padding: 10px;
                border-radius: 5px;
                display: none;
                z-index: 999;
            }

            .city-label {
                width: 100px;
                height: 60px;
                background: rgba(255, 255, 255, 0.9);
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 2px 4px rgba(0, 0, 0, 0.23);
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-family: 'Noto Sans', sans-serif;
                font-weight: bold;
                font-size: 12px;
                padding: 5px;
                pointer-events: none;
            }

            .city-info {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
        </style>
    </head>

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

            const capitals = [
                { name: "YellowMap", lat: 49.0069, lng: 8.4037 },
                { name: "Tokyo", lat: 35.6762, lng: 139.6503 },
                { name: "Delhi", lat: 28.6139, lng: 77.2090 },
                { name: "Mexico City", lat: 19.4326, lng: -99.1332 },
                { name: "Cairo", lat: 30.0444, lng: 31.2357 },
                { name: "Jakarta", lat: -6.2088, lng: 106.8456 },
                { name: "Seoul", lat: 37.5665, lng: 126.9780 },
                { name: "Manila", lat: 14.5995, lng: 120.9842 },
                { name: "Bangkok", lat: 13.7563, lng: 100.5018 },
                { name: "London", lat: 51.5074, lng: -0.1278 },
                { name: "Lima", lat: -12.0464, lng: -77.0428 },
                { name: "Santiago", lat: -33.4489, lng: -70.6693 },
                { name: "Washington D.C.", lat: 38.9072, lng: -77.0369 },
                { name: "Sydney", lat: -33.8688, lng: 151.2093 },
                { name: "Pretoria", lat: -25.7479, lng: 28.2293 }
            ];

            function getTimezoneData(lat, lng) {
                const url = `https://timezone.smartmaps.cloud/api/v1/timezone/current/point?IsoLocale=en-GB&Latitude=${lat}&Longitude=${lng}&ApiKey=${apiKey}`;
                return fetch(url)
                    .then(response => response.json())
                    .then(data => {
                        if (data.features && data.features.length > 0) {
                            const properties = data.features[0].properties;
                            const time = properties.isoDateTimeText.split(' ')[4].split(':').slice(0, 2).join(':');
                            return {
                                time: time,
                                timezone: properties.timezoneAbbreviation
                            };
                        }
                        throw new Error('No timezone data available');
                    });
            }

            function addRectangles() {
                document.getElementById('loading').style.display = 'block';

                Promise.all(capitals.map(capital =>
                    getTimezoneData(capital.lat, capital.lng)
                        .then(timezone => ({ ...capital, ...timezone }))
                ))
                    .then(capitalsWithTimezone => {
                        capitalsWithTimezone.forEach((capital, index) => {
                            const el = document.createElement('div');
                            el.className = 'city-label';
                            el.innerHTML = `
                            <div class="city-info">
                                <span>${capital.name}</span>
                                <span>${capital.time}</span>
                                <span>${capital.timezone}</span>
                            </div>
                        `;

                            new smartmapsgl.Marker({
                                element: el,
                                anchor: 'center'
                            })
                                .setLngLat([capital.lng, capital.lat])
                                .addTo(map);
                        });
                    })
                    .catch(error => {
                        console.error('Error loading timezone data:', error);
                        alert('Error loading timezone data. Please try again later.');
                    })
                    .finally(() => {
                        document.getElementById('loading').style.display = 'none';
                    });
            }

            map.on('load', addRectangles);
        </script>
    </body>
</html>