Zeitzonen weltweit

Dieses Beispiel erstellt eine interaktive Weltkarte, die die aktuelle Uhrzeit und Zeitzone für wichtige Städte auf der ganzen Welt anzeigt. Es nutzt die SmartMaps Timezone und Maps API, um Echtzeit-Zeitzonendaten abzurufen und diese in individuell gestalteten Markern für jede Stadt darzustellen.
<!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=${smartmapsgl.encodeString(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>