Deck.gl with MapTiler maps

Deck.gl is a framework powered by WebGL for visual exploratory data analysis of large datasets.

Within Deck.gl, you have the option to incorporate MapTiler SDK either in interleaved mode (rendering directly into MapTiler SDK WebGL context) or reverse-controlled mode (renders deck.gl above the MapTiler SDK container and blocks any interaction to the base map).

Deck.gl is not a map library. Instead, it is a high-performance data visualization framework designed to works standalone without a base map. Deck.gl integrates with mapping libraries such as MapTiler SDK, MapLibre, etc.

Get started

This is the easiest and fastest way to use your MapTiler maps in Deck.gl in interleaved mode. For reverse-controlled mode see: How to use Vector Tiles in Deck.gl

Deck.gl allows a great diversification of visualizations. Like the one shown in the following example, where the ArcLayer is used to represent raised arc linking source and destination coordinate pair and ScatterplotLayer is used to show affected area. Simply use the code below the map.


Replace YOUR_MAPTILER_API_KEY_HERE with your own API key. Make sure to protect the key before you publish it.

How to display a GeoJSON in Deck.gl and MapTiler SDK JS

GeoJSON in Deck.gl

Examples

Visualize GeoJSON layers and arc connections in Deck.gl.

How to display a Deck.gl layers in MapTiler SDK JS

Interleaved Deck.gl layer

Examples

Interleave Deck.gl layers with MapTiler SDK JS maps.

How to display a MVT layer of buildings in Deck.gl

Buildings Deck.gl MVT layer

Examples

Render extruded building layers in Deck.gl using Vector Tiles.

How to display an MVT layer of POIs and show a tooltip in Deck.gl

POIs info Deck.gl MVT layer

Examples

Display MVT POI layers with tooltips in Deck.gl.

How to display a 3D terrain layer in Deck.gl

3D Terrain

Examples

Display realistic 3D terrain in Deck.gl using MapTiler.

Was this helpful?