VectorSource
Quick answer
VectorSource supplies tiled vector data via map.addSource(id, {type: 'vector', tiles, minzoom, maxzoom}). Geometry and attributes render on the client, so restyling needs no re-tiling, and the source backs fill, line, symbol and circle layers. Use loaded and hasTile to track tile progress.
map.addSource( id , { type: 'vector', tiles: [...], maxzoom: 6 })
Key points
- Tiles are PBF or TileJSON endpoints addressed with {z}, {x} and {y}.
- maxzoom caps overzoom; deeper views reuse the deepest available tile.
- setUrl switches the TileJSON endpoint while the map is running.
Example
map.addSource('world', {
type: 'vector',
tiles: ['https://demotiles.maplibre.org/tiles/{z}/{x}/{y}.pbf'],
minzoom: 0,
maxzoom: 6,
attribution: 'MapLibre demo tiles'
});
map.addLayer({
id: 'world-fill',
type: 'fill',
source: 'world',
'source-layer': 'countries',
paint: {
'fill-color': '#dbe7f3',
'fill-outline-color': '#8aa4bf'
}
});
map.addLayer({
id: 'world-name',
type: 'symbol',
source: 'world',
'source-layer': 'centroids',
layout: {
'text-field': ['get', 'NAME'],
'text-size': 11
}
});Notes
- A layer whose source-layer name is absent from the tiles renders nothing.
- PBF tiles served without gzip encoding fail to parse in the worker.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). VectorSource. https://www.jingweizhi.com/en/maplibre/api/vector-source.html (accessed 2026-11-03).