---
title: "Weather temperature layer | Weather SDK | JavaScript maps SDK"
description: "Visualize temperature layers and view localized data under cursors."
---
# Weather temperature layer
Visualize weather temperature layer from MapTiler Weather Temperature dataset and get the temperature at any given location.
Within the temperature layer, we utilize a selection of pre-defined color ramps available in the SDK. By implementing the `animateByFactor(3600)` function of the temperature layer, we can create a dynamic time-based animation for the next four days. Each second of the animation accurately represents 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 { TemperatureLayer, ColorRamp } 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.5,
center: [-94.77, 38.57],
hash: true,
projectionControl: true,
projection: 'globe'
}));
const timeTextDiv = document.getElementById("time-text");
const pointerDataDiv = document.getElementById("pointer-data");
let pointerLngLat = null;
const weatherLayer = new TemperatureLayer({
colorramp: ColorRamp.builtin.TEMPERATURE_3
});
// 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)}°`
}
map.on('mousemove', (e) => {
updatePointerValue(e.lngLat);
});
```
#### index.html
```html
Weather temperature layer | NPM example
```
## Learn more
Check out the [Weather JS module reference](https://docs.maptiler.com/sdk-js/modules/weather/)
Check out the [Temperature layer reference](https://docs.maptiler.com/sdk-js/modules/weather/api/temperature/)
## 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 layer custom color blind ramp](https://docs.maptiler.com/sdk-js/examples/weather-temperature-color-ramp/)
Examples
Visualize temperature layer with custom color blind ramp.
### [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.