Weather layer with a custom color blind ramp

Experience the power of visualizing weather temperature data with the MapTiler Weather Temperature dataset. Utilize a personalized color scheme designed specifically for individuals with color blindness, and easily access temperature information for any location by simply hovering over it.

In the temperature layer, we use one of the color ramps built-in in the SDK. Using the animateByFactor(3600) function of the temperature layer, we can create a dynamic time-based animation for the next 4 days. Each second of animation corresponds to one hour.


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

main.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: 3,
  center: [-94.77, 38.57],
  hash: true,
  projectionControl: true,
}));

const timeTextDiv = document.getElementById("time-text");
const pointerDataDiv = document.getElementById("pointer-data");
let pointerLngLat = null;

// You can define a custom color ramp using an extensive definition such as this one:
const customColoramp = new ColorRamp({ 
  stops: [
    { value: -65, color: [49, 54, 149, 255] },
    { value: -40, color: [69, 117, 180, 255] },
    { value: -30, color: [116, 173, 209, 255] },
    { value: -20, color: [171, 217, 233, 255] },
    { value: -10, color: [224, 243, 248, 255] },
    { value: 0, color: [255, 255, 255, 255] },
    { value: 12, color: [255, 255, 191, 255] },
    { value: 20, color: [254, 224, 144, 255] },
    { value: 25, color: [253, 174, 97, 255] },
    { value: 30, color: [244, 109, 67, 255] },
    { value: 40, color: [215,48,39, 255] },
    { value: 55, color: [165, 0, 38, 255] },
  ],
});

const weatherLayer = new TemperatureLayer({
  colorramp: customColoramp
});

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

class colorRampLegendControl {
  constructor(options) {
    this._options = {...options};
    this._container = document.createElement("div");
    this._container.classList.add("maplibregl-ctrl");
    this._container.classList.add("maplibregl-ctrl-color-ramp");
  }
  onAdd(map) {
    this._map = map;
    const colorramp = this._options.colorRamp;
    const canvas = colorramp.getCanvasStrip();
    canvas.style.height = "30px";
    canvas.style.width = "200px";
    canvas.style.border = "1px dashed #00000059";

    const bounds = colorramp.getBounds()

    const desc = document.createElement("div");
    desc.classList.add("color-ramp-label");
    desc.innerHTML = `(min: ${bounds.min}, max: ${bounds.max})`;
    
    this._container.appendChild(desc);
    this._container.appendChild(canvas);
    return this._container;
  }
  onRemove() {
    if (!this._map || !this._container) {
      return;
    }
    this._container.parentNode.removeChild(this._container);
    this._map = undefined;
    delete this._map;
  }
}

map.addControl(new colorRampLegendControl({colorRamp: customColoramp}), 'bottom-left');

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="robots" content="noindex" />
    <title>Weather layer with a custom color blind ramp | NPM example</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div id="time-info">
      <span id="time-text"></span>
    </div>
    <div id="variable-name">Temperature</div>
    <div id="pointer-data"></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;}
#pointer-data {
  z-index: 1;
  position: fixed;
  font-size: 20px;
  font-weight: 900;
  margin: 27px 0px 0px 10px;
  color: #fff;
  text-shadow: 0px 0px 10px #0007;
}

#variable-name {
  z-index: 1;
  position: fixed;
  font-size: 20px;
  font-weight: 500;
  margin: 5px 0px 0px 10px;
  color: #fff;
  text-shadow: 0px 0px 10px #0007;
}

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

#time-text {
  font-size: 12px;
  font-weight: 600;
}

.maplibregl-ctrl-color-ramp {
  color: #333359;
  position: relative;
  padding: 6px 8px;
  font-family: OpenSans Semibold, OpenSans Regular, OpenSans Italic;
  background: white;
  box-shadow: 0 0 15px rgb(0 0 0 / 20%);
  border-radius: 5px;
  bottom: 0;
  right: 0;
  margin: 10px;
}

