Skip to content

Instantly share code, notes, and snippets.

@tsauerwein
Created April 19, 2016 20:21
Show Gist options
  • Save tsauerwein/5355d4a8bbfcbc7f254862eb11b803f7 to your computer and use it in GitHub Desktop.
Save tsauerwein/5355d4a8bbfcbc7f254862eb11b803f7 to your computer and use it in GitHub Desktop.
OpenLayers 3 + windy.js
<!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);
@thatcuriousgirl
Copy link

But is there any other way to use it for EPSG:4326 as in my application I am using EPSG:4326 and I want to plot this in that projection only.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment