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>
53Add a Popup
