async function createMap() {

​

  // Get url from first element of times array in windData

  const windResponse = await fetch("https://beta.yr-maps.met.no/api/wind/");

  const windData = await windResponse.json();

  const tileUrl = windData.times[0].tiles.png;

​

​

  const map = L.map("map").setView([59.9423, 10.72], 6);

​

  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {

    // We set the maxZoom  here to 6, since that is the max zoom of the wind data

    // In order to support a higher maxZoom you need some logic to handle this, which is not included in this example

    maxZoom: 6,

    attribution:

      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'

  }).addTo(map);

  map.createPane("tilePane");

​

  const tiles = new L.GridLayer();

  tiles.createTile = function (coords, done) {

    const tile = L.DomUtil.create("canvas", "leaflet-tile");

    const currentTileSrc = tileUrl.replace(

      "{z}/{x}/{y}",

      `${coords.z}/${coords.x}//${coords.y}`

    );

    const canvasContext = tile.getContext("2d");

​

    const size = this.getTileSize();

    tile.width = size.x;

    tile.height = size.y;

​

    // Create a new image element

    const imageElement = new Image();

​

    // When the image has loaded, draw it onto the canvas

    imageElement.onload = function () {

      // Set opacity to 80% so you can still see the background map

      canvasContext.filter = "opacity(80%)";

​

      // CanvasRenderingContext has a ton of other filters aswell, simulating what is available in the css filter property.

      // Adding a few examples in comments here, you might want to change the opacity for some of these.

​

      // Saturate the picture, takes a value from 0-100% - where 0% the image is completelu unsaturated, 100% it is unchanged.

      // canvasContext.filter += "saturate(0%)";

​

      // Brightness controls the darkness of the picture, 0% = completely black, 100% the image is unchanged - over 100% it gets brighter then original

      // canvasContext.filter += "brightness(150%)"

​

      // Hue is basically the of color you see. You have maybe seen the color wheel? The hue is (simply put), the degree value of where the color is on this wheel.

      // It is more complicated then that, but I won't go into details here.

      //  canvasContext.filter += "hue-rotate(150deg)";

​

      // Draw the image onto the canvas

      canvasContext.drawImage(this, 0, 0);

      done(null, tile);

    };

​

    // Set image source to be the current tile url

    imageElement.src = currentTileSrc;

​

    return tile;

  };

​

  // Add tiles to map

  tiles.addTo(map);

}

​

// Call the createMap funcion to initialize the map

createMap();

​