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

Example

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

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

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

Example

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