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).

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 actual MapTiler API key.






  

      
        
          
          Use Deck.gl with Vector Tiles
        
        
Get Started

        Example
        
Get Started with Deck.gl JavaScript library: Learn how to display vector tiles in Deck.gl.

      
    
   
  

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

        Example
        
This example illustrates the process of showcasing a GeoJSON layer in Deck.gl. In this particular instance, we utilize an arc layer to visually represent the connections between the various features of the GeoJSON layer.

      
    
   
  

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

        Example
        
This example shows how to use Deck.gl layers in a MapTiler SDK JS map. This example shows how to display a Deck.gl GeoJSON layer, along with an Deck.gl arc layer on top of your MapTiler maps.

      
    
   
  

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

        Example
        
This Deck.gl example demonstrates how to load a Vector Tiles layer. The example shows the building layer that comes from the MapTiler Planet tileset.

      
    
   
  

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

        Example
        
This example demonstrates the process of loading an MVT layer of Points of Interest (POIs) using Deck.gl and displaying a tooltip. The example shows the poi layer that comes from the MapTiler Planet tileset.

      
    
   
  

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

        Example
        
This example shows how to create a 3D map in Deck.gl. By utilizing MapTiler's RGB terrain, you can enhance your maps by incorporating a realistic 3D terrain layer.