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 install --save @maptiler/sdk @maptiler/weather

main.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);
});

Learn more

Check out the Weather JS module reference

Check out the Radar layer reference

Check out the Color ramp reference

Weather custom popup

Weather custom popup

Examples

Create highly customizable popups for weather maps using MarkerLayout.

Weather layer switcher

Weather layer switcher

Examples

Switch weather layers and view detailed data under cursors.

Weather precipitation layer

Weather precipitation layer

Examples

Visualize precipitation layers and view localized data under cursors.

Weather Plus pressure isolines layer

Weather+ pressure isolines layer

Examples

Visualize atmospheric pressure isolines using Weather Plus datasets.

Was this helpful?