Skip to main content

Overview

Introduction

The Next Billion 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 Next Billion 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.

Upgrade to Next Billion Maps GL

The latest Next Billion Maps has brought WebGL support, built-in and custom vector tiles, map API and a lot of great features. The services will require an API Key to work. Please refer to the page Get an API Key for more information.

You can find a detailed "how-to" documentation on the Upgrade Guide page.

Hello, World

Below is a basic map generated with Next Billion Maps. It positions at New Delhi with a zoom level of 12. Try dragging and scrolling on it!

Installation

From CDN

You can enjoy Next Billion Maps SDK's features with our CDN. One of the great things is that if the visitor to your web site has already downloaded Next Billion Maps, it won't have to be re-downloaded.

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0" />
<meta charset="UTF-8" />
<title>Basic Map</title>
<link href="https://maps-gl.nextbillion.io/maps/api/css" rel="stylesheet" />
<!-- Or use the legacy version: -->
<!-- <link href="https://maps.nextbillion.io/maps/api/css" rel="stylesheet"> -->
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://maps-gl.nextbillion.io/maps/api/js"></script>
<!-- Or use the legacy version: -->
<!-- <script src="https://maps.nextbillion.io/maps/api/js"></script> -->
<script>
;(function () {
// To use NextBillion Maps GL, an apiKey is required.
// You don't need to provide an apiKey for the legacy version of
// NextBillion Maps.
nextbillion.setApiKey('your-api-key')
var map = new nextbillion.maps.Map(document.getElementById('map'), {
zoom: 12,
center: { lat: 28.6139, lng: 77.209 },
})
})()
</script>
</body>
</html>

From NPM

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

npm install nbmap-gl

Or if you prefer the yarn command:

yarn add nbmap-gl

This will install Next Billion 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 Next Billion Maps like this:

App.js
import React, { useEffect } from 'react'
import nextbillion from 'nbmap-gl'
import 'nbmap-gl/dist/nextbillion.css'
import './App.css'

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

function App() {
useEffect(() => {
new nextbillion.maps.Map(document.getElementById('map'), {
zoom: 12,
center: { lat: 28.6139, lng: 77.209 },
})
}, [])
return <div id='map'></div>
}

export default App
App.css
* {
margin: 0;
padding: 0;
}

#map {
width: 100vw;
height: 100vh;
}
DIDN’T FIND WHAT YOU LOOKING FOR?