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: 12Default: 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.
1setTheme(name: string)Example
1var 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
9map.setTheme('dark')Set Vector Tiles Source
To switch a vector tiles source of a map instance.
1setSource(url: string)Example
1var 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
9map.setSource('https://example.com/alternative-source.json')Fly To
Move to a different location, zoom level, bearing or pitch with animated transition.
1map.flyTo(options)Example
1var map = new nextbillion.maps.Map(document.getElementById('map'), {
2 zoom: 12,
3 center: { lat: 28.6139, lng: 77.239 },
4})
5
6map.flyTo({
7 center: { lat: 36.0671, lng: 120.3826 },
8 zoom: 16,
9 speed: 1.5,
10 curve: 0.8,
11})Circle
Marker
