---
title: "Weather pressure layer | Weather SDK | JavaScript maps SDK"
description: "Visualize pressure 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 pressure layer
Discover the visualization of the weather pressure layer through the MapTiler Weather Pressure dataset and obtain the pressure reading at the specific location indicated by the cursor.
By employing the `animateByFactor(3600)` function of the pressure layer, we can animate it over a period of time, specifically the upcoming four days. Each second of animation corresponds to an hour of real-time data.
### 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 { PressureLayer } 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: 1.5,
center: [-15.5, 15.2],
hash: true,
projectionControl: true,
projection: 'globe'
}));
const timeTextDiv = document.getElementById("time-text");
const pointerDataDiv = document.getElementById("pointer-data");
let pointerLngLat = null;
const weatherLayer = new PressureLayer({
opacity: 0.8,
});
// 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)} hPa`
}
map.on('mousemove', (e) => {
updatePointerValue(e.lngLat);
});
```
#### index.html
```html
Display a pressure layer