Further Customization

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

Since we didn't provide flexible enough ability to customize popup, tooltips, marker, roads. (Which we are already working on in the next version) We'd like to introduce a way to do the customization in the current version.

Mapbox

NextBillion.ai Maps is built on top of the [email protected], So it's easy for you to do the further customization with mapbox.js. However, you need to avoid using APIs that are only supported by Mapbox2.0+.

Example

You can get the mabox map instance and use it like this:

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta name="viewport" content="initial-scale=1.0" />
5
    <meta charset="UTF-8" />
6
    <title>Basic Map</title>
7
    <link href="https://maps-gl.nextbillion.io/maps/api/css" rel="stylesheet" />
8
    <style>
9
      * {
10
        margin: 0;
11
        padding: 0;
12
      }
13
      #map {
14
        width: 100vw;
15
        height: 100vh;
16
      }
17
    </style>
18
  </head>
19
  <body>
20
    <div id="map"></div>
21
    <script src="https://maps-gl.nextbillion.io/maps/api/js"></script>
22
    <script>
23
      nextbillion.apiKey = "your-api-key";
24
      var nbMap = new nextbillion.maps.Map(document.getElementById("map"), {
25
        zoom: 11,
26
        center: { lat: 1.3521, lng: 103.8198 }
27
      });
28
      // get the map instance of mapbox
29
      var mapBoxMap = nbMap.map;
30
      // draw an image with mapbox
31
      mapBoxMap.on("load", function () {
32
        mapBoxMap.loadImage("some-image-url", (error, image) => {
33
          if (error) throw error;
34
          // Add the image to the map style.
35
          mapBoxMap.addImage("some-image", image);
36
          // Add a data source
37
          mapBoxMap.addSource("point", {
38
            type: "geojson",
39
            data: {
40
              type: "FeatureCollection",
41
              features: [
42
                {
43
                  type: "Feature",
44
                  geometry: {
45
                    type: "Point",
46
                    coordinates: [103.8198, 1.4521]
47
                  }
48
                }
49
              ]
50
            }
51
          });
52
          // Add a layer to show the source
53
          mapBoxMap.addLayer({
54
            id: "points",
55
            type: "symbol",
56
            source: "point",
57
            layout: {
58
              "icon-image": "some-image",
59
              "icon-size": 0.4
60
            }
61
          });
62
        });
63
      });
64
    </script>
65
  </body>
66
</html>
67