NMaps GL JS Docs
All docsNMaps GL JS DocsAPI ReferenceDisplay data

Display data

The source types NMaps GL JS can handle in addition to the ones described in the NMaps Style Specification.

Context

GeoJSONSource

A source containing GeoJSON.

Extends Evented.

Example

map.addSource('some id', {
type: 'geojson',
data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_ports.geojson'
});
map.addSource('some id', {
type: 'geojson',
data: {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Point",
"coordinates": [
-76.53063297271729,
39.18174077994108
]
}
}]
}
});
map.getSource('some id').setData({
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": { "name": "Null Island" },
"geometry": {
"type": "Point",
"coordinates": [ 0, 0 ]
}
}]
});

Instance Members

VideoSource

A data source containing video.

Extends ImageSource.

Example

// add to map
map.addSource('some id', {
type: 'video',
url: [
'https://www.ndrive.com/blog/assets/baltimore-smoke.mp4',
'https://www.ndrive.com/blog/assets/baltimore-smoke.webm'
],
coordinates: [
[-76.54, 39.18],
[-76.52, 39.18],
[-76.52, 39.17],
[-76.54, 39.17]
]
});
 
// update
const mySource = map.getSource('some id');
mySource.setCoordinates([
[-76.54335737228394, 39.18579907229748],
[-76.52803659439087, 39.1838364847587],
[-76.5295386314392, 39.17683392507606],
[-76.54520273208618, 39.17876344106642]
]);
 
map.removeSource('some id');  // remove

Instance Members

ImageSource

A data source containing an image.

Extends Evented.

Example

// add to map
map.addSource('some id', {
type: 'image',
url: 'https://www.ndrive.com/images/foo.png',
coordinates: [
[-76.54, 39.18],
[-76.52, 39.18],
[-76.52, 39.17],
[-76.54, 39.17]
]
});
 
// update coordinates
const mySource = map.getSource('some id');
mySource.setCoordinates([
[-76.54335737228394, 39.18579907229748],
[-76.52803659439087, 39.1838364847587],
[-76.5295386314392, 39.17683392507606],
[-76.54520273208618, 39.17876344106642]
]);
 
// update url and coordinates simultaneously
mySource.updateImage({
url: 'https://www.ndrive.com/images/bar.png',
coordinates: [
[-76.54335737228394, 39.18579907229748],
[-76.52803659439087, 39.1838364847587],
[-76.5295386314392, 39.17683392507606],
[-76.54520273208618, 39.17876344106642]
]
})
 
map.removeSource('some id');  // remove

Instance Members

CanvasSource

A data source containing the contents of an HTML canvas. See CanvasSourceOptions for detailed documentation of options.

Extends ImageSource.

Example

// add to map
map.addSource('some id', {
type: 'canvas',
canvas: 'idOfMyHTMLCanvas',
animate: true,
coordinates: [
[-76.54, 39.18],
[-76.52, 39.18],
[-76.52, 39.17],
[-76.54, 39.17]
]
});
 
// update
const mySource = map.getSource('some id');
mySource.setCoordinates([
[-76.54335737228394, 39.18579907229748],
[-76.52803659439087, 39.1838364847587],
[-76.5295386314392, 39.17683392507606],
[-76.54520273208618, 39.17876344106642]
]);
 
map.removeSource('some id');  // remove

Instance Members

CanvasSourceOptions

Options to add a canvas source type to the map.

Properties

type(string): Source type. Must be "canvas" .
canvas((string | HTMLCanvasElement)): Canvas source from which to read pixels. Can be a string representing the ID of the canvas element, or the HTMLCanvasElement itself.
coordinates(Array<Array<number>>): Four geographical coordinates denoting where to place the corners of the canvas, specified in [longitude, latitude] pairs.
animate(boolean?): Whether the canvas source is animated. If the canvas is static (i.e. pixels do not need to be re-read on every frame), animate should be set to false to improve performance.

VectorTileSource

A source containing vector tiles in NMaps Vector Tile format.

Extends Evented.
new VectorTileSource(id: string, options: any, dispatcher: Dispatcher, eventedParent: Evented)

Parameters

id(string)
options(any)
dispatcher(Dispatcher)
eventedParent(Evented)

Example

map.addSource('some id', {
type: 'vector',
url: 'source_url'
});
map.addSource('some id', {
type: 'vector',
tiles: ['https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt'],
minzoom: 6,
maxzoom: 14
});
map.getSource('some id').setUrl("source_url");
map.getSource('some id').setTiles(['https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt']);

Instance Members

Traffic

A TrafficControl control provides a toogle button to activate/deactivate traffic layers on the map.

new TrafficControl(options: Object)

Parameters

options(Object)
NameDescription
options.showTraffic
boolean
default: false
Show or hide traffic layers.
options.showTrafficButton
Object
default: true
Show a toggle button to turn traffic on and off.
options.units
string
default: 'Metric'
Unit of the distance ( 'Metric' or 'Imperial' ).
options.interaction
string
default: 'click'
Mouse interaction in traffic events layer ( 'click' or 'hover' ).

Example

map.addControl(new nmapsgl.TrafficControl({
showTraffic: 'true',
unit: 'Metric',
interaction: 'hover'
}));

LayerControl

A LayerControl allows the user to add layers on the map. Layers can be shown/hidden and in the case of Points of Interest (POIs) can be filtered by categories. The layers to be displayed can be defined in the control.

new LayerControl(options: Object?)

Parameters

options(Object?)
NameDescription
options.layers
Array<string>
default: ['Points Of Interest','Open Sky']
Available layers to display: 'Weather' , 'Points Of Interest' , 'Open Sky', 'ISS' .

Example

const layers = new nmapsgl.LayerControl({
layers: ['Points Of Interest', 'Open Sky']
});
map.addControl(layers);