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;
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
        // draw a polyline
28
        function drawPolyline(nbmap) {
29
          nbmap.map.addSource("polyline-source", {
30
            type: "geojson",
31
            data: {
32
              type: "FeatureCollection",
33
              features: [
34
                {
35
                  type: "Feature",
36
                  properties: {
37
                    color: "#e74747" // red clolor
38
                  },
39
                  geometry: {
40
                    type: "LineString",
41
                    coordinates: [
42
                      [-118.24648, 34.05815],
43
                      [-118.24556, 34.05739],
44
                      [-118.2445, 34.0565],
45
                      [-118.24397, 34.05605],
46
                      [-118.24359, 34.05573],
47
                      [-118.24372, 34.05559],
48
                      [-118.24385, 34.05544],
49
                      [-118.24427, 34.05501],
50
                      [-118.24509, 34.05412],
51
                      [-118.24555, 34.05361]
52
                    ]
53
                  }
54
                },
55
                {
56
                  type: "Feature",
57
                  properties: {
58
                    color: "#93a1ff" // blue clolor
59
                  },
60
                  geometry: {
61
                    type: "LineString",
62
                    coordinates: [
63
                      [-118.24648, 34.05815],
64
                      [-118.24748, 34.05725],
65
                      [-118.24763, 34.05712],
66
                      [-118.24797, 34.05678],
67
                      [-118.24823, 34.05641],
68
                      [-118.24836, 34.05623],
69
                      [-118.24874572, 34.05567155],
70
                      [-118.24637, 34.05417],
71
                      [-118.24571, 34.05376],
72
                      [-118.24553, 34.05363],
73
                      [-118.24555, 34.05361]
74
                    ]
75
                  }
76
                }
77
              ]
78
            }
79
          });
80


81
          // you can get more information about setting the style of lines here. https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
82
          nbmap.map.addLayer({
83
            id: "polyline-layer",
84
            type: "line",
85
            source: "polyline-source",
86
            paint: {
87
              "line-width": 3,
88
              // get color from the source
89
              "line-color": ["get", "color"]
90
            }
91
          });
92
        }
93


94
        // draw a polygon
95
        function drawPolygon(nbmap) {
96
          nbmap.map.addSource("polygon-source", {
97
            type: "geojson",
98
            data: {
99
              type: "FeatureCollection",
100
              features: [
101
                {
102
                  type: "Feature",
103
                  geometry: {
104
                    type: "Polygon",
105
                    coordinates: [
106
                      [
107
                        [-118.24455192, 34.05649731],
108
                        [-118.24646327, 34.05811205],
109
                        [-118.24751855, 34.05716641],
110
                        [-118.2479062, 34.05678279],
111
                        [-118.24834231, 34.05621183],
112
                        [-118.24870843, 34.05567655],
113
                        [-118.24661649, 34.05436717],
114
                        [-118.24455192, 34.05649731]
115
                      ]
116
                    ]
117
                  }
118
                }
119
              ]
120
            }
121
          });
122


123
          // you can get more information about setting the style of layers here. https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/
124
          nbmap.map.addLayer({
125
            id: "polygon-layer",
126
            type: "fill",
127
            source: "polygon-source",
128
            paint: {
129
              // fill with green color and a opacity of 0.6
130
              "fill-color": "#469300",
131
              "fill-opacity": 0.6
132
            }
133
          });
134
        }
135


136
        // draw a circle
137
        function drawCircle(nbmap) {
138
          nbmap.map.addSource("circle-source", {
139
            type: "geojson",
140
            data: {
141
              type: "FeatureCollection",
142
              features: [
143
                {
144
                  type: "Feature",
145
                  geometry: {
146
                    type: "Point",
147
                    coordinates: [-118.24501946, 34.05507342]
148
                  }
149
                }
150
              ]
151
            }
152
          });
153
          // you can get more information about setting the style of layers here. https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
154
          nbmap.map.addLayer({
155
            id: "circle-layer",
156
            type: "circle",
157
            source: "circle-source",
158
            paint: {
159
              "circle-color": "#8d5a9e",
160
              "circle-radius": 40
161
            }
162
          });
163
        }
164


165
        // draw symbol
