Sources

A source provides the data that is displayed on a map. Sources are defined by the GL Style Specification.

Vector tile

A vector tile source. Tiles must be in Vector Tile format. All layers that use a vector source must specify a “source-layer” value. (See the Style Specification for detailed documentation of options.)

Example

map.addSource('planet', {
    type: 'vector',
    data: 'https://api.maptiler.com/tiles/v4/tiles.json'
});

map.addSource('planet', {
    type: 'vector',
    tiles: ['https://api.maptiler.com/tiles/v4/{z}/{x}/{y}.pbf'],
    minzoom: 0,
    maxzoom: 15
});

API reference

Class VectorTileSource

Related examples

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

Raster tile

A raster tile source. Tiles must be in ZXY or TMS tile format. (See the Style Specification for detailed documentation of options.)

Example

map.addSource('satellite', {
    type: 'raster',
    data: 'https://api.maptiler.com/tiles/satellite-v2/tiles.json'
});

map.addSource('satellite', {
    type: 'raster',
    tiles: ['https://api.maptiler.com/tiles/satellite-v2/{z}/{x}/{y}.jpg'],
    minzoom: 0,
    maxzoom: 20
});

API reference

Class RasterTileSource

Related examples

• Add a raster tile source
• Add a WMS source

GeoJSON

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

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 ]
      }
  }]
});

API reference

Class GeoJSONSource

Related examples

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

Raster DEM tile

A raster DEM source. Only supports Terrain RGB format. (See the Style Specification for detailed documentation of options.)

Example

map.addSource('terrain-rgb', {
    type: 'raster-dem',
    data: 'https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json'
});

map.addSource('satellite', {
    type: 'raster-dem',
    tiles: ['https://api.maptiler.com/tiles/terrain-rgb-v2/{z}/{x}/{y}.webp'],
    minzoom: 0,
    maxzoom: 12
});

API reference

Class RasterDEMTileSource

Related examples

• Add hillshading

Image

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

Example

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

API reference

Class ImageSource

Video

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

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

API reference

Class VideoSource

Related examples

• Add a video

Canvas

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

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

API reference

Class CanvasSource