Creating a wind speed category layer
This example demonstrates how to utilize the wind speed weather layer with a custom color scale while limiting the values plotted using the drawRange.min
parameter. This type of implementation is useful to highlight specific wind categories and the same technique can be applied to other weather layers.
In this example, we are setting a custom color ramp, for the following categories:
- Breezy: 15 - 24 mph
- Windy: 15 - 38 mph
- Gale / Tropical Storm Force: 39 - 54 mph
- Storm / Severe Gale: 55 - 73 mph
- Hurricane Force: 74+ mph
We will set the drawRange.min
to 15mph (6.7056 mps), so we only draw winds greater than or equal to 15mph (6.7056 mps). Additionally, setting colorscale.interpolate: false
tells the SDK to disable interpolation between the colorscale.stop
values, improving efficiency.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MapsGL SDK - Customizing the Temperature Color Scale</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://api.mapbox.com/mapbox-gl-js/{% $versions.mapbox.current %}/mapbox-gl.css" rel="stylesheet" />
<script defer src="https://api.mapbox.com/mapbox-gl-js/{% $versions.mapbox.current %}/mapbox-gl.js"></script>
<script defer src="{% $paths.sdk %}"></script>
<link href="{% $paths.css %}" rel="stylesheet" />
<style>
#map {
height: 600px;
margin: 30px auto;
width: 1200px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
window.addEventListener('load', () => {
mapboxgl.accessToken = 'MAPBOX_TOKEN';
const map = new mapboxgl.Map({
container: document.getElementById('map'),
style: 'mapbox://styles/mapbox/dark',
center: [40, 30],
zoom: 2
});
const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });
controller.on('load', () => {
controller.addWeatherLayer('wind-speeds', {
paint: {
sample: {
drawRange: {
min: aerisweather.mapsgl.units.mphToMs(15)
},
colorscale: {
// raw data is in m/s, but we define the categories in mph; so we need
// to convert mph to m/s for the color stop values
stops: [
aerisweather.mapsgl.units.mphToMs(15), '#AED9FE', // breezy
aerisweather.mapsgl.units.mphToMs(25), '#FFDF2C', // windy
aerisweather.mapsgl.units.mphToMs(39), '#FF9503', // gale / tropical storm force
aerisweather.mapsgl.units.mphToMs(55), '#DB2500', // storm / severe gale
aerisweather.mapsgl.units.mphToMs(75), '#D802E0' // hurricane force
],
interpolate: false
}
}
}
});
});
});
</script>
</body>
</html>