SDK

Tour du Mont-Blanc, day 1: Les Houches to Les Contamines. Hover the profile or the track.

• Isomaps base maps (outdoor, satellite, topo, winter, ski), 3D terrain and sky.
• GPX or GeoJSON tracks with a linked elevation profile, in 5 languages.
• 3D flyover with pause, speed and progress events.
• Built on MapLibre GL JS: its whole API remains available.
• Your API key works only on the domains you declare. 50,000 map loads per month included.

                        
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Isomaps 3D Web Map SDK</title>
            <link rel="stylesheet" href="https://cdn.iso-maps.com/sdk/web/0.3.1/isomaps-web-sdk.css">
            <script src="https://cdn.iso-maps.com/sdk/web/0.3.1/isomaps-web-sdk.cdn.js"></script>
            <style>
                body { margin: 0; }
                #map { height: 70vh; }
            </style>
        </head>
        <body>
            <div id="map"></div>
            <div id="profile"></div>
            <button id="fly">Flyover</button>

            <script>
                // Your API key, with this website in its "Allowed domains"
                const map = new Isomaps.Map({
                    container: "map",
                    key: "YOUR_API_KEY",
                    style: "satellite",
                    terrain: true,
                    pitch: 60
                });

                map.loadTrack("my-hike.gpx").then(function (track) {
                    new Isomaps.ElevationProfile({ container: "profile", track: track });
                    document.getElementById("fly").onclick = function () {
                        map.flyover(track);
                    };
                });
            </script>
        </body>
        </html>