eflowbeach/index.html

## index.html
<!doctype html>
<html lang="en">
  <head>
    <title>windy.js integration example</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="http://openlayers.org/en/v3.15.0/css/ol.css" type="text/css">
    <style type="text/css">
    #map {
      width: 100%;
      height: 100%;
      position: relative;
    }
    div.fill {
      width: 100%;
      height: 100%;
    }
    #windyMap {
      position: absolute;
      z-index: 1;
      pointer-events: none;
    }
    .ol-control {
      z-index: 2;
    }
    </style>
  </head>
  <body>
    <div id="map" class="map">
      <canvas id="windyMap" class="fill"></canvas>
      <div id="olMap" class="fill"></div>
    </div>
    <script src="http://openlayers.org/en/v3.15.0/build/ol.js" type="text/javascript"></script>
    <script src="http://esri.github.io/wind-js/windy.js" type="text/javascript"></script>
    <script src="script.js" type="text/javascript"></script>
  </body>
</html>

## script.js
var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.Stamen({
        layer: 'toner'
      })
    })
  ],
  interactions: ol.interaction.defaults({
    altShiftDragRotate: false,
    rotate: false
  }),
  target: 'olMap',
  view: new ol.View({
    center: [0, 0],
    zoom: 1
  })
});

var windy;
var canvas = document.getElementById('windyMap');
function refreshWindy() {
  if(!windy) {
    return;
  }
  windy.stop();
  var mapSize = map.getSize();
  var extent = map.getView().calculateExtent(mapSize);
  extent = ol.proj.transformExtent(extent, 'EPSG:3857', 'EPSG:4326');

  canvas.width = mapSize[0];
  canvas.height = mapSize[1];

  windy.start(
    [[0,0], [canvas.width, canvas.height]],
    canvas.width,
    canvas.height,
    [[extent[0], extent[1]],[extent[2], extent[3]]]
  );
}

fetch('http://esri.github.io/wind-js/gfs.json').then(function(response) {
  return response.json();
}).then(function(json) {
  windy = new Windy({canvas: canvas, data: json });
  refreshWindy();
});

map.on('moveend', refreshWindy);
	<!doctype html>
	<html lang="en">
	<head>
	<title>windy.js integration example</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	<link rel="stylesheet" href="http://openlayers.org/en/v3.15.0/css/ol.css" type="text/css">
	<style type="text/css">
	#map {
	width: 100%;
	height: 100%;
	position: relative;
	}
	div.fill {
	width: 100%;
	height: 100%;
	}
	#windyMap {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	}
	.ol-control {
	z-index: 2;
	}
	</style>
	</head>
	<body>
	<div id="map" class="map">
	<canvas id="windyMap" class="fill"></canvas>
	<div id="olMap" class="fill"></div>
	</div>
	<script src="http://openlayers.org/en/v3.15.0/build/ol.js" type="text/javascript"></script>
	<script src="http://esri.github.io/wind-js/windy.js" type="text/javascript"></script>
	<script src="script.js" type="text/javascript"></script>
	</body>
	</html>
	var map = new ol.Map({
	layers: [
	new ol.layer.Tile({
	source: new ol.source.Stamen({
	layer: 'toner'
	})
	})
	],
	interactions: ol.interaction.defaults({
	altShiftDragRotate: false,
	rotate: false
	}),
	target: 'olMap',
	view: new ol.View({
	center: [0, 0],
	zoom: 1
	})
	});

	var windy;
	var canvas = document.getElementById('windyMap');
	function refreshWindy() {
	if(!windy) {
	return;
	}
	windy.stop();
	var mapSize = map.getSize();
	var extent = map.getView().calculateExtent(mapSize);
	extent = ol.proj.transformExtent(extent, 'EPSG:3857', 'EPSG:4326');

	canvas.width = mapSize[0];
	canvas.height = mapSize[1];

	windy.start(
	[[0,0], [canvas.width, canvas.height]],
	canvas.width,
	canvas.height,
	[[extent[0], extent[1]],[extent[2], extent[3]]]
	);
	}

	fetch('http://esri.github.io/wind-js/gfs.json').then(function(response) {
	return response.json();
	}).then(function(json) {
	windy = new Windy({canvas: canvas, data: json });
	refreshWindy();
	});

	map.on('moveend', refreshWindy);