Skip to content

Elevation by point

This example demonstrates the integration of SmartMaps GL with the Elevation Service API. It creates an interactive map that allows users to click on any point and instantly retrieve the elevation data for that location. 

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

            #controls {
                position: absolute;
                top: 10px;
                left: 10px;
                background: white;
                padding: 10px;
                z-index: 1;
            }
        </style>
    </head>

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

            map.on('load', () => {
                map.on('click', (e) => {
                    const latitude = e.lngLat.lat;
                    const longitude = e.lngLat.lng;

                    const url = `https://elevation.smartmaps.cloud/api/v2/Elevation/point?latitude=${latitude}&longitude=${longitude}&apiKey=${apiKey}`;

                    fetch(url)
                        .then(response => response.json())
                        .then(data => {
                            const elevation = data.features[0].properties.elevation;

                            const popupContent = `
                                <strong>Information:</strong><br>
                                Elevation: ${elevation} meters<br>
                            `;

                            new smartmapsgl.Popup()
                                .setLngLat(e.lngLat)
                                .setHTML(popupContent)
                                .addTo(map);
                        })
                });
            });
        </script>
    </body>
</html>