Customizing radar color scale
This example demonstrates how to apply custom color scales to the radar weather layer.
The radar layer supports rendering a separate color scale for each precipitation type (rain, snow, and mix) using the sample.colorscale.masks paint style property. However, if you want to apply a single color scale regardless of the precipitation type, you can use the sample.colorscale property instead.
This example uses some of the normalized color scales provided by the MapsGL SDK, such as rainbow, viridis, and plasma. You can learn more about data-driven and normalized color scales in our color scales guide.
custom-radar-colorscale.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MapsGL SDK - Customizing radar color scale</title>
<meta name="description" content="Apply a custom color scale to the precipitation type radar layer." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://api.mapbox.com/mapbox-gl-js/v2.8.0/mapbox-gl.css" rel="stylesheet" />
<script defer src="https://api.mapbox.com/mapbox-gl-js/v2.8.0/mapbox-gl.js"></script>
<link href="https://cdn.aerisapi.com/sdk/js/mapsgl/latest/aerisweather.mapsgl.css" rel="stylesheet" />
<script defer src="https://cdn.aerisapi.com/sdk/js/mapsgl/latest/aerisweather.mapsgl.js"></script>
<style>
body, html {
margin: 0;
padding: 0;
}
#map {
height: 100vh;
width: 100%;
}
#controls {
display: flex;
flex-direction: column;
gap: 12px;
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
background: rgba(255, 255, 255, 0.8);
padding: 10px;
border-radius: 5px;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
font-size: 12px;
}
#controls h3 {
margin: 0 0 8px;
font-size: 14px;
}
#controls .container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 20px;
}
#controls .control {
display: flex;
flex-direction: row;
gap: 4px;
}
#controls .control-field {
display: flex;
flex-direction: column;
gap: 2px;
}
#controls .control label {
margin-top: 2px;
font-weight: bold;
}
#controls .control span {
font-size: 10px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="controls">
<div class="container">
<label for="range-start">Color scale</label>
<div class="control-field">
<select id="colorscale">
<option value="Default">Default</option>
<option value="Custom">Custom</option>
</select>
</div>
</div>
</div>
<script>
window.addEventListener('load', () => {
mapboxgl.accessToken = 'MAPBOX_TOKEN';
const map = new mapboxgl.Map({
container: document.getElementById('map'),
style: 'mapbox://styles/mapbox/light-v9',
center: [-93, 40],
zoom: 4
});
const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });
const selectControl = document.querySelector('#colorscale');
// Get the default weather color scales
const weatherColorScales = aerisweather.mapsgl.styles.colorscales;
// Get a list of the general supported color scales from MapsGL and add them to the select control
const colorScales = aerisweather.mapsgl.styles.getColorScaleNames().slice(0, 6);
colorScales.forEach((colorScale) => {
const option = document.createElement('option');
option.value = colorScale;
option.text = colorScale;
selectControl.appendChild(option);
});
controller.on('load', () => {
controller.addLegendControl('#map');
const radarLayer = controller.addWeatherLayer('radar');
// Update the radar layer's colorscale based on the selected value
selectControl.addEventListener('change', () => {
const value = selectControl.value;
if (value === 'Default') {
// Use the default built-in color scales for radar and precipitation type
radarLayer.setPaintProperty('sample.colorscale', {
normalized: false,
masks: [
{
colorscale: {
stops: weatherColorScales.radar.rain
}
},
{
colorscale: {
stops: weatherColorScales.radar.mix
}
},
{
colorscale: {
stops: weatherColorScales.radar.snow
}
}
]
});
} else if (value === 'Custom') {
// Use a custom color scale for radar and precipitation type
radarLayer.setPaintProperty('sample.colorscale', {
normalized: false,
masks: [
// rain
{
colorscale: {
stops: [
0, 'rgba(0,0,0,0)',
5.9, 'rgba(113,255,194,0)',
6, '#588d45',
40, '#a1943a',
70, '#fa0000',
]
}
},
// snow
{
colorscale: {
stops: [
0, 'rgba(0,0,0,0)',
5.9, 'rgba(248,178,205,0)',
6, '#E9AAC0',
25, '#E93D7A',
58, '#DB1E16',
87, '#58003c',
]
}
},
// mix
{
colorscale: {
stops: [
0, 'rgba(0,0,0,0)',
5.9, 'rgba(255,255,255,0)',
25, '#9B9BE5',
45, '#0000af',
58, '#535DFF',
87, '#373EA8',
]
}
}
]
});
} else {
// Use a generic normalized color scale for radar, ignoring precipitation type.
// The second argument to `getColorScale` is an array of colors to prefix the color scale with.
// In this case, we're using a transparent color so that precipitation intensity values of 0
// are transparent rather than filling the entire map with the first color in the scale.
const colorScale = aerisweather.mapsgl.styles.getColorScale(value, ['rgba(0,0,0,0)']);
radarLayer.setPaintProperty('sample.colorscale', colorScale);
}
});
});
});
</script>
</body>
</html>