---
title: "How to display a style switcher control | JavaScript maps SDK"
description: "Add a style switcher control to your map."
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# How to display a style switcher control

This tutorial demonstrates the process of showcasing a control for switching styles on the map.

## NPM module setup

1.  Install the npm package.
    
    ```bash
    npm install --save @maptiler/sdk
    ```
    
2.  Include the CSS file.
    
    If you have a bundler that can handle CSS, you can `import` the CSS
    
    ```js
    import "@maptiler/sdk/dist/maptiler-sdk.css";
    ```
    
    or include it with a `<link />` in the head of the document via the CDN
    
    ```html
    <link href='https://cdn.maptiler.com/maptiler-sdk-js/v4.2.0/maptiler-sdk.css' rel='stylesheet' />
    ```
    
3.  Include the following code in your JavaScript file (Example: app.js).
    
    ```js
    import * as maptilersdk from '@maptiler/sdk';
    
     maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
     const map = new maptilersdk.Map({
       container: 'map', // container's id or the HTML element to render the map
       style: maptilersdk.MapStyle.STREETS,
          
       center: [100.507, 13.7231], // starting position [lng, lat]
       zoom: 10.82, // starting zoom
          
     });
    ```
    
4.  Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/developer/credentials/api-key/#secure-key) before you publish it.
    
