• Optimization
  • Navigation
  • Tracking
  • Maps
  • Places

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>NBMap Basic Example</title>
    <link href="https://maps-gl.nextbillion.io/maps/api/css" rel="stylesheet" />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
      #toggle-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 12px;
        z-index: 99;
      }
    </style>
  </head>
  <body>
    <button id="toggle-btn">Toggle Theme</button>

    <div id="map"></div>
    <script src="https://maps-gl.nextbillion.io/maps/api/js"></script>
    <script>
      (function () {
        let theme = "dark";
        nextbillion.apiKey = "db20c37e79d4420f9b2f71a766cacb91";
        var map = new nextbillion.maps.Map(document.getElementById("map"), {
          zoom: 12,
          center: { lat: 28.6139, lng: 77.209 },
          theme: theme
        });

        // alternatively, you can change the theme on the fly
        document.getElementById("toggle-btn").onclick = function () {
          if (theme === "light") {
            theme = "dark";
          } else {
            theme = "light";
          }
          map.setTheme(theme);
        };
      })();
    </script>
  </body>
</html>