Map

A newer version of Maps for web SDK is available

A newer version of the SDK is available and is recommended for all users. Learn about the latest version, V2.0, in the Maps for web v2.0 documentation

Creates a map instance.

Parameters

Name	Description
center	`optional` Defines the initial center of the map view. Example: `{ lat: 28.6139, lng: 77.209 }` `Default: {lat: 28.5934, lng: 77.2223}`
zoom	`optional` Defines the initial zoom level of the map view. Example: `12` `Default: 12`
theme	`optional` Defines the initial theme of the map view. Currently supported values are `dark` and `light`. `Default: 'light'`
vectorTilesSourceUrl	`optional` Defines the initial vector tiles source URL. You can use a third-party or your custom tiles service to render the map. Example: `vectorTilesSourceUrl: 'https://example.com/your-source.json'` `Default: NextBillion.ai Maps built-in tiles service`

Methods

Set Theme

To switch a theme of a map instance.

1
setTheme(name: string)

Example

1
var map = new nextbillion.maps.Map(document.getElementById('map'), {
2
  zoom: 12,
3
  center: { lat: 28.6139, lng: 77.239 },
4
  theme: 'light',
5
  vectorTilesSourceUrl: 'https://example.com/your-source.json',
6
})
7

8
// To switch a theme
9
map.setTheme('dark')

Set Vector Tiles Source

To switch a vector tiles source of a map instance.

1
setSource(url: string)

Example

1
var map = new nextbillion.maps.Map(document.getElementById('map'), {
2
  zoom: 12,
3
  center: { lat: 28.6139, lng: 77.239 },
4
  theme: 'light',
5
  vectorTilesSourceUrl: 'https://example.com/your-source.json',
6
})
7

8
// To switch a vector tiles source
9
map.setSource('https://example.com/alternative-source.json')

Fly To

Move to a different location, zoom level, bearing or pitch with animated transition.

1
map.flyTo(options)

Example

1
var map = new nextbillion.maps.Map(document.getElementById('map'), {
2
  zoom: 12,
3
  center: { lat: 28.6139, lng: 77.239 },
4
})
5

6
map.flyTo({
7
  center: { lat: 36.0671, lng: 120.3826 },
8
  zoom: 16,
9
  speed: 1.5,
10
  curve: 0.8,
11
})