• Optimization
  • Navigation
  • Tracking
  • Maps
  • Places

Shape & Symbol

Draw different shapes and symbol to the map.

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;

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
5// draw a polyline
6function drawPolyline(nbmap) {
7 nbmap.map.addSource('polyline-source', {
8 type: 'geojson',
9 data: {
10 type: 'FeatureCollection',
11 features: [
12 {
13 type: 'Feature',
14 properties: {
15 color: '#e74747' // red clolor
16 },
17 geometry: {
18 type: 'LineString',


Have Questions ?