leaflet-environmental-layers/src/windRoseLayer.js

[](https://gitpod.io/#https://github.com/publiclab/leaflet-environmental-layers/) [](http

function myWindroseMarker(data) {
  var content = '<canvas id="id_' + data.id + '" width="50" height="50"></canvas>';
  var icon = L.divIcon({html: content, iconSize: [50, 50], className: 'owm-div-windrose'});
  return L.marker([data.coord.Lat, data.coord.Lon], {icon: icon, clickable: false});
}

function myWindroseDrawCanvas(data, owm) {
  var canvas = document.getElementById('id_' + data.id);
  canvas.title = data.name;
  var angle = 0;
  var speed = 0;
  var gust = 0;
  if (typeof data.wind != 'undefined') {
    if (typeof data.wind.speed != 'undefined') {
      canvas.title += ', ' + data.wind.speed + ' m/s';
      canvas.title += ', ' + owm._windMsToBft(data.wind.speed) + ' BFT';
      speed = data.wind.speed;
    }
    if (typeof data.wind.deg != 'undefined') {
      // canvas.title += ', ' + data.wind.deg + '°';
      canvas.title += ', ' + owm._directions[(data.wind.deg/22.5).toFixed(0)];
      angle = data.wind.deg;
    }
    if (typeof data.wind.gust != 'undefined') {
      gust = data.wind.gust;
    }
  }
  if (canvas.getContext && speed > 0) {
    var red = 0;
    var green = 0;
    if (speed <= 10) {
      green = 10*speed+155;
      red = 255*speed/10.0;
    } else {
      red = 255;
      green = 255-(255*(Math.min(speed, 21)-10)/11.0);
    }
    var ctx = canvas.getContext('2d');
    ctx.translate(25, 25);
    ctx.rotate(angle*Math.PI/180);
    ctx.fillStyle = 'rgb(' + Math.floor(red) + ',' + Math.floor(green) + ',' + 0 + ')';
    ctx.beginPath();
    ctx.moveTo(-15, -25);
    ctx.lineTo(0, -10);
    ctx.lineTo(15, -25);
    ctx.lineTo(0, 25);
    ctx.fill();

    // draw inner arrow for gust
    if (gust > 0 && gust != speed) {
      if (gust <= 10) {
        green = 10*gust+155;
        red = 255*gust/10.0;
      } else {
        red = 255;
        green = 255-(255*(Math.min(gust, 21)-10)/11.0);
      }
      canvas.title += ', gust ' + data.wind.gust + ' m/s';
      canvas.title += ', ' + owm._windMsToBft(data.wind.gust) + ' BFT';
      ctx.fillStyle = 'rgb(' + Math.floor(red) + ',' + Math.floor(green) + ',' + 0 + ')';
      ctx.beginPath();
      ctx.moveTo(-15, -25);
      ctx.lineTo(0, -10);
      // ctx.lineTo(15, -25);
      ctx.lineTo(0, 25);
      ctx.fill();
    }
  } else {
    canvas.innerHTML = '<div>' +
    (typeof data.wind != 'undefined' && typeof data.wind.deg != 'undefined' ? data.wind.deg + '°' : '') +
    '</div>';
  }
}

function windroseAdded(e) {
  for (var i in this._markers) {
    var m = this._markers[i];
    var cv = document.getElementById('id_' + m.options.owmId);
    for (var j in this._cache._cachedData.list) {
      var station = this._cache._cachedData.list[j];
      if (station.id == m.options.owmId) {
        myWindroseDrawCanvas(station, this);
      }
    }
  }
}