Weather Plus pressure isolines layer labels

Experience the visualization of weather pressure isolines on the MapTiler Weather Plus. Utilize the Pressure dataset to access this layer and observe the extreme values of high and low pressure.

By employing the showPressureLabels function within the pressure layer, these extreme Hi/Lo pressure values are prominently displayed for easy reference.


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,
  projection: 'globe',
  zoom: 1.5,
  center: [-15.5, 15.2],
}));

const labelsButton = document.getElementById("show-labels");
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');  
});

labelsButton.addEventListener("click", () => {
  hasLabels = !hasLabels;
  labelsButton.innerText = hasLabels ? "Hide labels" : "Show labels";
  if (hasLabels) {
    weatherLayer.showPressureLabels();
  } else {
    weatherLayer.hidePressureLabels();
  }
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Display a pressure isolines layer</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="time-info">
    <div><button id="show-labels" class="button">Show labels</button></div>
  </div>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

body { margin: 0; padding: 0; font-family: sans-serif; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; background-color: #444952; }
#time-info{ position: fixed; width: 60vw; bottom: 0; z-index: 1; margin: 10px; text-shadow: 0px 0px 5px black; color: white; font-size: 18px; font-weight: 500; text-align: center; left: 0; right: 0; margin: auto; padding: 20px;}
.button{ cursor: pointer; width: auto; padding: 8px; border-radius: 3px; font-size: 10px; text-align: center; color: #fff; background: #3174ff; font-family: sans-serif; font-weight: bold;}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Display a pressure isolines layer</title>
  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
  <script src="./maptiler-weather-plus.umd.js"></script>
  <style>
    body { margin: 0; padding: 0; font-family: sans-serif; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; background-color: #444952; }
    #time-info{ position: fixed; width: 60vw; bottom: 0; z-index: 1; margin: 10px; text-shadow: 0px 0px 5px black; color: white; font-size: 18px; font-weight: 500; text-align: center; left: 0; right: 0; margin: auto; padding: 20px;}
    .button{ cursor: pointer; width: auto; padding: 8px; border-radius: 3px; font-size: 10px; text-align: center; color: #fff; background: #3174ff; font-family: sans-serif; font-weight: bold;}
  </style>
</head>
<body>
  <div id="time-info">
    <div><button id="show-labels" class="button">Show labels</button></div>
  </div>
  <div id="map"></div>
  <script>
      maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
      const map = (window.map = new maptilersdk.Map({
        container: 'map', // container's id or the HTML element to render the map
        style: maptilersdk.MapStyle.BACKDROP,  // stylesheet location
        projectionControl: true,
        projection: 'globe',
        zoom: 1.5,
        center: [-15.5, 15.2],
      }));

      const labelsButton = document.getElementById("show-labels");
      let hasLabels = false;

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

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

      labelsButton.addEventListener("click", () => {
        hasLabels = !hasLabels;
        labelsButton.innerText = hasLabels ? "Hide labels" : "Show labels";
        if (hasLabels) {
          weatherLayer.showPressureLabels();
        } else {
          weatherLayer.hidePressureLabels();
        }
      });
  </script>
</body>
</html>