• Optimization
  • Navigation
  • Tracking
  • Maps
  • Places

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;

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, 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 }


Have Questions ?