166
        function drawSymbol(nbmap) {
167
          nbmap.map.addSource("symbol-source", {
168
            type: "geojson",
169
            data: {
170
              type: "FeatureCollection",
171
              features: [
172
                {
173
                  type: "Feature",
174
                  geometry: {
175
                    type: "Point",
176
                    coordinates: [-118.24501946, 34.05507342]
177
                  }
178
                }
179
              ]
180
            }
181
          });
182
          // you can get more information about setting the style of layers here. https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#symbol
183
          nbmap.map.addLayer({
184
            id: "symbol-layer",
185
            type: "symbol",
186
            source: "symbol-source",
187
            layout: {
188
              "symbol-placement": "point",
189
              visibility: "visible",
190
              "symbol-spacing": 1,
191
              "icon-allow-overlap": true,
192
              "icon-image": "nb-logo",
193
              "icon-size": 0.16
194
            }
195
          });
196
        }
197


198
        // You need to replace the apiKey with yours
199
        nextbillion.setApiKey("your-api-key");
200
        var nbmap = new nextbillion.maps.Map({
201
          container: document.getElementById("map"),
202
          style: "https://api.nextbillion.io/maps/streets/style.json",
203
          zoom: 15,
204
          center: { lat: 34.05649731, lng: -118.24455192 }
205
        });
206


207
        nbmap.on("load", () => {
208
          drawPolyline(nbmap);
209
          drawPolygon(nbmap);
210
          drawCircle(nbmap);
211
          // load image so we can use it in the symbol layer
212
          nbmap.map.loadImage(
213
            "https://static.nextbillion.io/docs-next/nbai-logo-white.png",
214
            (err, image) => {
215
              if (err) {
216
                console.error("err image", err);
217
                return;
218
              }
219
              nbmap.map.addImage("nb-logo", image);
220
              drawSymbol(nbmap);
221
            }
222
          );
223
        });
224
      })();
225
    </script>
226
  </body>
227
</html>

React

You can find the live Demo on CodeSandbox here.

1
import React, { useEffect } from 'react'
2
import '@nbai/nbmap-gl/dist/nextbillion.css'
3
import nextbillion, { NBMap } from '@nbai/nbmap-gl'
4


5
// draw a polyline
6
function 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',
19
            coordinates: [
20
              [-118.24648, 34.05815],
21
              [-118.24556, 34.05739],
22
              [-118.2445, 34.0565],
23
              [-118.24397, 34.05605],
24
              [-118.24359, 34.05573],
25
              [-118.24372, 34.05559],
26
              [-118.24385, 34.05544],
27
              [-118.24427, 34.05501],
28
              [-118.24509, 34.05412],
29
              [-118.24555, 34.05361]
30
            ]
31
          }
32
        },
33
        {
34
          type: 'Feature',
35
          properties: {
36
            color: '#93a1ff' // blue clolor
37
          },
38
          geometry: {
39
            type: 'LineString',
40
            coordinates: [
41
              [-118.24648, 34.05815],
42
              [-118.24748, 34.05725],
43
              [-118.24763, 34.05712],
44
              [-118.24797, 34.05678],
45
              [-118.24823, 34.05641],
46
              [-118.24836, 34.05623],
47
              [-118.24874572, 34.05567155],
48
              [-118.24637, 34.05417],
49
              [-118.24571, 34.05376],
50
              [-118.24553, 34.05363],
51
              [-118.24555, 34.05361]
52
            ]
53
          }
54
        }
55
      ]
56
    }
57
  })
58


59
  // you can get more information about setting the style of lines here. https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
60
  nbmap.map.addLayer({
61
    id: 'polyline-layer',
62
    type: 'line',
63
    source: 'polyline-source',
64
    paint: {
65
      'line-width': 3,
66
      // get color from the source
67
      'line-color': ['get', 'color']
68
    }
69
  })
70
}
71


