3D globe with custom marker overlays

Create custom non-colliding marker overlays on your 3D globe map using the Marker Layout on top of MapTiler SDK JS.

This example shows how to display the information from the city and town label layers. In this example, we are using the filter function to only create markers in features of type "country", "city", "village" or "town".







  

      
        
          
          Projection control how to toggle the map between mercator and globe projection
        
        
Projection control (globe)

        Example
        
This tutorial shows how to add the projection control that toggles the map between "mercator" and "globe" projection.

      
    
   
  

      
        
          
          Add a 3D model to globe using MapTiler 3D JS
        
        
Add a 3D model to globe using MapTiler 3D JS

        Example
        
Add a 3D model to globe using MapTiler 3D JS module.

      
    
   
  

      
        
          
          How to create non-colliding marker overlays
        
        
Marker Layout (filter)

        Example
        
Create non-colliding marker overlays to display the information from the city and town label layers.

      
    
   
  

      
        
          
          Weather map with custom icons, animated SVGs or Lotties via Marker Layout
        
        
Marker Layout weather icons

        Example
        
Create a weather map using the Marker Layout to show your custom weather markers icons, animated SVGs or Lotties.

      
    
   
  



      
      

      
        An extension of MapLibre GL JS