---
title: "Weather wind show direction arrow | Weather SDK | JavaScript maps SDK"
description: "Visualize wind layer with speed and direction."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# Weather wind show direction arrow
Witness the awe-inspiring display of the weather wind layer in MapTiler Weather Wind dataset. Explore the wind speed and direction at any desired location by simply following the cursor. Immerse yourself in the captivating wind animation, boasting a remarkable 60 frames per second.
### NPM module setup
```bash
npm install --save @maptiler/sdk @maptiler/weather
```
#### main.js
```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
import { WindLayer } from '@maptiler/weather';
const timeInfoContainer = document.getElementById("time-info");
const timeTextDiv = document.getElementById("time-text");
const timeSlider = document.getElementById("time-slider");
const playPauseButton = document.getElementById("play-pause-bt");
const pointerDataDiv = document.getElementById("pointer-data");
let pointerLngLat = null;
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
container: document.getElementById('map'),
hash: true,
zoom: 2,
center: [0, 40],
style: MapStyle.BACKDROP,
projectionControl: true
});
const layer = new WindLayer();
map.on('load', function () {
// Darkening the water layer to make the land stand out
map.setPaintProperty("Water", 'fill-color', "rgba(0, 0, 0, 0.4)");
map.addLayer(layer, 'Water');
});
timeSlider.addEventListener("input", (evt) => {
layer.setAnimationTime(parseInt(timeSlider.value / 1000))
})
// Event called when all the datasource for the next days are added and ready.
// From now on, the layer nows the start and end dates.
layer.on("sourceReady", event => {
const startDate = layer.getAnimationStartDate();
const endDate = layer.getAnimationEndDate();
const currentDate = layer.getAnimationTimeDate();
refreshTime()
timeSlider.min = +startDate;
timeSlider.max = +endDate;
timeSlider.value = +currentDate;
})
// Called when the animation is progressing
layer.on("tick", event => {
refreshTime();
updatePointerValue(pointerLngLat);
})
// Called when the time is manually set
layer.on("animationTimeSet", event => {
refreshTime()
})
// When clicking on the play/pause
let isPlaying = false;
playPauseButton.addEventListener("click", () => {
if (isPlaying) {
layer.animateByFactor(0);
playPauseButton.innerText = "Play 3600x";
} else {
layer.animateByFactor(3600);
playPauseButton.innerText = "Pause";
}
isPlaying = !isPlaying;
})
// Update the date time display
function refreshTime() {
const d = layer.getAnimationTimeDate();
timeTextDiv.innerText = d.toString();
timeSlider.value = +d;
}
function updatePointerValue(lngLat) {
if (!lngLat) return;
pointerLngLat = lngLat;
const value = layer.pickAt(lngLat.lng, lngLat.lat);
if (!value) {
pointerDataDiv.innerText = "";
return;
}
pointerDataDiv.innerHTML = `
```
## Learn more
Check out the [Weather JS module reference](https://docs.maptiler.com/sdk-js/modules/weather/)
Check out the [Wind layer reference](https://docs.maptiler.com/sdk-js/modules/weather/api/wind/)
## Related examples
### [Weather custom popup](https://docs.maptiler.com/sdk-js/examples/weather-custom-popup/)
Examples
Create highly customizable popups for weather maps using MarkerLayout.
### [Weather layer switcher](https://docs.maptiler.com/sdk-js/examples/weather-layer-switcher/)
Examples
Switch weather layers and view detailed data under cursors.
### [Weather wind and temperature layer](https://docs.maptiler.com/sdk-js/examples/weather-wind-temperature/)
Examples
Visualize wind and temperature layers with cursor data.
### [Weather+ wind arrow layer](https://docs.maptiler.com/sdk-js/examples/weather-plus-wind-arrow/)
Examples
Visualize wind direction and speed using animated wind arrows.