Examples

Weather layer with MapLibre GL

This example adds the current temperature data as a fill layer to a MapLibre GL map using the Weather API vector source.

const API_KEY = "fc8d41d8-cef4-4032-a9c1-28b4f0135896";

    const map = new maplibregl.Map({
      container: "map",
      style: "https://static.maptoolkit.net/styles/toursprung/terrain.json?api_key=" + API_KEY,
      center: [13.0, 47.5],
      zoom: 5,
    });

    map.on("load", () => {
      map.addSource("weather", {
        type: "vector",
        url: `https://weather.maptoolkit.net/vector/icon.0.json?api_key=${API_KEY}`,
      });

      map.addLayer({
        id: "weather-temperature",
        type: "fill",
        source: "weather",
        "source-layer": "temperature",
        paint: {
          "fill-color": [
            "interpolate", ["linear"], ["get", "degree"],
            -20, "#313695",
            0,   "#74add1",
            10,  "#fee090",
            20,  "#f46d43",
            35,  "#a50026"
          ],
          "fill-opacity": 0.6,
        },
      });
    });

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4.1.3/dist/maplibre-gl.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4.1.3/dist/maplibre-gl.css" />
  <style>
    html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
    #map { width: 100%; height: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    const API_KEY = "fc8d41d8-cef4-4032-a9c1-28b4f0135896";

    const map = new maplibregl.Map({
      container: "map",
      style: "https://static.maptoolkit.net/styles/toursprung/terrain.json?api_key=" + API_KEY,
      center: [13.0, 47.5],
      zoom: 5,
    });

    map.on("load", () => {
      map.addSource("weather", {
        type: "vector",
        url: `https://weather.maptoolkit.net/vector/icon.0.json?api_key=${API_KEY}`,
      });

      map.addLayer({
        id: "weather-temperature",
        type: "fill",
        source: "weather",
        "source-layer": "temperature",
        paint: {
          "fill-color": [
            "interpolate", ["linear"], ["get", "degree"],
            -20, "#313695",
            0,   "#74add1",
            10,  "#fee090",
            20,  "#f46d43",
            35,  "#a50026"
          ],
          "fill-opacity": 0.6,
        },
      });
    });
  </script>
</body>
</html>

API Reference