Stilwechsel

Wechseln Sie zur Laufzeit zwischen verschiedenen Kartenstilen, indem Sie die vollständige Stil-URL für setStyle erstellen. Dieses Beispiel verwendet eine eigene UI; für das fertige Control siehe Ein Style-Control hinzufügen.
<!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%; }
            #style-switcher {
                position: absolute;
                top: 20px;
                left: 20px;
                z-index: 1;
                display: flex;
                flex-direction: column;
                gap: 4px;
                background: white;
                padding: 10px;
                border-radius: 8px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.15);
            }
            button {
                background: white;
                color: #18345c;
                border: 2px solid #e5e7eb;
                padding: 8px 14px;
                border-radius: 6px;
                font-size: 13px;
                cursor: pointer;
                font-weight: 500;
                text-align: left;
                transition: all 0.2s;
            }
            button:hover { background: #f3f4f6; }
            button.active {
                background: #18345c;
                color: white;
                border-color: #18345c;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <div id="style-switcher">
            <button class="active" data-style="ESSENTIAL">Essential</button>
            <button data-style="LIGHT">Light</button>
            <button data-style="DARK">Dark</button>
            <button data-style="GREY">Grey</button>
            <button data-style="SATELLITE">Satellite</button>
            <button data-style="ACCESSIBLE">Accessible</button>
        </div>
        <script>
            const apiKey = "[INSERT API-KEY]";

            function styleUrl(name) {
                // Use smartmapsgl.encodeString — it encodes a raw key but leaves an
                // already URL-encoded key untouched (avoids double-encoding).
                return `https://tiles.smartmaps.cloud/styles/v1/smartmaps/${name}/style.json?apiKey=${smartmapsgl.encodeString(apiKey)}`;
            }

            const map = new smartmapsgl.Map({
                apiKey: apiKey,
                container: "map",
                center: { lat: 48.7758, lng: 9.1829 },
                zoom: 13,
                style: smartmapsgl.MapStyle.ESSENTIAL
            });

            document.querySelectorAll("#style-switcher button").forEach(btn => {
                btn.addEventListener("click", () => {
                    const styleName = smartmapsgl.MapStyle[btn.dataset.style];
                    map.setStyle(styleUrl(styleName));

                    document.querySelectorAll("#style-switcher button").forEach(b => b.classList.remove("active"));
                    btn.classList.add("active");
                });
            });
        </script>
    </body>
</html>