5.  The next is up to you. You can center your map wherever you desire (modifying the `starting position`) and set an appropriate zoom level (modifying the `starting zoom`) to match your users’ needs. Additionally, you can change the map’s look (by updating the `source URL`); choose from a range of visually appealing map styles from our extensive [MapTiler standard maps](https://cloud.maptiler.com/maps/), or create your own to truly differentiate your application.
    
6.  Create the list of styles. In the list of styles use as key the ID of the map in [MapTiler](https://cloud.maptiler.com/maps/).
    
    ```js
    const baseMaps = {
       "STREETS": {
         img: "https://cloud.maptiler.com/static/img/maps/streets-v4.png"
       },
       "WINTER": {
         img: "https://cloud.maptiler.com/static/img/maps/winter-v4.png"
       },
       "HYBRID": {
         img: "https://cloud.maptiler.com/static/img/maps/hybrid-v4.png"
       }
     }
    ```
    
7.  Select the initial style from the list and update the map style URL.
    
    ```js
    const initialStyle = maptilersdk.MapStyle[Object.keys(baseMaps)[0]];
    const map = new maptilersdk.Map({
      container: 'map', // container id
      style: initialStyle,
      center: [100.507, 13.7231], // starting position [lng, lat]
      zoom: 10.82 // starting zoom
    });
    ```
    
8.  Create the `styleSwitcherControl` and add it to the map. This code is an adaptation of the [maplibre-gl-basemaps](https://github.com/ka7eh/maplibre-gl-basemaps) plugins.
    
    ```js
    class layerSwitcherControl {
          
      constructor(options) {
        this._options = {...options};
        this._container = document.createElement("div");
        this._container.classList.add("maplibregl-ctrl");
        this._container.classList.add("maplibregl-ctrl-basemaps");
        this._container.classList.add("closed");
        switch (this._options.expandDirection || "right") {
          case "top":
            this._container.classList.add("reverse");
          case "down":
            this._container.classList.add("column");
            break;
          case "left":
            this._container.classList.add("reverse");
          case "right":
            this._container.classList.add("row");
        }
        this._container.addEventListener("mouseenter", () => {
          this._container.classList.remove("closed");
        });
        this._container.addEventListener("mouseleave", () => {
          this._container.classList.add("closed");
        });
      }
    
      onAdd(map) {
        this._map = map;
        const basemaps = this._options.basemaps;
        Object.keys(basemaps).forEach((layerId) => {
          const base = basemaps[layerId];
          const basemapContainer = document.createElement("img");
          basemapContainer.src = base.img;
          basemapContainer.classList.add("basemap");
          basemapContainer.dataset.id = layerId;
          basemapContainer.addEventListener("click", () => {
            const activeElement = this._container.querySelector(".active");
            activeElement.classList.remove("active");
            basemapContainer.classList.add("active");
            map.setStyle(maptilersdk.MapStyle[layerId]);
          });
          basemapContainer.classList.add("hidden");
          this._container.appendChild(basemapContainer);
          if (this._options.initialBasemap.id === layerId) {
              basemapContainer.classList.add("active");
          }
        });
        return this._container;
      }
    
      onRemove(){
        this._container.parentNode?.removeChild(this._container);
        delete this._map;
      }
    }
    
    map.addControl(new layerSwitcherControl({basemaps: baseMaps, initialBasemap: initialStyle}), 'bottom-left');
    ```
    
9.  Create the `styleSwitcherControl` css style. Add the SwitcherControl style to your stylesheet.
    
    ```css
    /*layerSwitcherControl*/
    .maplibregl-ctrl-basemaps {
      display: flex;
      flex-direction: row;
      pointer-events: auto;
      bottom: 15px;
      position: relative;
    }
    .maplibregl-ctrl-basemaps.reverse {
      flex-direction: row-reverse;
    }
    .maplibregl-ctrl-basemaps.column {
      flex-direction: column;
    }
    .maplibregl-ctrl-basemaps.column.reverse {
      flex-direction: column-reverse;
    }
    .maplibregl-ctrl-basemaps .basemap {
      width: 64px;
      height: 64px;
      margin: 2px;
      border: 2px solid #ccc;
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
      cursor: pointer;
    }
    .maplibregl-ctrl-basemaps .basemap.active {
      border-color: orange;
      box-shadow: 2px 2px 4px #000;
    }
    .maplibregl-ctrl-basemaps.closed .basemap {
      display: none;
    }
    .maplibregl-ctrl-basemaps.closed .basemap.active {
      display: block;
      border: 2px solid #ccc;
    }
    ```
    

## Basic JavaScript setup

1.  Copy the following code, paste it into your favorite text editor, and save it as a `.html` file.
    
    ```html
    <!DOCTYPE html>
     <html lang="en">
     <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Display a style switcher control</title>
       <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.2.0/maptiler-sdk.umd.min.js"></script>
       <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.2.0/maptiler-sdk.css" rel="stylesheet" />
       <style>
         body { margin: 0; padding: 0; }
         #map { position: absolute; top: 0; bottom: 0; width: 100%; }
       </style>
     </head>
     <body>
       <div id="map"></div>
       <script>
           maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';      
           const map = new maptilersdk.Map({
             container: 'map', // container's id or the HTML element to render the map
             style: maptilersdk.MapStyle.STREETS,
                
             center: [100.507, 13.7231], // starting position [lng, lat]
             zoom: 10.82, // starting zoom
                
           });
       </script>
     </body>
     </html>
    ```
    
2.  Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/developer/credentials/api-key/#secure-key) before you publish it.
    
3.  The next is up to you. You can center your map wherever you desire (modifying the `starting position`) and set an appropriate zoom level (modifying the `starting zoom`) to match your users’ needs. Additionally, you can change the map’s look (by updating the `source URL`); choose from a range of visually appealing map styles from our extensive [MapTiler standard maps](https://cloud.maptiler.com/maps/), or create your own to truly differentiate your application.
    
4.  Create the list of styles. In the list of styles use as key the ID of the map in [MapTiler](https://cloud.maptiler.com/maps/).
    
    ```js
    const baseMaps = {
       "STREETS": {
         img: "https://cloud.maptiler.com/static/img/maps/streets-v4.png"
       },
       "WINTER": {
         img: "https://cloud.maptiler.com/static/img/maps/winter-v4.png"
       },
       "HYBRID": {
         img: "https://cloud.maptiler.com/static/img/maps/hybrid-v4.png"
       }
     }
    ```
    
5.  Select the initial style from the list and update the map style URL.
    
    ```js
    const initialStyle = maptilersdk.MapStyle[Object.keys(baseMaps)[0]];
    const map = new maptilersdk.Map({
      container: 'map', // container id
      style: initialStyle,
      center: [100.507, 13.7231], // starting position [lng, lat]
      zoom: 10.82 // starting zoom
    });
    ```
    
6.  Create the `styleSwitcherControl` and add it to the map. This code is an adaptation of the [maplibre-gl-basemaps](https://github.com/ka7eh/maplibre-gl-basemaps) plugins.
    
    ```js
    class layerSwitcherControl {
          
      constructor(options) {
        this._options = {...options};
        this._container = document.createElement("div");
        this._container.classList.add("maplibregl-ctrl");
        this._container.classList.add("maplibregl-ctrl-basemaps");
        this._container.classList.add("closed");
        switch (this._options.expandDirection || "right") {
          case "top":
            this._container.classList.add("reverse");
          case "down":
            this._container.classList.add("column");
            break;
          case "left":
            this._container.classList.add("reverse");
          case "right":
            this._container.classList.add("row");
        }
        this._container.addEventListener("mouseenter", () => {
          this._container.classList.remove("closed");
        });
        this._container.addEventListener("mouseleave", () => {
          this._container.classList.add("closed");
        });
      }
    
      onAdd(map) {
        this._map = map;
        const basemaps = this._options.basemaps;
        Object.keys(basemaps).forEach((layerId) => {
          const base = basemaps[layerId];
          const basemapContainer = document.createElement("img");
          basemapContainer.src = base.img;
          basemapContainer.classList.add("basemap");
          basemapContainer.dataset.id = layerId;
          basemapContainer.addEventListener("click", () => {
            const activeElement = this._container.querySelector(".active");
            activeElement.classList.remove("active");
            basemapContainer.classList.add("active");
            map.setStyle(maptilersdk.MapStyle[layerId]);
          });
          basemapContainer.classList.add("hidden");
          this._container.appendChild(basemapContainer);
          if (this._options.initialBasemap.id === layerId) {
              basemapContainer.classList.add("active");
          }
        });
        return this._container;
      }
    
      onRemove(){
        this._container.parentNode?.removeChild(this._container);
        delete this._map;
      }
    }
    
    map.addControl(new layerSwitcherControl({basemaps: baseMaps, initialBasemap: initialStyle}), 'bottom-left');
    ```
    
7.  Create the `styleSwitcherControl` css style. Add the SwitcherControl style to your stylesheet.
    
    ```css
    /*layerSwitcherControl*/
    .maplibregl-ctrl-basemaps {
      display: flex;
      flex-direction: row;
      pointer-events: auto;
      bottom: 15px;
      position: relative;
    }
    .maplibregl-ctrl-basemaps.reverse {
      flex-direction: row-reverse;
    }
    .maplibregl-ctrl-basemaps.column {
      flex-direction: column;
    }
    .maplibregl-ctrl-basemaps.column.reverse {
      flex-direction: column-reverse;
    }
    .maplibregl-ctrl-basemaps .basemap {
      width: 64px;
      height: 64px;
      margin: 2px;
      border: 2px solid #ccc;
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
      cursor: pointer;
    }
    .maplibregl-ctrl-basemaps .basemap.active {
      border-color: orange;
      box-shadow: 2px 2px 4px #000;
    }
    .maplibregl-ctrl-basemaps.closed .basemap {
      display: none;
    }
    .maplibregl-ctrl-basemaps.closed .basemap.active {
      display: block;
      border: 2px solid #ccc;
    }
    ```
    

### Complete source code

```html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Display a style switcher control</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.2.0/maptiler-sdk.umd.min.js"></script>
  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.2.0/maptiler-sdk.css" rel="stylesheet" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }

    /*layerSwitcherControl*/
    .maplibregl-ctrl-basemaps {
      display: flex;
      flex-direction: row;
      pointer-events: auto;
      bottom: 15px;
      position: relative;
    }

    .maplibregl-ctrl-basemaps.reverse {
      flex-direction: row-reverse;
    }

    .maplibregl-ctrl-basemaps.column {
      flex-direction: column;
    }

    .maplibregl-ctrl-basemaps.column.reverse {
      flex-direction: column-reverse;
    }

    .maplibregl-ctrl-basemaps .basemap {
      width: 64px;
      height: 64px;
      margin: 2px;
      border: 2px solid #ccc;
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
      cursor: pointer;
    }

    .maplibregl-ctrl-basemaps .basemap.active {
      border-color: orange;
      box-shadow: 2px 2px 4px #000;
    }

    .maplibregl-ctrl-basemaps.closed .basemap {
      display: none;
    }

    .maplibregl-ctrl-basemaps.closed .basemap.active {
      display: block;
      border: 2px solid #ccc;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    const urlParams = new URLSearchParams(window.location.search); const key = urlParams.get('key') || 'YOUR_MAPTILER_API_KEY_HERE';
    const fallback_key = urlParams.get('fallback_key') || urlParams.get('key');
    const baseMaps = {
      "STREETS": {
        img: "https://cloud.maptiler.com/static/img/maps/streets-v4.png"
      },
      "WINTER": {
        img: "https://cloud.maptiler.com/static/img/maps/winter-v4.png"
      },
      "HYBRID": {
        img: "https://cloud.maptiler.com/static/img/maps/hybrid-v4.png"
      }
    }
    const initialStyle = maptilersdk.MapStyle[Object.keys(baseMaps)[0]];
    maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    const map = new maptilersdk.Map({
      container: 'map', // container's id or the HTML element to render the map
      style: initialStyle,
      center: [100.507, 13.7231], // starting position [lng, lat]
      zoom: 10.82, // starting zoom
    });

    class layerSwitcherControl {

      constructor(options) {
        this._options = { ...options };
        this._container = document.createElement("div");
        this._container.classList.add("maplibregl-ctrl");
        this._container.classList.add("maplibregl-ctrl-basemaps");
        this._container.classList.add("closed");
        switch (this._options.expandDirection || "right") {
          case "top":
            this._container.classList.add("reverse");
          case "down":
            this._container.classList.add("column");
            break;
          case "left":
            this._container.classList.add("reverse");
          case "right":
            this._container.classList.add("row");
        }
        this._container.addEventListener("mouseenter", () => {
          this._container.classList.remove("closed");
        });
        this._container.addEventListener("mouseleave", () => {
          this._container.classList.add("closed");
        });
      }

      onAdd(map) {
        this._map = map;
        const basemaps = this._options.basemaps;
        Object.keys(basemaps).forEach((layerId) => {
          const base = basemaps[layerId];
          const basemapContainer = document.createElement("img");
          basemapContainer.src = base.img;
          basemapContainer.classList.add("basemap");
          basemapContainer.dataset.id = layerId;
          basemapContainer.addEventListener("click", () => {
            const activeElement = this._container.querySelector(".active");
            activeElement.classList.remove("active");
            basemapContainer.classList.add("active");
            map.setStyle(maptilersdk.MapStyle[layerId]);
          });
          basemapContainer.classList.add("hidden");
          this._container.appendChild(basemapContainer);
          if (this._options.initialBasemap.id === layerId) {
            basemapContainer.classList.add("active");
          }
        });
        return this._container;
      }

      onRemove() {
        this._container.parentNode?.removeChild(this._container);
        delete this._map;
      }
    }

    map.addControl(new layerSwitcherControl({ basemaps: baseMaps, initialBasemap: initialStyle }), 'bottom-left');
  </script>
</body>

</html>
```

## Learn more

You can also use your custom maps in the `styleSwitcherControl`. Check out the [How to display your custom map on the web page](../custom-map/) tutorial to learn how to get your map ID.

## Related examples

### [Built-in map styles](https://docs.maptiler.com/sdk-js/examples/built-in-styles/)

Tutorials

Easily create beautiful maps using reliable built-in styles.

### [Change map styles](https://docs.maptiler.com/sdk-js/examples/change-map-styles/)

Tutorials

Switch between built-in and custom map styles dynamically.

### [Switch to dark mode inside tunnels](https://docs.maptiler.com/sdk-js/examples/style-by-tunnel/)

Examples

Change map style to dark mode when entering tunnels.

### [Change a map's language](https://docs.maptiler.com/sdk-js/examples/language-switch/)

Examples

Use setLanguage function to switch languages dynamically.