--- title: "Sources | JavaScript maps SDK" description: "JavaScript maps SDK | Home Updates MapTiler Planet Geocoding Deprecated resources Guides Get started Use a map Use static map image Define map area..." --- > For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL. # Sources A **source** provides the data that is displayed on a map. Sources are defined by the [GL Style Specification](https://docs.maptiler.com/gl-style-specification/sources/). ## Vector tile A vector tile source. Tiles must be in [Vector Tile format](https://www.maptiler.com/news/2019/02/what-are-vector-tiles-and-why-you-should-care/). All layers that use a vector source must specify a “source-layer” value. (See the [Style Specification](https://docs.maptiler.com/gl-style-specification/sources/#vector) for detailed documentation of options.) **Example** ```js map.addSource('planet', { type: 'vector', data: 'https://api.maptiler.com/tiles/v4/tiles.json' }); ``` ```js map.addSource('planet', { type: 'vector', tiles: ['https://api.maptiler.com/tiles/v4/{z}/{x}/{y}.pbf'], minzoom: 0, maxzoom: 15 }); ``` ### API reference [Class VectorTileSource](https://docs.maptiler.com/sdk-js/api-reference/classes/VectorTileSource/) ### Related examples - [Add a vector tile source](https://docs.maptiler.com/sdk-js/examples/vector-source/) - [Add a third party vector tile source](https://docs.maptiler.com/sdk-js/examples/third-party/) ## Raster tile A raster tile source. Tiles must be in [ZXY](https://docs.maptiler.com/guides/map-tiling-hosting/data-processing/tiling-scheme-in-folder-output#TilingschemeinFolderoutput-OpenGISWMTS/OpenStreetMap/GoogleXYZ/ZXY) or [TMS](https://docs.maptiler.com/guides/map-tiling-hosting/data-processing/tiling-scheme-in-folder-output#TilingschemeinFolderoutput-OSGEOTMS) tile format. (See the [Style Specification](https://docs.maptiler.com/gl-style-specification/sources/#raster) for detailed documentation of options.) **Example** ```js map.addSource('satellite', { type: 'raster', data: 'https://api.maptiler.com/tiles/satellite-v2/tiles.json' }); ``` ```js 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](https://docs.maptiler.com/sdk-js/api-reference/classes/RasterTileSource/) ### Related examples - [Add a raster tile source](https://docs.maptiler.com/sdk-js/examples/map-tiles/) - [Add a WMS source](https://docs.maptiler.com/sdk-js/examples/wms/) ## GeoJSON A source containing GeoJSON. (See the [Style Specification](https://docs.maptiler.com/gl-style-specification/#sources-geojson) for detailed documentation of options.) **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 ] } }] }); ``` ### API reference [Class GeoJSONSource](https://docs.maptiler.com/sdk-js/api-reference/classes/GeoJSONSource/) ### Related examples - [Draw GeoJSON points](https://docs.maptiler.com/sdk-js/examples/geojson-markers/) - [Add a GeoJSON line](https://docs.maptiler.com/sdk-js/examples/geojson-line/) - [Create a heatmap from points](https://docs.maptiler.com/sdk-js/examples/heatmap-layer/) - [Create and style clusters](https://docs.maptiler.com/sdk-js/examples/cluster/) ## Raster DEM tile A raster DEM source. Only supports [Terrain RGB format](https://docs.maptiler.com/guides/map-tiling-hosting/data-hosting/rgb-terrain-by-maptiler). (See the [Style Specification](https://docs.maptiler.com/gl-style-specification/sources/#raster-dem) for detailed documentation of options.) **Example** ```js map.addSource('terrain-rgb', { type: 'raster-dem', data: 'https://api.maptiler.com/tiles/terrain-rgb-v2/tiles.json' }); ``` ```js 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](https://docs.maptiler.com/sdk-js/api-reference/classes/RasterDEMTileSource/) ### Related examples - [Add hillshading](https://docs.maptiler.com/sdk-js/examples/hillshade/) ## Image A data source containing an image. (See the [Style Specification](https://docs.maptiler.com/gl-style-specification/#sources-image) for detailed documentation of options.) **Example** ```js // 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](https://docs.maptiler.com/sdk-js/api-reference/classes/ImageSource/) ## Video A data source containing video. (See the [Style Specification](https://docs.maptiler.com/gl-style-specification/#sources-video) for detailed documentation of options.) **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 ``` ### API reference [Class VideoSource](https://docs.maptiler.com/sdk-js/api-reference/classes/VideoSource/) ### Related examples - [Add a video](https://docs.maptiler.com/sdk-js/examples/video-on-a-map/) ## Canvas A data source containing the contents of an HTML canvas. See [canvas source properties](#canvassource-properties) for detailed documentation of options. **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 ``` ### API reference [Class CanvasSource](https://docs.maptiler.com/sdk-js/api-reference/classes/CanvasSource/)