Draw Some Shapes

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 support drawing some shapes in the map. Checkout the Circle / Polygon / Polyline API to learn more.

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
    <!-- Or use the legacy version: -->
9
    <!-- <link href="https://maps.nextbillion.io/maps/api/css" rel="stylesheet"> -->
10
    <style>
11
      * {
12
        margin: 0;
13
        padding: 0;
14
      }
15
      #map {
16
        width: 100vw;
17
        height: 100vh;
18
      }
19
    </style>
20
  </head>
21
  <body>
22
    <div id="map"></div>
23
    <script src="https://maps-gl.nextbillion.io/maps/api/js"></script>
24
    <!-- Or use the legacy version: -->
25
    <!-- <script src="https://maps.nextbillion.io/maps/api/js"></script> -->
26
    <script>
27
      ;(function () {
28
        var loc = { lat: 28.6521, lng: 77.2198 }
29
        var loc2 = { lat: 28.6921, lng: 77.2198 }
30
        var loc3 = { lat: 28.6921, lng: 77.2798 }
31
        var loc4 = { lat: 28.6721, lng: 77.2298 }
32
        nextbillion.apiKey = 'your-api-key'
33
        var map = new nextbillion.maps.Map(document.getElementById('map'), {
34
          zoom: 11,
35
          center: loc4,
36
        })
37
        var polygon = new nextbillion.maps.Polygon({
38
          // You need to wrap path's value with an extra pair of square brackets
39
          // if you're using NextBillion.ai Maps legacy version. For example:
40
          // path: [[loc, loc2, loc3]],
41
          path: [loc, loc2, loc3],
42
          map: map,
43
        })
44
        var polyline = new nextbillion.maps.Polyline({
45
          path: [
46
            [loc, loc4],
47
            [loc2, loc4],
48
            [loc3, loc4],
49
          ],
50
          strokeColor: 'yellow',
51
          map: map,
52
        })
53
        var circle = new nextbillion.maps.Circle({
54
          center: loc4,
55
          map: map,
56
          strokeColor: 'green',
57
          fillColor: 'green',
58
          radius: 10,
59
        })
60
      })()
61
    </script>
62
  </body>
63
</html>