How to add a custom icon (PNG) to a point layer

This example shows how to make a map with pins to display a point layer from a MapTiler Cloud Tileset using a custom PNG icon.

Download the underground sample icon, The icon is from the Maps Icons Collection.




Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.



Replace YOUR_MAPTILER_TILESET_ID_HERE with your actual MapTiler Tileset ID.



Replace YOUR_TILESET_LAYER_HERE with your actual Layer ID. How to get the Layer ID.



Related examples




  
  
  
    

      
        
          
          Add an icon to the map
        
        
Add an icon to the map

        Example
        
Add an icon to the map from an external URL and use it in a symbol layer.

      
    

    

      
        
          
          Add custom icons with markers
        
        
Add custom icons with markers

        Example
        
Add custom marker icons to your map.

      
    

    

      
        
          
          How to add a custom icon (SVG) to a point layer
        
        
Add custom icon (SVG) to a point layer

        Example
        
This example shows how to make a map with pins to display a point layer from a MapTiler Cloud Tileset using a custom SVG icon.

      
    

  
  
    

      
        
          
          Show point data from GeoJSON on the map
        
        
GeoJSON point layer

        Example
        
This tutorial shows how to add a GeoJSON point overlay to the map.

      
    




      
      

      
        An extension of MapLibre GL JS