Switch Theme

A newer version of Maps for web SDK is available

A newer version of the SDK is available and is recommended for all users. Learn about the latest version, V2.0, in the Maps for web v2.0 documentation

NextBillion.ai Maps comes with a built-in dark theme that you can use directly.

Please note as a side effect of changing a theme, it will clear all the shapes drawn on the map. Markers, Popups or Tooltips are not affected.

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>NBMap Basic Example</title>
6
    <link href="https://maps-gl.nextbillion.io/maps/api/css" rel="stylesheet" />
7
    <style>
8
      * {
9
        margin: 0;
10
        padding: 0;
11
      }
12
      #map {
13
        width: 100vw;
14
        height: 100vh;
15
      }
16
      #toggle-btn {
17
        position: absolute;
18
        top: 20px;
19
        right: 20px;
20
        padding: 12px;
21
        z-index: 99;
22
      }
23
    </style>
24
  </head>
25
  <body>
26
    <button id="toggle-btn">Toggle Theme</button>
27

28
    <div id="map"></div>
29
    <script src="https://maps-gl.nextbillion.io/maps/api/js"></script>
30
    <script>
31
      (function () {
32
        let theme = "dark";
33
        nextbillion.apiKey = "db20c37e79d4420f9b2f71a766cacb91";
34
        var map = new nextbillion.maps.Map(document.getElementById("map"), {
35
          zoom: 12,
36
          center: { lat: 28.6139, lng: 77.209 },
37
          theme: theme
38
        });
39

40
        // alternatively, you can change the theme on the fly
41
        document.getElementById("toggle-btn").onclick = function () {
42
          if (theme === "light") {
43
            theme = "dark";
44
          } else {
45
            theme = "light";
46
          }
47
          map.setTheme(theme);
48
        };
49
      })();
50
    </script>
51
  </body>
52
</html>
53