Weather layer with a custom color blind ramp

Experience the power of visualizing weather temperature data with the MapTiler Cloud Weather Temperature dataset. Utilize a personalized color scheme designed specifically for individuals with color blindness, and easily access temperature information for any location by simply hovering over it.

In the temperature layer, we use one of the color ramps built-in in the SDK. Using the animateByFactor(3600) function of the temperature layer, we can create a dynamic time-based animation for the next 4 days. Each second of animation corresponds to one hour.

Learn more

Check out the Weather JS module reference

Check out the Temperature layer reference

Check out the Color ramp reference

Related examples

Weather custom popup

Example

This example demonstrates using custom popups on top of a map because MapLibre's popups were originally quite limited in layout and style.

Weather layer switcher

Example

Switch the display of the different weather layers in the MapTiler Cloud Weather data set and get the data information at the point under the cursor.

Weather wind and temperature layer

Example

Visualize weather wind and temperature layer from MapTiler Cloud Weather Wind dataset and get the wind speed and temperature at the point under the cursor.

Custom color ramp (color ramp)

Example

This example shows how to create a custom color ramp and use it to visualize a point layer.