.color-ramp-label {
  font-size: 16px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Display a temperature 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="https://cdn.maptiler.com/maptiler-weather/v4.0.1/maptiler-weather.umd.min.js"></script>
  <style>
    body { margin: 0; padding: 0; font-family: sans-serif; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; background-color: #444952;}
    #pointer-data {
      z-index: 1;
      position: fixed;
      font-size: 20px;
      font-weight: 900;
      margin: 27px 0px 0px 10px;
      color: #fff;
      text-shadow: 0px 0px 10px #0007;
    }

    #variable-name {
      z-index: 1;
      position: fixed;
      font-size: 20px;
      font-weight: 500;
      margin: 5px 0px 0px 10px;
      color: #fff;
      text-shadow: 0px 0px 10px #0007;
    }

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

    #time-text {
      font-size: 12px;
      font-weight: 600;
    }

    .maplibregl-ctrl-color-ramp {
      color: #333359;
      position: relative;
      padding: 6px 8px;
      font-family: OpenSans Semibold, OpenSans Regular, OpenSans Italic;
      background: white;
      box-shadow: 0 0 15px rgb(0 0 0 / 20%);
      border-radius: 5px;
      bottom: 0;
      right: 0;
      margin: 10px;
    }

    .color-ramp-label {
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div id="time-info">
    <span id="time-text"></span>
  </div>
  <div id="variable-name">Temperature</div>
  <div id="pointer-data"></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
        zoom: 3,
        center: [-94.77, 38.57],
        hash: true,
        projectionControl: true,
      }));

      const timeTextDiv = document.getElementById("time-text");
      const pointerDataDiv = document.getElementById("pointer-data");
      let pointerLngLat = null;

      // You can define a custom color ramp using an extensive definition such as this one:
      const customColoramp = new maptilerweather.ColorRamp({ 
        stops: [
          { value: -65, color: [49, 54, 149, 255] },
          { value: -40, color: [69, 117, 180, 255] },
          { value: -30, color: [116, 173, 209, 255] },
          { value: -20, color: [171, 217, 233, 255] },
          { value: -10, color: [224, 243, 248, 255] },
          { value: 0, color: [255, 255, 255, 255] },
          { value: 12, color: [255, 255, 191, 255] },
          { value: 20, color: [254, 224, 144, 255] },
          { value: 25, color: [253, 174, 97, 255] },
          { value: 30, color: [244, 109, 67, 255] },
          { value: 40, color: [215,48,39, 255] },
          { value: 55, color: [165, 0, 38, 255] },
        ],
      });

      const weatherLayer = new maptilerweather.TemperatureLayer({
        colorramp: customColoramp
      });

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

      class colorRampLegendControl {
        constructor(options) {
          this._options = {...options};
          this._container = document.createElement("div");
          this._container.classList.add("maplibregl-ctrl");
          this._container.classList.add("maplibregl-ctrl-color-ramp");
        }
        onAdd(map) {
          this._map = map;
          const colorramp = this._options.colorRamp;
          const canvas = colorramp.getCanvasStrip();
          canvas.style.height = "30px";
          canvas.style.width = "200px";
          canvas.style.border = "1px dashed #00000059";

          const bounds = colorramp.getBounds()

          const desc = document.createElement("div");
          desc.classList.add("color-ramp-label");
          desc.innerHTML = `(min: ${bounds.min}, max: ${bounds.max})`;
          
          this._container.appendChild(desc);
          this._container.appendChild(canvas);
          return this._container;
        }
        onRemove() {
          if (!this._map || !this._container) {
            return;
          }
          this._container.parentNode.removeChild(this._container);
          this._map = undefined;
          delete this._map;
        }
      }

      map.addControl(new colorRampLegendControl({colorRamp: customColoramp}), 'bottom-left');
  </script>
</body>
</html>

Learn more

Check out the Weather JS module reference

Check out the Temperature layer reference

Check out the Color ramp reference

main.js

index.html

style.css

Learn more

Weather custom popup

Weather layer switcher

Weather wind and temperature layer

Custom color ramp (color ramp)

Weather layer with a custom color blind ramp

NPM module setup

main.js

index.html

style.css

Basic JavaScript setup

Learn more

Related examples

Weather custom popup

Weather layer switcher

Weather wind and temperature layer

Custom color ramp (color ramp)