Skip to content

Elevation of mountain peaks

This example demonstrates the integration of SmartMaps GL with the Elevation Service API. It creates an interactive map with the height of famous mountains of the world.

<!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=${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>