Overview

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 GL support. All 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.

<!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.apiKey = '123456'
var map = new nextbillion.maps.Map(document.getElementById('map'), {
zoom: 12,
center: { lat: 28.6139, lng: 77.209 },
})
})()
</script>
</body>
</html>