Ein Style-Control hinzufügen

Fügen Sie das integrierte Style-Control hinzu, damit Nutzer zur Laufzeit zwischen Kartenstilen wechseln können. Aktivieren Sie es mit styleControl: true, oder übergeben Sie ein StyleControlOptions-Objekt, um Position, Sprache und Erscheinungsbild zu konfigurieren.

<!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>
    </head>

    <body>
        <div id="map"></div>

        <script>
            const apiKey = '[INSERT API-KEY]';

            const map = new smartmapsgl.Map({
                apiKey: apiKey,
                container: 'map',
                center: { lat: 48.7758, lng: 9.1829 },
                zoom: 13,
                style: smartmapsgl.MapStyle.ESSENTIAL,
                styleControl: {
                    position: 'top-right',
                    controlLanguage: 'de',
                    compact: 'auto'
                }
            });
        </script>
    </body>
</html>

Optionen

Übergeben Sie styleControl: true für die Standardwerte, oder ein StyleControlOptions-Objekt mit einer der folgenden Eigenschaften:

Option	Typ	Standardwert	Beschreibung
`position`	`ControlPosition`	`'bottom-right'`	Position des Controls auf der Karte.
`controlLanguage`	`'de' \\| 'en' \\| 'fr' \\| 'es'`	`'en'`	Sprache der Beschriftungen des Controls.
`compact`	`boolean \\| 'auto'`	`'auto'`	Kompaktes Layout. `'auto'` klappt das Control auf kleinen Bildschirmen ein.
`assetUrl`	`string`	SmartMaps CDN	Basis-URL für die Stil-Vorschaubilder.

Tipp

Um Stile über Ihre eigene UI statt über das integrierte Control zu wechseln, siehe Stilwechsel.