Get Started

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

Introduction

The NextBillion.ai Maps provides a JavaScript library to render interactive maps that display raster or vector tiles, markers, static and dynamic graphic elements for your mapping and visualization needs. It is part of NextBillion.ai Maps platform, which provides hyper local geospatial AI in our mapping eco-system, including Routing and ETAs, Location Management, Map Production and Maintenance, and much more.

Hello, World

Below is a basic map generated with NextBillion.ai Maps. It positions at Los Angeles with a zoom level of 10. Try dragging and scrolling on it!

Installation

From CDN

You can use NextBillion.ai Maps SDK's features with our CDN. If the visitor to your web site has already downloaded NextBillion.ai Maps, it won't have to be re-downloaded.

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
        // To use NextBillion Maps GL, an apiKey is required.
29
        // You don't need to provide an apiKey for the legacy version of
30
        // NextBillion Maps.
31
        nextbillion.setApiKey('your-api-key')
32
        var map = new nextbillion.maps.Map(document.getElementById('map'), {
33
          zoom: 12,
34
          center: { lat: 28.6139, lng: 77.209 },
35
        })
36
      })()
37
    </script>
38
  </body>
39
</html>

From NPM

NextBillion.ai Maps is also available as an NPM package. You can install it with the npm command:

1
npm install nbmap-gl

Or if you prefer the yarn command:

1
yarn add nbmap-gl

This will install NextBillion.ai Maps to the node_modules folder. You will find all released JavaScript, map and CSS files in node_modules/nbmap-gl/dist.

In your project, taking a React.js one created with create-react-app for example, you can use NextBillion.ai Maps like this:

1
import React, { useEffect } from 'react'
2
import nextbillion from 'nbmap-gl'
3
import 'nbmap-gl/dist/nextbillion.css'
4
import './App.css'
5

6
nextbillion.setApiKey('your-api-key')
7

8
function App() {
9
  useEffect(() => {
10
    new nextbillion.maps.Map(document.getElementById('map'), {
11
      zoom: 12,
12
      center: { lat: 28.6139, lng: 77.209 },
13
    })
14
  }, [])
15
  return <div id='map'></div>
16
}
17

18
export default App

1
* {
2
  margin: 0;
3
  padding: 0;
4
}
5

6
#map {
7
  width: 100vw;
8
  height: 100vh;
9
}