Map
Display your map.
Simple Demo
Plain HTML
You can find the live Demo on CodeSandbox here.
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
8 href="https://maps-gl.nextbillion.io/maps/v2/api/css"
9 rel="stylesheet"
10 />
11 <style>
12 * {
13 margin: 0;
14 padding: 0;
15 }
16 #map {
17 width: 100vw;
18 height: 100vh;
19 }
20 </style>
21 </head>
22 <body>
23 <div id="map"></div>
24 <script src="https://maps-gl.nextbillion.io/maps/v2/api/js"></script>
25 <script>
26 (function () {
27 // You need to replace the apiKey with yours
28 nextbillion.setApiKey("your-api-key");
29 var nbmap = new nextbillion.maps.Map({
30 container: document.getElementById("map"),
31 style: "https://api.nextbillion.io/maps/streets/style.json",
32 zoom: 11,
33 center: { lat: 34.08572, lng: -118.324569 }
34 });
35
36 nbmap.on("load", function () {
37 // do something after map loaded
38 });
39 })();
40 </script>
41 </body>
42</html>React
You can find the live Demo on CodeSandbox here.
1import React, { useEffect } from 'react'
2import '@nbai/nbmap-gl/dist/nextbillion.css'
3import nextbillion, { NBMap } from '@nbai/nbmap-gl'
4
5const SampleMapDemo = () => {
6 useEffect(() => {
7 // You need to replace the apiKey with yours
8 nextbillion.setApiKey('your-api-key')
9 const nbmap = new NBMap({
10 container: 'map',
11 style: 'https://api.nextbillion.io/maps/streets/style.json',
12 zoom: 11,
13 center: { lat: 34.08572, lng: -118.324569 }
14 })
15 })
16
17 return (
18 <div className="app">
19 <div
20 style={{
21 width: '100%',
22 height: '100%',
23 position: 'fixed',
24 top: '0',
25 left: '0'
26 }}
27 id="map"></div>
28 </div>
29 )
30}
31export default SampleMapDemoMarker
