Timezone by Point

Dieses Beispiel zeigt, wie Sie mithilfe des Timezone Service Zeitzoneninformationen auf einer Karte darstellen. Klicken Sie auf einen beliebigen Ort auf der Karte, um die Zeitzoneninformationen für diesen Bereich anzuzeigen.
<!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/timezone/umd/timezone.min.js"></script>
        <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%;
            }
        </style>
    </head>

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

            const timezone = new smartmaps.timezoneService.Timezone(apiKey);

            map.on('click', async (event) => {
                const params = {
                    point: {
                        longitude: event.lngLat.lng,
                        latitude: event.lngLat.lat
                    },
                    details: ['SUN']
                };

                const timezoneData = await timezone.currentPoint(params);
                const timezoneInfo = timezoneData.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(event.lngLat).setHTML(popupContent).addTo(map);
            });
        </script>
    </body>
</html>