---
title: "Weather Cloud coverage displayed from radar data | Weather SDK | JavaScript maps SDK"
description: "Visualize cloud coverage using weather radar data and tooltips."
---
> 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 Cloud coverage displayed from radar data
Explore the weather cloud coverage on a weather radar map using the MapTiler Weather Radar dataset and get the radar reflectivity in dBZ at the point under the cursor.
This example, illustrates the process of visualizing cloud cover, using the built-in `RADAR_CLOUD` color ramp.
### 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 { RadarLayer, 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.LIGHT,
zoom: 1,
center: [-15.5, 15.2],
hash: true,
projectionControl: true,
}));
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;
const weatherLayer = new RadarLayer({
opacity: 0.8,
colorramp: ColorRamp.builtin.RADAR_CLOUD,
});
// 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.
weatherLayer.on("sourceReady", event => {
const startDate = weatherLayer.getAnimationStartDate();
const endDate = weatherLayer.getAnimationEndDate();
const currentDate = weatherLayer.getAnimationTimeDate();
refreshTime()
timeSlider.min = +startDate;
timeSlider.max = +endDate;
timeSlider.value = +currentDate;
})
timeSlider.addEventListener("input", (evt) => {
weatherLayer.setAnimationTime(parseInt(timeSlider.value / 1000))
});
// 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');
});
map.on('mouseout', function(evt) {
if (!evt.originalEvent.relatedTarget) {
pointerDataDiv.innerText = "";
pointerLngLat = null;
}
});
// Called when the time is manually set
weatherLayer.on("animationTimeSet", event => {
refreshTime()
})
// When clicking on the play/pause
let isPlaying = false;
playPauseButton.addEventListener("click", () => {
if (isPlaying) {
weatherLayer.animateByFactor(0);
playPauseButton.innerText = "Play 3600x";
} else {
weatherLayer.animateByFactor(3600);
playPauseButton.innerText = "Pause";
}
isPlaying = !isPlaying;
})
// Update the date time display
function refreshTime() {
const d = weatherLayer.getAnimationTimeDate();
timeTextDiv.innerText = d.toString();
timeSlider.value = +d;
}
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)} dBZ`
}
timeInfoContainer.addEventListener("mouseenter", () => {
pointerDataDiv.innerText = "";
});
map.on('mousemove', (e) => {
updatePointerValue(e.lngLat);
});
```
#### index.html
```html
Cloud coverage displayed from radar data
```
## Learn more
Check out the [Weather JS module reference](https://docs.maptiler.com/sdk-js/modules/weather/)
Check out the [Radar layer reference](https://docs.maptiler.com/sdk-js/modules/weather/api/radar/)
Check out the [Color ramp reference](https://docs.maptiler.com/sdk-js/modules/weather/api/color-ramp/)
## 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 precipitation layer](https://docs.maptiler.com/sdk-js/examples/weather-precipitation/)
Examples
Visualize precipitation layers and view localized data under cursors.
### [Weather+ pressure isolines layer](https://docs.maptiler.com/sdk-js/examples/weather-plus-pressure-isolines/)
Examples
Visualize atmospheric pressure isolines using Weather Plus datasets.