> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt)

# Sources

A [`source`](https://docs.mapbox.com/style-spec/reference/sources/) 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](https://docs.mapbox.com/style-spec/).

## CanvasSource

[Source Code](https://github.com/mapbox/mapbox-gl-js/blob/29a082c40985763b038163d555f9305cb39233ad/src/source/canvas_source.ts#L62-L240)

A data source containing the contents of an HTML canvas. See [CanvasSourceOptions](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/sources/#canvassourceoptions) for detailed documentation of options.

Extends [ImageSource](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/sources/#imagesource).

### Example

```js
// 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

#### play()

Enables animation. The image will be copied from the canvas to the map on each frame.

#### pause()

Disables animation. The map will display a static copy of the canvas image.

#### getCanvas()

Returns the HTML `canvas` element.

##### Returns

[HTMLCanvasElement](https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement): The HTML `canvas` element.

##### Example

```js
// Assuming the following canvas is added to your page
// <canvas id="canvasID" width="400" height="400"></canvas>
map.addSource('canvas-source', {
    type: 'canvas',
    canvas: 'canvasID',
    coordinates: [
        [91.4461, 21.5006],
        [100.3541, 21.5006],
        [100.3541, 13.9706],
        [91.4461, 13.9706]
    ]
});
map.getSource('canvas-source').getCanvas(); // <canvas id="canvasID" width="400" height="400"></canvas>
```

#### setCoordinates()

Sets the canvas's coordinates and re-renders the map.

##### Parameters

| Name | Description |
| --- | --- |
| **coordinates** [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)>>  | Four geographical coordinates, represented as arrays of longitude and latitude numbers, which define the corners of the canvas. The coordinates start at the top left corner of the canvas and proceed in clockwise order. They do not have to represent a rectangle. |

##### Returns

[CanvasSource](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/sources/#canvassource): Returns itself to allow for method chaining.

### Related

-   [Example: Add a canvas source](https://docs.mapbox.com/mapbox-gl-js/example/canvas-source/)

## CanvasSourceOptions

[Source Code](https://github.com/mapbox/mapbox-gl-js/blob/29a082c40985763b038163d555f9305cb39233ad/src/source/canvas_source.ts#L17-L25)

Options to add a canvas source type to the map.

### Type

[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)

### Properties

| Name | Description |
| --- | --- |
| **animate** [boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/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](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [HTMLCanvasElement](https://developer.mozilla.org/docs/Web/API/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](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)>>  | Four geographical coordinates denoting where to place the corners of the canvas, specified in `[longitude, latitude]` pairs. |
| **type** [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)  | Source type. Must be `"canvas"` . |

## GeoJSONSource

[Source Code](https://github.com/mapbox/mapbox-gl-js/blob/29a082c40985763b038163d555f9305cb39233ad/src/source/geojson_source.ts#L74-L568)

A source containing GeoJSON. See the [Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/#sources-geojson) for detailed documentation of options.

Extends [Evented](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/events/#evented).

### Example

```js
map.addSource('some id', {
    type: 'geojson',
    data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_ports.geojson'
});
```

```js
map.addSource('some id', {
    type: 'geojson',
    data: {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "properties": {},
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -76.53063297271729,
                    39.18174077994108
                ]
            }
        }]
    }
});
```

```js
map.getSource('some id').setData({
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {"name": "Null Island"},
        "geometry": {
            "type": "Point",
            "coordinates": [ 0, 0 ]
        }
    }]
});
```

### Instance Members

#### setData()

Sets the GeoJSON data and re-renders the map.

##### Parameters

| Name | Description |
| --- | --- |
| **data** ([Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) \| [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String))  | A GeoJSON data object or a URL to one. The latter is preferable in the case of large GeoJSON files. |

##### Returns

[GeoJSONSource](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/sources/#geojsonsource): Returns itself to allow for method chaining.

##### Example

```js
map.addSource('source_id', {
    type: 'geojson',
    data: {
        type: 'FeatureCollection',
        features: []
    }
});
const geojsonSource = map.getSource('source_id');
// Update the data after the GeoJSON source was created
geojsonSource.setData({
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {"name": "Null Island"},
        "geometry": {
            "type": "Point",
            "coordinates": [ 0, 0 ]
        }
    }]
});
```

#### updateData()

Updates the existing GeoJSON data with new features and re-renders the map. Can only be used on sources with `dynamic: true` in options. Updates features by their IDs:

-   If there's a feature with the same ID, overwrite it.
-   If there's a feature with the same ID but the new one's geometry is `null`, remove it
-   If there's no such ID in existing data, add it as a new feature.

##### Parameters

| Name | Description |
| --- | --- |
| **data** ([Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object) \| [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String))  | A GeoJSON data object or a URL to one. |

##### Returns

[GeoJSONSource](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/sources/#geojsonsource): Returns itself to allow for method chaining.

##### Example

```js
// Update the feature with ID=123 in the existing GeoJSON source
map.getSource('source_id').updateData({
    "type": "FeatureCollection",
    "features": [{
        "id": 123,
        "type": "Feature",
        "properties": {"name": "Null Island"},
        "geometry": {
            "type": "Point",
            "coordinates": [ 0, 0 ]
        }
    }]
});
```

#### getClusterExpansionZoom()

For clustered sources, fetches the zoom at which the given cluster expands.

##### Parameters

| Name | Description |
| --- | --- |
| **clusterId** [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)  | The value of the cluster's `cluster_id` property. |
| **callback** [Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)  | A callback to be called when the zoom value is retrieved ( `(error, zoom) => { ... }` ). |

##### Returns

[GeoJSONSource](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/sources/#geojsonsource): Returns itself to allow for method chaining.

##### Example

```js
// Assuming the map has a layer named 'clusters' and a source 'earthquakes'
// The following creates a camera animation on cluster feature click
// the clicked layer should be filtered to only include clusters, e.g. `filter: ['has', 'point_count']`
map.on('click', 'clusters', (e) => {
    const features = map.queryRenderedFeatures(e.point, {
        layers: ['clusters']
    });

    const clusterId = features[0].properties.cluster_id;

    // Ease the camera to the next cluster expansion
    map.getSource('earthquakes').getClusterExpansionZoom(
        clusterId,
        (err, zoom) => {
            if (!err) {
                map.easeTo({
                    center: features[0].geometry.coordinates,
                    zoom
                });
            }
        }
    );
});
```

#### getClusterChildren()

For clustered sources, fetches the children of the given cluster on the next zoom level (as an array of GeoJSON features).

##### Parameters

| Name | Description |
| --- | --- |
| **clusterId** [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)  | The value of the cluster's `cluster_id` property. |
| **callback** [Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)  | A callback to be called when the features are retrieved ( `(error, features) => { ... }` ). |

##### Returns

[GeoJSONSource](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/sources/#geojsonsource): Returns itself to allow for method chaining.

##### Example

```js
// Retrieve cluster children on click
// the clicked layer should be filtered to only include clusters, e.g. `filter: ['has', 'point_count']`
map.on('click', 'clusters', (e) => {
    const features = map.queryRenderedFeatures(e.point, {
        layers: ['clusters']
    });

    const clusterId = features[0].properties.cluster_id;

    clusterSource.getClusterChildren(clusterId, (error, features) => {
        if (!error) {
            console.log('Cluster children:', features);
        }
    });
});
```

#### getClusterLeaves()

For clustered sources, fetches the original points that belong to the cluster (as an array of GeoJSON features).

##### Parameters

| Name | Description |
| --- | --- |
| **clusterId** [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)  | The value of the cluster's `cluster_id` property. |
| **limit** [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)  | The maximum number of features to return. Defaults to `10` if a falsy value is given. |
| **offset** [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)  | The number of features to skip (for example, for pagination). Defaults to `0` if a falsy value is given. |
| **callback** [Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)  | A callback to be called when the features are retrieved ( `(error, features) => { ... }` ). |

##### Returns

[GeoJSONSource](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/sources/#geojsonsource): Returns itself to allow for method chaining.

##### Example

```js
// Retrieve cluster leaves on click
// the clicked layer should be filtered to only include clusters, e.g. `filter: ['has', 'point_count']`
map.on('click', 'clusters', (e) => {
    const features = map.queryRenderedFeatures(e.point, {
        layers: ['clusters']
    });

    const clusterId = features[0].properties.cluster_id;
    const pointCount = features[0].properties.point_count;
    const clusterSource = map.getSource('clusters');

    clusterSource.getClusterLeaves(clusterId, pointCount, 0, (error, features) => {
    // Print cluster leaves in the console
        console.log('Cluster leaves:', error, features);
    });
});
```

### Related

-   [Example: Draw GeoJSON points](https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/)
-   [Example: Add a GeoJSON line](https://www.mapbox.com/mapbox-gl-js/example/geojson-line/)
-   [Example: Create a heatmap from points](https://www.mapbox.com/mapbox-gl-js/example/heatmap/)
-   [Example: Create and style clusters](https://www.mapbox.com/mapbox-gl-js/example/cluster/)

## ImageSource

[Source Code](https://github.com/mapbox/mapbox-gl-js/blob/29a082c40985763b038163d555f9305cb39233ad/src/source/image_source.ts#L216-L833)

A data source containing an image. See the [Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/#sources-image) for detailed documentation of options.

Extends [Evented](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/events/#evented).

### Example

```js
// 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

