Sources

Search GL JS API Reference

A source defines data the map should display. This reference lists the source types Mapbox GL JS can handle in addition to the ones described in the Mapbox Style Specification.

CanvasSource

githubsrc/source/canvas_source.ts

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

Related

• Example: Add a canvas source

このsection on CanvasSourceは役に立ちましたか？

CanvasSourceOptions

githubsrc/source/canvas_source.ts

Options to add a canvas source type to the map.

Type

Object

Properties

Name	Description
animate boolean?	Whether the canvas source is animated. If the canvas is static (pixels do not need to be re-read on every frame), animate should be set to false to improve performance.
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.
type string	Source type. Must be "canvas" .

このsection on CanvasSourceOptionsは役に立ちましたか？

GeoJSONSource

githubsrc/source/geojson_source.ts

A source containing GeoJSON. See the Style Specification for detailed documentation of options.

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

Related

• Example: Draw GeoJSON points
• Example: Add a GeoJSON line
• Example: Create a heatmap from points
• Example: Create and style clusters

このsection on GeoJSONSourceは役に立ちましたか？

ImageSource

githubsrc/source/image_source.ts

A data source containing an image. See the Style Specification for detailed documentation of options.

Extends Evented.

Example

// add to map
map.addSource('some id', {
    type: 'image',
    url: 'https://www.mapbox.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.mapbox.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

Related

• Example: Add an image
• Example: Animate a series of images

このsection on ImageSourceは役に立ちましたか？

RasterArrayTileSource

githubsrc/source/raster_array_tile_source.ts

A data source containing raster-array tiles created with Mapbox Tiling Service. See the Style Specification for detailed documentation of options.

Extends RasterTileSource.

new RasterArrayTileSource(id: string, options: RasterArraySourceSpecification, dispatcher: Dispatcher, eventedParent: Evented)

Parameters

Name	Description
id string
options RasterArraySourceSpecification
dispatcher Dispatcher
eventedParent Evented

Example

// add to map
map.addSource('some id', {
    type: 'raster-array',
    url: 'mapbox://rasterarrayexamples.gfs-winds',
    tileSize: 512
});

Instance Members

Related

• Example: Create a wind particle animation

このsection on RasterArrayTileSourceは役に立ちましたか？

RasterTileSource

githubsrc/source/raster_tile_source.ts

A source containing raster tiles. See the Style Specification for detailed documentation of options.

Extends Evented.

new RasterTileSource(id: string, options: (RasterSourceSpecification | RasterDEMSourceSpecification | RasterArraySourceSpecification), dispatcher: Dispatcher, eventedParent: Evented)

Parameters

Name	Description
id string
options (RasterSourceSpecification | RasterDEMSourceSpecification | RasterArraySourceSpecification)
dispatcher Dispatcher
eventedParent Evented

Example

map.addSource('some id', {
    type: 'raster',
    url: 'mapbox://mapbox.satellite',
    tileSize: 256
});

map.addSource('some id', {
    type: 'raster',
    tiles: ['https://img.nj.gov/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015'],
    tileSize: 256
});

Instance Members

Related

• Example: Add a raster tile source
• Example: Add a WMS source

このsection on RasterTileSourceは役に立ちましたか？

VectorTileSource

githubsrc/source/vector_tile_source.ts

A source containing vector tiles in Mapbox Vector Tile format. See the Style Specification for detailed documentation of options.

Extends Evented.

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

Parameters

Name	Description
id string
options any
dispatcher Dispatcher
eventedParent Evented

Example

map.addSource('some id', {
    type: 'vector',
    url: 'mapbox://mapbox.mapbox-streets-v8'
});

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("mapbox://mapbox.mapbox-streets-v8");

map.getSource('some id').setTiles(['https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt']);

Instance Members

Related

• Example: Add a vector tile source
• Example: Add a third party vector tile source

このsection on VectorTileSourceは役に立ちましたか？

VideoSource

githubsrc/source/video_source.ts

A data source containing video. See the Style Specification for detailed documentation of options.

Extends ImageSource.

Example

// add to map
map.addSource('some id', {
    type: 'video',
    url: [
        'https://www.mapbox.com/blog/assets/baltimore-smoke.mp4',
        'https://www.mapbox.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

Related

• Example: Add a video

このsection on VideoSourceは役に立ちましたか？

このpageは役に立ちましたか？