Weather Plus pressure isolines layer animated

Explore the weather pressure isolines layer from MapTiler Weather Plus Pressure dataset. By accessing the Pressure dataset, you can visualize the distribution of pressure across different locations. With just a simple cursor movement, you can retrieve the precise pressure value at any given point.

The showPressureLabels function, allows you to view the highest and lowest pressure extremes on the map. This provides valuable insights into the atmospheric conditions and helps you understand the dynamics of weather patterns.

To enhance your experience, we have incorporated an animation bar that illustrates the movement of isobars over a four-day time period. This dynamic representation allows you to track changes in pressure over time and gain a deeper understanding of weather trends. Additionally, we have included a button that enables the display of Hi/Lo pressure extreme values labels, ensuring that you have all the necessary information at your fingertips.


npm install --save @maptiler/sdk @maptiler/weather-plus

main.js

 
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
import { PressureIsolineLayer } from '@maptiler/weather-plus';

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
  projectionControl: true,
  zoom: 1,
  center: [-15.5, 15.2],
  hash: 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 labelsButton = document.getElementById("show-labels");
const pointerDataDiv = document.getElementById("pointer-data");
let pointerLngLat = null;
let hasLabels = false;

const weatherLayer = new PressureIsolineLayer({
  opacity: 0.8,
});

map.on('load', function () {
  map.setPaintProperty("Water", 'fill-color', "rgba(0, 0, 0, 0.4)");
  map.addLayer(weatherLayer, 'Water');  
});

timeSlider.addEventListener("input", (evt) => {
  weatherLayer.setAnimationTime(parseInt(timeSlider.value / 1000));
  hideLabels();
});

// 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;
});

// Called when the animation is progressing
weatherLayer.on("tick", event => {
  refreshTime();
  updatePointerValue(pointerLngLat);
});

// 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";
    labelsButton.disabled = false;
  } else {
    weatherLayer.animateByFactor(3600);
    playPauseButton.innerText = "Pause";
    hideLabels();
    labelsButton.disabled = true;
  }
  isPlaying = !isPlaying;
});

labelsButton.addEventListener("click", () => {
  if (!isPlaying && !hasLabels) {
    weatherLayer.showPressureLabels();
    hasLabels = true;
    labelsButton.innerText = "Hide labels";
  } else {
    hideLabels();
  }
});

function hideLabels() {
  weatherLayer.hidePressureLabels();
  hasLabels = false;
  labelsButton.innerText = "Show labels";
}

// Update the date time display
function refreshTime() {
  const d = weatherLayer.getAnimationTimeDate();
  timeTextDiv.innerText = d.toString();
  timeSlider.value = +d;
}

map.on('mouseout', function(evt) {
  if (!evt.originalEvent.relatedTarget) {
    pointerDataDiv.innerText = "";
    pointerLngLat = null;
  }
});

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

Learn more

Look at the Weather Plus pressure isolines layer example

Look at the Weather Plus pressure isolines layer labels example

Check out the Weather JS module reference

Check out the Pressure Isolines layer 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 Plus wind arrow layer

Weather+ wind arrow layer

Examples

Visualize wind direction and speed using animated wind arrows.

Weather Plus pressure isolines layer labels

Weather+ pressure isolines layer labels

Examples

Display high and low atmospheric pressure extreme value labels.

Was this helpful?