72
// draw a polygon
73
function drawPolygon(nbmap) {
74
  nbmap.map.addSource('polygon-source', {
75
    type: 'geojson',
76
    data: {
77
      type: 'FeatureCollection',
78
      features: [
79
        {
80
          type: 'Feature',
81
          geometry: {
82
            type: 'Polygon',
83
            coordinates: [
84
              [
85
                [-118.24455192, 34.05649731],
86
                [-118.24646327, 34.05811205],
87
                [-118.24751855, 34.05716641],
88
                [-118.2479062, 34.05678279],
89
                [-118.24834231, 34.05621183],
90
                [-118.24870843, 34.05567655],
91
                [-118.24661649, 34.05436717],
92
                [-118.24455192, 34.05649731]
93
              ]
94
            ]
95
          }
96
        }
97
      ]
98
    }
99
  })
100


101
  // you can get more information about setting the style of layers here. https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/
102
  nbmap.map.addLayer({
103
    id: 'polygon-layer',
104
    type: 'fill',
105
    source: 'polygon-source',
106
    paint: {
107
      // fill with green color and a opacity of 0.6
108
      'fill-color': '#469300',
109
      'fill-opacity': 0.6
110
    }
111
  })
112
}
113


114
// draw a circle
115
function drawCircle(nbmap) {
116
  nbmap.map.addSource('circle-source', {
117
    type: 'geojson',
118
    data: {
119
      type: 'FeatureCollection',
120
      features: [
121
        {
122
          type: 'Feature',
123
          geometry: {
124
            type: 'Point',
125
            coordinates: [-118.24501946, 34.05507342]
126
          }
127
        }
128
      ]
129
    }
130
  })
131
  // you can get more information about setting the style of layers here. https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
132
  nbmap.map.addLayer({
133
    id: 'circle-layer',
134
    type: 'circle',
135
    source: 'circle-source',
136
    paint: {
137
      'circle-color': '#8d5a9e',
138
      'circle-radius': 40
139
    }
140
  })
141
}
142


143
// draw symbol
144
function drawSymbol(nbmap) {
145
  nbmap.map.addSource('symbol-source', {
146
    type: 'geojson',
147
    data: {
148
      type: 'FeatureCollection',
149
      features: [
150
        {
151
          type: 'Feature',
152
          geometry: {
153
            type: 'Point',
154
            coordinates: [-118.24501946, 34.05507342]
155
          }
156
        }
157
      ]
158
    }
159
  })
160
  // you can get more information about setting the style of layers here. https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#symbol
161
  nbmap.map.addLayer({
162
    id: 'symbol-layer',
163
    type: 'symbol',
164
    source: 'symbol-source',
165
    layout: {
166
      'symbol-placement': 'point',
167
      visibility: 'visible',
168
      'symbol-spacing': 1,
169
      'icon-allow-overlap': true,
170
      'icon-image': 'nb-logo',
171
      'icon-size': 0.16
172
    }
173
  })
174
}
175


176
const DrawDemo = () => {
177
  useEffect(() => {
178
    nextbillion.setApiKey('your-api-key')
179
    const nbmap = new NBMap({
180
      container: 'map',
181
      style: 'https://api.nextbillion.io/maps/streets/style.json',
182
      zoom: 15,
183
      center: { lat: 34.05649731, lng: -118.24455192 }
184
    })
185


186
    nbmap.on('load', () => {
187
      drawPolyline(nbmap)
188
      drawPolygon(nbmap)
189
      drawCircle(nbmap)
190
      // load image so we can use it in the symbol layer
191
      nbmap.map.loadImage(
192
        'https://static.nextbillion.io/docs-next/nbai-logo-white.png',
193
        (err, image) => {
194
          if (err) {
195
            console.error('err image', err)
196
            return
197
          }
198
          nbmap.map.addImage('nb-logo', image)
199
          drawSymbol(nbmap)
200
        }
201
      )
202
    })
203
  }, [])
204


205
  return (
206
    <div className="app">
207
      <div
208
        style={{
209
          width: '100%',
210
          height: '100%',
211
          position: 'fixed',
212
          top: '0',
213
          left: '0'
214
        }}
215
        id="map"></div>
216
    </div>
217
  )
218
}
219
export default DrawDemo
PRODUCTS
SOLUTIONS
COMPARE
DEVELOPERS
GUIDES
RESOURCES
COMPANY
logo
UNITED STATES

NEXTBILLION.AI, INC.
21 E State Street,
Suite 200,
Columbus, OH 43215

SINGAPORE

#32-01, 80 Raffles Place, UOB Plaza,
Singapore, 048624

© 2024 NextBillion.ai all rights reserved.

Privacy PolicyTerms of ServiceSLASupport Services Agreement