---
title: "Built-in map styles | JavaScript maps SDK"
description: "Easily create beautiful maps using reliable built-in styles."
---

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

# Built-in map styles

Our built-in styles are designed to make it easier for you to create beautiful maps, without the need for extra coding or worrying about outdated versions. To explore the full range of available built-in styles and their variants, please refer to the [list of built-in styles](https://docs.maptiler.com/sdk-js/api/map-styles/#mapstylelist)

This tutorial provides an overview of the built-in styles available and their implementation in map customization. To illustrate this, we have developed a selector tool that allows effortless modification of the map’s style.

By utilizing the pre-existing styles available in our SDK (`maptilersdk.MapStyle`), you can benefit from numerous advantages:

-   Updates to styles: With our built-in styles, any updates made to a particular style will not require you to modify your existing codebase. This ensures that you always have access to the latest version of styles without any hassle.
-   Simplified usage: Our built-in styles are designed to be easily memorable, eliminating the need for manually typing style URLs. Additionally, you no longer have to include the API key in every URL, streamlining the process even further.
-   Enhanced code completion: By utilizing the built-in styles, you can leverage code completion features that significantly reduce typos and other common mistakes. This ensures a smoother and more efficient mapping experience.

Each of our built-in styles is specifically tailored for a particular purpose, such as **street navigation, outdoor adventure, minimalist dashboards**, etc. Furthermore, each style offers a variety of **variants\*** that maintain the same level of information and purpose but differ in terms of color schemes. This allows you to choose the variant that best suits your needs, whether it be a **dark** or **light** color scheme, among others.

## 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: [2.33174, 48.86245], // starting position [lng, lat]
       zoom: 15, // 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.  Change the map style to a hybrid satellite images.
    
    ```js
    map.setStyle(maptilersdk.MapStyle.HYBRID);
    ```
    
7.  Create a selector to change the map style. In this example we will use some of the build-in styles. See the full [list of styles](https://docs.maptiler.com/sdk-js/api/map-styles/#mapstylelist). Copy the following code into your HTML file.
    
    ```html
    <select class="mapstyles-select">
       <optgroup label="Navigation and city exploration">
         <option value="STREETS">STREETS</option>
         <option value="STREETS.DARK">STREETS.DARK</option>
         <option value="STREETS.LIGHT">STREETS.LIGHT</option>
         <option value="STREETS.PASTEL">STREETS.PASTEL</option>
       </optgroup>
       <option value="OUTDOOR">OUTDOOR</option>
       <option value="WINTER">WINTER</option>
       <option value="SATELLITE">SATELLITE</option>
       <option value="HYBRID" selected>HYBRID</option>
       <optgroup label="Data visualization">
         <option value="DATAVIZ">DATAVIZ</option>
         <option value="DATAVIZ.DARK">DATAVIZ.DARK</option>
         <option value="DATAVIZ.LIGHT">DATAVIZ.LIGHT</option>
       </optgroup>
     </select>
    ```
    
8.  Change the style when the user select one style.
    
    ```js
    document.querySelector('.mapstyles-select').addEventListener('change', (e) => {
       const style_code = e.target.value.split(".");
       style_code.length === 2 ? map.setStyle(maptilersdk.MapStyle[style_code[0]][style_code[1]]) : map.setStyle(maptilersdk.MapStyle[style_code[0]]); 
     });
    ```
    
9.  Create the layer selector style. Add the selector style to your stylesheet.
    
    ```css
    .mapstyles-select {
       position: relative;
       top: 5px;
       left: 5px;
       z-index: 1000;
     }
    ```
    

## 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>How to use the built-in map styles</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: [2.33174, 48.86245], // starting position [lng, lat]
             zoom: 15, // 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.  Change the map style to a hybrid satellite images.
    
    ```js
    map.setStyle(maptilersdk.MapStyle.HYBRID);
    ```
    
5.  Create a selector to change the map style. In this example we will use some of the build-in styles. See the full [list of styles](https://docs.maptiler.com/sdk-js/api/map-styles/#mapstylelist). Copy the following code into your HTML file.
    
    ```html
    <select class="mapstyles-select">
       <optgroup label="Navigation and city exploration">
         <option value="STREETS">STREETS</option>
         <option value="STREETS.DARK">STREETS.DARK</option>
         <option value="STREETS.LIGHT">STREETS.LIGHT</option>
         <option value="STREETS.PASTEL">STREETS.PASTEL</option>
       </optgroup>
       <option value="OUTDOOR">OUTDOOR</option>
       <option value="WINTER">WINTER</option>
       <option value="SATELLITE">SATELLITE</option>
       <option value="HYBRID" selected>HYBRID</option>
       <optgroup label="Data visualization">
         <option value="DATAVIZ">DATAVIZ</option>
         <option value="DATAVIZ.DARK">DATAVIZ.DARK</option>
         <option value="DATAVIZ.LIGHT">DATAVIZ.LIGHT</option>
       </optgroup>
     </select>
    ```
    
6.  Change the style when the user select one style.
    
    ```js
    document.querySelector('.mapstyles-select').addEventListener('change', (e) => {
       const style_code = e.target.value.split(".");
       style_code.length === 2 ? map.setStyle(maptilersdk.MapStyle[style_code[0]][style_code[1]]) : map.setStyle(maptilersdk.MapStyle[style_code[0]]); 
     });
    ```
    
7.  Create the layer selector style. Add the selector style to your stylesheet.
    
    ```css
    .mapstyles-select {
       position: relative;
       top: 5px;
       left: 5px;
       z-index: 1000;
     }
    ```
    

### Complete source code

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

<head>
  <meta charset="utf-8" />
  <title>Display a map</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%;
    }

    #mapstyles {
      position: relative;
      top: 5px;
      left: 5px;
      z-index: 1000;
    }
  </style>
</head>

<body>
  <div id="map">
    <select name="mapstyles" id="mapstyles" class="form-select mapstyles-select">
      <optgroup label="Navigation and city exploration">
        <option value="STREETS">STREETS</option>
        <option value="STREETS.DARK">STREETS.DARK</option>
        <option value="STREETS.LIGHT">STREETS.LIGHT</option>
        <option value="STREETS.PASTEL">STREETS.PASTEL</option>
      </optgroup>
      <option value="OUTDOOR">OUTDOOR</option>
      <option value="WINTER">WINTER</option>
      <option value="SATELLITE">SATELLITE</option>
      <option value="HYBRID" selected>HYBRID</option>
      <optgroup label="Data visualization">
        <option value="DATAVIZ">DATAVIZ</option>
        <option value="DATAVIZ.DARK">DATAVIZ.DARK</option>
        <option value="DATAVIZ.LIGHT">DATAVIZ.LIGHT</option>
      </optgroup>
      <optgroup label="Minimalist and general purpose">
        <option value="BASIC">BASIC</option>
        <option value="BASIC.DARK">BASIC.DARK</option>
        <option value="BASIC.LIGHT">BASIC.LIGHT</option>
      </optgroup>
      <optgroup label="High contrast navigation">
        <option value="BRIGHT">BRIGHT</option>
        <option value="BRIGHT.DARK">BRIGHT.DARK</option>
        <option value="BRIGHT.LIGHT">BRIGHT.LIGHT</option>
        <option value="BRIGHT.PASTEL">BRIGHT.PASTEL</option>
      </optgroup>
      <optgroup label="Topographic study">
        <option value="TOPO">TOPO</option>
        <option value="TOPO.SHINY">TOPO.SHINY</option>
        <option value="TOPO.PASTEL">TOPO.PASTEL</option>
        <option value="TOPO.TOPOGRAPHIQUE">TOPO.TOPOGRAPHIQUE</option>
      </optgroup>
      <optgroup label="Minimalist">
        <option value="VOYAGER">VOYAGER</option>
        <option value="VOYAGER.DARK">VOYAGER.DARK</option>
        <option value="VOYAGER.LIGHT">VOYAGER.LIGHT</option>
        <option value="VOYAGER.VINTAGE">VOYAGER.VINTAGE</option>
      </optgroup>
      <optgroup label="High contrast">
        <option value="TONER">TONER</option>
        <option value="TONER.BACKGROUND">TONER.BACKGROUND</option>
        <option value="TONER.LITE">TONER.LITE</option>
        <option value="TONER.LINES">TONER.LINES</option>
      </optgroup>
      <optgroup label="Neutral greyscale style with hillshading">
        <option value="BACKDROP">BACKDROP</option>
        <option value="BACKDROP.DARK">BACKDROP.DARK</option>
        <option value="BACKDROP.LIGHT">BACKDROP.LIGHT</option>
      </optgroup>
      <option value="OPENSTREETMAP">OPENSTREETMAP</option>
    </select>
  </div>
  <script>
    maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    const map = new maptilersdk.Map({
      container: 'map', // container id
      style: maptilersdk.MapStyle.HYBRID,
      center: [2.33174, 48.86245], // starting position [lng, lat]
      zoom: 15, // starting zoom
    });
    document.getElementById('mapstyles').addEventListener('change', (e) => {
      const style_code = e.target.value.split(".");
      style_code.length === 2 ? map.setStyle(maptilersdk.MapStyle[style_code[0]][style_code[1]]) : map.setStyle(maptilersdk.MapStyle[style_code[0]]); 
    });
  </script>
</body>

</html>
```

## Learn more

If you want to add a custom map style to the list of styles see this example [Change map styles](../change-map-styles/).

Check out this tutorial [How to display a style switcher control](../control-style-switcher/) to learn how to create a visual style switcher control.

## Related examples

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

Tutorials

Switch between built-in and custom map styles dynamically.

### [Style switcher](https://docs.maptiler.com/sdk-js/examples/control-style-switcher/)

Tutorials

Add a style switcher control to your map.

### [Set dark mode based on system settings](https://docs.maptiler.com/sdk-js/examples/style-by-settings/)

Examples

Switch map light/dark mode based on system color settings.

### [Set map language](https://docs.maptiler.com/sdk-js/examples/language-map/)

Tutorials

This tutorial shows how to change the default map labels language.