Change between light and dark mode based on the time of day

This example demonstrates the process of altering the map display from a light to a dark mode, depending on the current time of day.

To achieve this, the MapTiler Geolocation API is utilized to acquire the user’s location data, while the SunCalc library is employed to compute the sunrise and sunset timings based on the user’s location.




Related examples




  
  
  
    

      
        
          
          Set dark mode based on system settings
        
        
Set dark mode based on system settings

        Example
        
This example shows how to change the map mode (light/dark) based on system settings.

      
    

    

      
        
          
          Switch to dark mode inside tunnels
        
        
Switch to dark mode inside tunnels

        Example
        
This example shows how to change the map mode (light/dark) based on the position in a route.

      
    

  
  
    

      
        
          
          Built-in map styles
        
        
Built-in map styles

        Example
        
Our built-in styles are designed to make it easier for you to create beautiful maps, without the need for extra coding or worrying about outdated versions.

      
    

    

      
        
          
          Change map styles
        
        
Change map styles

        Example
        
This tutorial shows how to change the map styles, you can switch between the built-in maps and your own custom maps.

      
    




      
      

      
        An extension of MapLibre GL JS