Popup
Add popups to the map.
Demo
Examples
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 // add a popup
38 const popupOffsets = {
39 top: [0, 0],
40 "top-left": [0, 0]
41 };
42 new nextbillion.maps.Popup({
43 offset: popupOffsets,
44 className: "my-class"
45 })
46 .setLngLat({ lat: 34.08572, lng: -118.324569 })
47 .setHTML("<h1>Hello World!</h1>")
48 .setMaxWidth("300px")
49 .addTo(nbmap.map);
50 });
51 })();
52 </script>
53 </body>
54</html>
55React
You can find the live Demo on CodeSandbox here.
1import React, { useEffect } from 'react'
2import '@nbai/nbmap-gl/dist/nextbillion.css'
3import nextbillion, { NBMap, Popup } from '@nbai/nbmap-gl'
4
5const PopupDemo = () => {
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 const popupOffsets = {
16 top: [0, 0],
17 'top-left': [0, 0]
18 }
19 // add a popup
20 new Popup({
21 offset: popupOffsets,
22 className: 'my-class'
23 })
24 .setLngLat({ lat: 34.08572, lng: -118.324569 })
25 .setHTML('<h1>Hello World!</h1>')
26 .setMaxWidth('300px')
27 .addTo(nbmap.map)
28 })
29
30 return (
31 <div className="app">
32 <div
33 style={{
34 width: '100%',
35 height: '100%',
36 position: 'fixed',
37 top: '0',
38 left: '0'
39 }}
40 id="map"></div>
41 </div>
42 )
43}
44export default PopupDemoMarker
Shape & Symbol
