Add a style control

Add the built-in style control to let users switch between map styles at runtime. Enable it with styleControl: true, or pass a StyleControlOptions object to configure position, language and appearance.

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

Options

Pass styleControl: true for the defaults, or a StyleControlOptions object with any of:

Option	Type	Default	Description
`position`	`ControlPosition`	`'bottom-right'`	Position of the control on the map.
`controlLanguage`	`'de' \\| 'en' \\| 'fr' \\| 'es'`	`'en'`	Language of the control's labels.
`compact`	`boolean \\| 'auto'`	`'auto'`	Compact layout. `'auto'` collapses the control on small screens.
`assetUrl`	`string`	SmartMaps CDN	Base URL for the style preview images.

Tip

To switch styles from your own UI instead of the built-in control, see Style switching.