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>
67Tooltip
