Data Sources
Data sources are responsible for loading and providing the necessary data for a map layer. Since data sources are created and cached apart from their associated layer(s), a single data source can be used to render one or more layers with different styles. A layer must be associated with a data source in order for it to be rendered to the map.
The following data sources are supported:
- raster: A raster tile source.
- vector: A vector tile source in the Mapbox Vector Tile (opens in a new tab) format.
- geojson: A GeoJSON (opens in a new tab) source that contains a variety of geographic data structures.
- encoded: A raster tile source whose data is encoded in and sampled from one or more RGBA color bands.
Review our advanced section on data sources for more information and examples on setting up and using custom data sources.
Raster
A raster tile source.
Options
{
type: 'raster';
url: string;
metadataUrl: string;
request: {
method: 'GET' | 'POST';
headers: Record<string, string>;
};
tileSize: number;
minZoom: number;
maxZoom: number;
}| Option | Description | Default |
|---|---|---|
url | Type: string () | URL to the data tiles. If present, |
metadataUrl | Type: string () | URL to the data source metadata, if any. When provided, the metadata will be requested and cached on the source before any tile request begins. |
request | Type: { method, headers } () | An object containing additional method and header configurations to be used when requesting tiles. |
tileSize | Type: number () | Size of the data tiles. |
minZoom | Type: number () | Minimum zoom level for which data tiles are available or the minimum zoom level to request tiles for. |
maxZoom | Type: number () | Maximum zoom level for which data tiles are available or the maximum zoom level to request tiles for. |
Methods
setTileUrl(url: string)getTileUrl(coord: TileCoord, params?: Record<string, any>): stringhasTile(coord: TileCoord): boolean)Vector
A vector tile source in the Mapbox Vector Tile (opens in a new tab) format.
Options
{
type: 'vector';
url: string;
request: {
method: 'GET' | 'POST';
headers: Record<string, string>;
};
minZoom: number;
maxZoom: number;
}| Option | Description | Default |
|---|---|---|
url | Type: string ()URL to the data tiles. If present, {z}, {x} and {y} are replaced with the corresponding tile coorodinate integers.Custom variables from the values defined in your request object can be included in your URL by using the form {key}, where key is the property name used. You may also include one or more of the following built-in variables:- {s}: Custom server/host name used to spread tile requests across multiple hosts for faster load times. By default this variable is replaced by an integer in the range 1...4, but you can provide a set of custom values instead, e.g. {s::a-,b-,c-,d-} will use a-, b-, etc).- {size}: Tile size as defined by tileSize. | |
metadataUrl | Type: string ()URL to the data source metadata, if any. When provided, the metadata will be requested and cached on the source before any tile request begins. | |
request | Type: { method, headers } (An object containing additional method and header configurations to be used when requesting tiles.) | |
minZoom | Type: number ()Minimum zoom level for which data tiles are available or the minimum zoom level to request tiles for. | |
maxZoom | Type: number ()Maximum zoom level for which data tiles are available or the maximum zoom level to request tiles for. | |
Methods
setTileUrl(url: string)getTileUrl(coord: TileCoord, params?: Record<string, any>): stringhasTile(coord: TileCoord): boolean)GeoJSON
A source containing a variety of geographic data structures in GeoJSON (opens in a new tab) format.
Options
{
type: 'geojson';
data: string | Record<string, any>;
}| Option | Description | Default |
|---|---|---|
data | Type: string or object ()URL to a GeoJSON file to be requested or an inline GeoJSON object. | |
request | Type: { method, headers } ()An object containing additional method and header configurations to be used when requesting tiles. | |
Methods
setUrl(url: string)setData(data: GeoJSON)Encoded
A raster tile source whose data is encoded in and sampled from one or more RGBA color bands. This source is used for gridded weather data sets from the MapsGL Tile API.
Options
{
type: 'encoded';
url: string;
metadataUrl: string;
request: {
method: 'GET' | 'POST';
headers: Record<string, string>;
};
minZoom: number;
maxZoom: number;
datasets: Array<Partial<Dataset>>;
}| Option | Description | Default |
|---|---|---|
url | Type: string ()URL to the data tiles. If present, {z}, {x} and {y} are replaced with the corresponding tile coorodinate integers.Custom variables from the values defined in your request object can be included in your URL by using the form {key}, where key is the property name used. You may also include one or more of the following built-in variables:- {s}: Custom server/host name used to spread tile requests across multiple hosts for faster load times. By default this variable is replaced by an integer in the range 1...4, but you can provide a set of custom values instead, e.g. {s::a-,b-,c-,d-} will use a-, b-, etc).- {size}: Tile size as defined by tileSize. | |
metadataUrl | Type: string ()URL to the data source metadata, if any. When provided, the metadata will be requested and cached on the source before any tile request begins. | |
request | Type: { method, headers } ()An object containing additional method and header configurations to be used when requesting tiles. | |
minZoom | Type: number ()Minimum zoom level for which data tiles are available or the minimum zoom level to request tiles for. | |
maxZoom | Type: number ()Maximum zoom level for which data tiles are available or the maximum zoom level to request tiles for. | |
datasets | Type: Array<Dataset> () | |
Methods
getMetadataForBand(band: string): anygetDataRange(band: SampleChannel): { min: number; max: number; }setTileUrl(url: string)getTileUrl(coord: TileCoord, params?: Record<string, any>): stringhasTile(coord: TileCoord): boolean)