#### updateImage()

Updates the image URL and, optionally, the coordinates. To avoid having the image flash after changing, set the `raster-fade-duration` paint property on the raster layer to 0.

##### Parameters

| Name | Description |
| --- | --- |
| **options** [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)  | Options object. |
| **options.coordinates** [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)>>?  | Four geographical coordinates, represented as arrays of longitude and latitude numbers, which define the corners of the image. The coordinates start at the top left corner of the image and proceed in clockwise order. They do not have to represent a rectangle. |
| **options.url** [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?  | Required image URL. |

##### Returns

[ImageSource](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/sources/#imagesource): Returns itself to allow for method chaining.

##### Example

```js
// Add to an image source to the map with some initial URL and coordinates
map.addSource('image_source_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]
    ]
});
// Then update the image URL and coordinates
imageSource.updateImage({
    url: 'https://www.mapbox.com/images/bar.png',
    coordinates: [
        [-76.5433, 39.1857],
        [-76.5280, 39.1838],
        [-76.5295, 39.1768],
        [-76.5452, 39.1787]
    ]
});
```

#### setCoordinates()

Sets the image's coordinates and re-renders the map.

##### Parameters

| Name | Description |
| --- | --- |
| **coordinates** [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)>>  | Four geographical coordinates, represented as arrays of longitude and latitude numbers, which define the corners of the image. The coordinates start at the top left corner of the image and proceed in clockwise order. They do not have to represent a rectangle. |

##### Returns

[ImageSource](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/sources/#imagesource): Returns itself to allow for method chaining.

##### Example

```js
// Add an image source to the map with some initial coordinates
map.addSource('image_source_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]
    ]
});
// Then update the image coordinates
imageSource.setCoordinates([
    [-76.5433, 39.1857],
    [-76.5280, 39.1838],
    [-76.5295, 39.1768],
    [-76.5452, 39.1787]
]);
```

### Related

-   [Example: Add an image](https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/)
-   [Example: Animate a series of images](https://www.mapbox.com/mapbox-gl-js/example/animate-images/)

## ModelSource

[Source Code](https://github.com/mapbox/mapbox-gl-js/blob/29a082c40985763b038163d555f9305cb39233ad/3d-style/source/model_source.ts#L50-L382)

A source containing single models. See the [Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/#sources-model) for detailed documentation of options.

Extends [Evented](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/events/#evented).

### Example

```js
map.addSource('some id', {
  "type": "model",
  "models": {
    "ego-car" : {
         "uri": "car.glb",
         "position": [-74.0135, 40.7153],
         "orientation": [0, 0, 0],
         "materialOverrides": {
           "body": {
             "model-color": [0.00775, 0.03458, 0.43854],
             "model-color-mix-intensity": 1.0
           }
         },
         "nodeOverrides": {
           "doors_front-left": {
             "orientation": [0.0, -45.0, 0.0]
           }
         }
     }
  }
});
```

### Instance Members

#### setModels()

Sets the list of models along with their properties.

Updates are efficient as long as the model URIs remain unchanged.

##### Parameters

| Name | Description |
| --- | --- |
| **modelSpecs** ModelSourceModelsSpecification  | Model specifications according to [Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/#sources-model) . |

##### Example

```js
map.getSource('some id').setModels({
    "model-1" : {
         "uri": "model_1.glb",
         "position": [-74.0135, 40.7153],
         "orientation": [0, 0, 0]
     }
});
```

## RasterArrayTileSource

[Source Code](https://github.com/mapbox/mapbox-gl-js/blob/29a082c40985763b038163d555f9305cb39233ad/src/source/raster_array_tile_source.ts#L55-L443)

A data source containing raster-array tiles created with [Mapbox Tiling Service](https://docs.mapbox.com/mapbox-tiling-service/guides/). See the [Style Specification](https://docs.mapbox.com/style-spec/reference/sources/#raster-array) for detailed documentation of options.

Extends [RasterTileSource](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/sources/#rastertilesource).

> new RasterArrayTileSource(id: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, options: <a href="#rasterarraysourcespecification">RasterArraySourceSpecification</a>, dispatcher: Dispatcher, eventedParent: <a href="/mapbox-gl-js/api/events/#evented">Evented</a>)

### Parameters

| Name | Description |
| --- | --- |
| **id** [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)  |  |
| **options** [RasterArraySourceSpecification](#rasterarraysourcespecification)  |  |
| **dispatcher** Dispatcher  |  |
| **eventedParent** [Evented](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/events/#evented)  |  |

### Example

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

### Related

-   [Example: Create a wind particle animation](https://docs.mapbox.com/mapbox-gl-js/example/raster-particle-layer/)

## RasterTileSource

[Source Code](https://github.com/mapbox/mapbox-gl-js/blob/29a082c40985763b038163d555f9305cb39233ad/src/source/raster_tile_source.ts#L49-L401)

A source containing raster tiles. See the [Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#raster) for detailed documentation of options.

Extends [Evented](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/events/#evented).

> new RasterTileSource(id: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, options: (RasterSourceSpecification \| RasterDEMSourceSpecification \| <a href="#rasterarraysourcespecification">RasterArraySourceSpecification</a>), dispatcher: Dispatcher, eventedParent: <a href="/mapbox-gl-js/api/events/#evented">Evented</a>)

### Parameters

| Name | Description |
| --- | --- |
| **id** [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)  |  |
| **options** (RasterSourceSpecification \| RasterDEMSourceSpecification \| [RasterArraySourceSpecification](#rasterarraysourcespecification))  |  |
| **dispatcher** Dispatcher  |  |
| **eventedParent** [Evented](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/events/#evented)  |  |

### Example

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

```js
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

#### reload()

Reloads the source data and re-renders the map.

##### Example

```js
map.getSource('source-id').reload();
```

#### setTiles()

Sets the source `tiles` property and re-renders the map.

##### Parameters

| Name | Description |
| --- | --- |
| **tiles** [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>  | An array of one or more tile source URLs, as in the TileJSON spec. |

##### Returns

[RasterTileSource](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/sources/#rastertilesource): Returns itself to allow for method chaining.

##### Example

```js
map.addSource('source-id', {
    type: 'raster',
    tiles: ['https://some_end_point.net/{z}/{x}/{y}.png'],
    tileSize: 256
});

// Set the endpoint associated with a raster tile source.
map.getSource('source-id').setTiles(['https://another_end_point.net/{z}/{x}/{y}.png']);
```

#### setUrl()

Sets the source `url` property and re-renders the map.

##### Parameters

| Name | Description |
| --- | --- |
| **url** [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)  | A URL to a TileJSON resource. Supported protocols are `http:` , `https:` , and `mapbox://<Tileset ID>` . |

##### Returns

[RasterTileSource](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/sources/#rastertilesource): Returns itself to allow for method chaining.

##### Example

```js
map.addSource('source-id', {
    type: 'raster',
    url: 'mapbox://mapbox.satellite'
});

// Update raster tile source to a new URL endpoint
map.getSource('source-id').setUrl('mapbox://mapbox.satellite');
```

### Related

-   [Example: Add a raster tile source](https://docs.mapbox.com/mapbox-gl-js/example/map-tiles/)
-   [Example: Add a WMS source](https://docs.mapbox.com/mapbox-gl-js/example/wms/)

## VectorTileSource

[Source Code](https://github.com/mapbox/mapbox-gl-js/blob/29a082c40985763b038163d555f9305cb39233ad/src/source/vector_tile_source.ts#L58-L536)

A source containing vector tiles in [Mapbox Vector Tile format](https://docs.mapbox.com/vector-tiles/reference/). See the [Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#vector) for detailed documentation of options.

Extends [Evented](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/events/#evented).

> new VectorTileSource(id: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, options: any, dispatcher: Dispatcher, eventedParent: <a href="/mapbox-gl-js/api/events/#evented">Evented</a>)

### Parameters

| Name | Description |
| --- | --- |
| **id** [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)  |  |
| **options** any  |  |
| **dispatcher** Dispatcher  |  |
| **eventedParent** [Evented](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/events/#evented)  |  |

### Example

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

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

```js
map.getSource('some id').setUrl("mapbox://mapbox.mapbox-streets-v8");
```

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

### Instance Members

#### reload()

Reloads the source data and re-renders the map.

##### Example

```js
map.getSource('source-id').reload();
```

#### setTiles()

Sets the source `tiles` property and re-renders the map.

##### Parameters

| Name | Description |
| --- | --- |
| **tiles** [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)>  | An array of one or more tile source URLs, as in the TileJSON spec. |

##### Returns

[VectorTileSource](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/sources/#vectortilesource): Returns itself to allow for method chaining.

##### Example

```js
map.addSource('source-id', {
    type: 'vector',
    tiles: ['https://some_end_point.net/{z}/{x}/{y}.mvt'],
    minzoom: 6,
    maxzoom: 14
});

// Set the endpoint associated with a vector tile source.
map.getSource('source-id').setTiles(['https://another_end_point.net/{z}/{x}/{y}.mvt']);
```

#### setUrl()

Sets the source `url` property and re-renders the map.

##### Parameters

| Name | Description |
| --- | --- |
| **url** [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)  | A URL to a TileJSON resource. Supported protocols are `http:` , `https:` , and `mapbox://<Tileset ID>` . |

##### Returns

[VectorTileSource](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/sources/#vectortilesource): Returns itself to allow for method chaining.

##### Example

```js
map.addSource('source-id', {
    type: 'vector',
    url: 'mapbox://mapbox.mapbox-streets-v7'
});

// Update vector tile source to a new URL endpoint
map.getSource('source-id').setUrl("mapbox://mapbox.mapbox-streets-v8");
```

### Related

-   [Example: Add a vector tile source](https://docs.mapbox.com/mapbox-gl-js/example/vector-source/)
-   [Example: Add a third party vector tile source](https://docs.mapbox.com/mapbox-gl-js/example/third-party/)

## VideoSource

[Source Code](https://github.com/mapbox/mapbox-gl-js/blob/29a082c40985763b038163d555f9305cb39233ad/src/source/video_source.ts#L44-L244)

A data source containing video. See the [Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/#sources-video) for detailed documentation of options.

Extends [ImageSource](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/sources/#imagesource).

### Example

```js
// 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

#### pause()

Pauses the video.

##### Example

```js
// Assuming a video source identified by video_source_id was added to the map
const videoSource = map.getSource('video_source_id');

// Pauses the video
videoSource.pause();
```

#### play()

Plays the video.

##### Example

```js
// Assuming a video source identified by video_source_id was added to the map
const videoSource = map.getSource('video_source_id');

// Starts the video
videoSource.play();
```

#### getVideo()

Returns the HTML `video` element.

##### Returns

[HTMLVideoElement](https://developer.mozilla.org/docs/Web/API/HTMLVideoElement): The HTML `video` element.

##### Example

```js
// Assuming a video source identified by video_source_id was added to the map
const videoSource = map.getSource('video_source_id');

videoSource.getVideo(); // <video crossorigin="Anonymous" loop="">...</video>
```

#### setCoordinates()

Sets the video's coordinates and re-renders the map.

##### Returns

[VideoSource](https://docs.mapbox.com/mapbox-gl-js/mapbox-gl-js/api/sources/#videosource): Returns itself to allow for method chaining.

##### Example

```js
// Add a video source to the map to map
map.addSource('video_source_id', {
    type: 'video',
    urls: [
        '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]
    ]
});

// Then update the video source coordinates by new coordinates
const videoSource = map.getSource('video_source_id');
videoSource.setCoordinates([
    [-76.5433, 39.1857],
    [-76.5280, 39.1838],
    [-76.5295, 39.1768],
    [-76.5452, 39.1787]
]);
```

### Related

-   [Example: Add a video](https://www.mapbox.com/mapbox-gl-js/example/video-on-a-map/)