Höhe von Berggipfeln

Dieses Beispiel demonstriert die Integration von SmartMaps GL mit der Elevation Service API. Es erstellt eine interaktive Karte mit der Höhe berühmter Berge der Welt.
<!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;
            }

            .mountain-label {
                width: 120px;
                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;
            }

            .mountain-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: 30.0, lng: 0.0 },
                zoom: 1.5,
                style: smartmapsgl.MapStyle.AUTO
            });

            const mountains = [
                { name: "Mount Everest", lat: 27.988056, lng: 86.925204 },
                { name: "K2", lat: 35.8825, lng: 76.5133 },
                { name: "Aconcagua", lat: -32.6532, lng: -70.0110 },
                { name: "Mount Logan", lat: 60.5670, lng: -140.4050 },
                { name: "Kilimanjaro", lat: -3.0674, lng: 37.3556 },
                { name: "Mont Blanc", lat: 45.8326, lng: 6.8652 },
                { name: "Mount Elbrus", lat: 43.3552, lng: 42.4392 },
                { name: "Puncak Jaya", lat: -4.0785, lng: 137.1580 },
                { name: "Mount Cook", lat: -43.5950, lng: 170.1417 },
                { name: "Mount Fuji", lat: 35.3606, lng: 138.7274 },
                { name: "Mount Whitney", lat: 36.5785, lng: -118.2923 }
            ];

            function getElevationData(lat, lng) {
                const url = `https://elevation.smartmaps.cloud/api/v2/Elevation/point?apiKey=${smartmapsgl.encodeString(apiKey)}&latitude=${lat}&longitude=${lng}`;
                return fetch(url)
                    .then(response => response.json())
                    .then(data => {
                        if (data.features && data.features.length > 0) {
                            return {
                                elevation: data.features[0].properties.elevation
                            };
                        }
                        throw new Error('No elevation data available');
                    });
            }

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

                Promise.all(mountains.map(mountain =>
                    getElevationData(mountain.lat, mountain.lng)
                        .then(elevationData => ({ ...mountain, ...elevationData }))
                ))
                    .then(mountainsWithElevation => {
                        mountainsWithElevation.forEach((mountain, index) => {
                            const el = document.createElement('div');
                            el.className = 'mountain-label';
                            el.innerHTML = `
                            <div class="mountain-info">
                                <span>${mountain.name}</span>
                                <span>${mountain.elevation}m</span>
                            </div>
                        `;

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

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