---
title: "Weather precipitation layer | Weather SDK | JavaScript maps SDK"
description: "Visualize precipitation layers and view localized data under cursors."
---
> 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 precipitation layer
Visualize the weather precipitation layer from MapTiler Weather Precipitation dataset and get the amount of precipitation at the specific location indicated by the cursor.
To animate the precipitation layer over time, you can use the `animateByFactor(3600)` function. This will allow you to see the changes in precipitation for the next four days, with each second of animation representing one hour.
### 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 { PrecipitationLayer } from '@maptiler/weather';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = (window.map = new Map({
container: 'map', // container's id or the HTML element to render the map
style: MapStyle.BACKDROP, // stylesheet location
zoom: 2,
center: [-42.66, 37.63],
hash: true,
projectionControl: true
}));
const timeTextDiv = document.getElementById("time-text");
const pointerDataDiv = document.getElementById("pointer-data");
let pointerLngLat = null;
const weatherLayer = new PrecipitationLayer();
// Called when the animation is progressing
weatherLayer.on("tick", event => {
refreshTime();
updatePointerValue(pointerLngLat);
});
map.on('load', function () {
map.setPaintProperty("Water", 'fill-color', "rgba(0, 0, 0, 0.4)");
map.addLayer(weatherLayer, 'Water');
weatherLayer.animateByFactor(3600);
});
map.on('mouseout', function(evt) {
if (!evt.originalEvent.relatedTarget) {
pointerDataDiv.innerText = "";
pointerLngLat = null;
}
});
// Update the date time display
function refreshTime() {
const d = weatherLayer.getAnimationTimeDate();
timeTextDiv.innerText = d.toString();
}
function updatePointerValue(lngLat) {
if (!lngLat) return;
pointerLngLat = lngLat;
const value = weatherLayer.pickAt(lngLat.lng, lngLat.lat);
if (!value) {
pointerDataDiv.innerText = "";
return;
}
pointerDataDiv.innerText = `${value.value.toFixed(1)} mm`
}
map.on('mousemove', (e) => {
updatePointerValue(e.lngLat);
});
```
#### index.html
```html
Display a precipitation layer