Get Started
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. 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.
Please note, you'll have to use your API key to run the code below
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/v2/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/v2/api/js"></script>
22 <script>
23 ;(function () {
24 // To use NextBillion Maps GL, an apiKey is required.
25 nextbillion.setApiKey('your-api-key')
26 var map = new nextbillion.maps.Map({
27 container: document.getElementById('map'),
28 style: "https://api.nextbillion.io/maps/streets/style.json",
29 zoom: 12,
30 center: { lat: 34.08572, lng: -118.324569 }
31 })
32 })()
33 </script>
34 </body>
35</html>From NPM
NextBillion.ai Maps is also available as an NPM package. You can install it with the npm command:
1npm install @nbai/nbmap-glOr if you prefer the yarn command:
1yarn add @nbai/nbmap-glThis will install NextBillion.ai Maps to the node_modules folder. You will find all released JavaScript, map and CSS files in node_modules/@nbai/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(replace your-api-key with your own API key):
1import React, { useEffect } from 'react'
2import nextbillion, { NBMap } from '@nbai/nbmap-gl'
3// import the css of the map
4import '@nbai/nbmap-gl/dist/nextbillion.css'
5import './App.css'
6
7// set your nextbillion api key
8nextbillion.setApiKey('your-api-key')
9
10function App() {
11 useEffect(() => {
12 new NBMap({
13 container: 'map',
14 zoom: 12,
15 style: 'https://api.nextbillion.io/maps/streets/style.json',
16 center: { lat: 34.08572, lng: -118.324569 },
17 })
18 }, [])
19 return (
20 <div
21 id='map'
22 style={{
23 width: "100%",
24 height: "100%",
25 position: "fixed",
26 top: "0",
27 left: "0",
28 }}>
29 </div>
30 )
31}
32
33export default App