Customizing wind particles
This example configures the wind-particles weather layer with a custom normalized color scale and different particle generation settings.
wind-particles.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MapsGL SDK - Customizing wind particles</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-v9',
center: [-140, 40],
zoom: 3
});
const account = new aerisweather.mapsgl.Account('CLIENT_ID', 'CLIENT_SECRET');
const controller = new aerisweather.mapsgl.MapboxMapController(map, { account });
controller.on('load', () => {
controller.addWeatherLayer('wind-particles', {
paint: {
sample: {
colorscale: {
normalized: true,
stops: [
0, '#0b0089',
0.25, '#8800a8',
0.5, '#cf4875',
0.75, '#f99336',
1, '#f0fb00'
]
}
},
particle: {
count: Math.pow(256, 2), // using a power of two, e.g. 65536
size: 2,
speed: 1.5,
trailsFade: 0.93,
dropRate: 0.005
}
}
});
});
});
</script>
</body>
</html>