D3 Examples - Windmap

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Wind Animation</title>
​
    <link rel="stylesheet" href="https://js.arcgis.com/3.8/js/esri/css/esri.css">
​
    <style>
      html,body {
        width:100%;
        height:100%;
        margin: 0;
        padding: 0px 0 0 0;
      }
      #mapCanvas {
        padding:0;
      }
    </style>
​
    <script>
      var dojoConfig = { 
        paths: {
          plugins: location.pathname.replace(/\/[^/]+$/, "") + "/plugins"
        }
      };
    </script>
    <script src="./windy.js"></script>
    <script src="//js.arcgis.com/3.12compact/"></script>
    <script>
      var map, rasterLayer;
      var canvasSupport;
      require([
        "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", 
        "esri/domUtils", "esri/request",
        "dojo/parser", "dojo/number", "dojo/json", "dojo/dom", 
        "dijit/registry", "./RasterLayer.js","esri/layers/WebTiledLayer",
        "esri/config",
        "dojo/domReady!"
      ], function(
        Map, ArcGISTiledMapServiceLayer, 
        domUtils, esriRequest,
        parser, number, JSON, dom, 
        registry, RasterLayer, WebTiledLayer, esriConfig
      ){
        parser.parse();
        // does the browser support canvas? 
        canvasSupport = supports_canvas();
        
        map = new Map("mapCanvas", {
          center: [-99.076, 39.132],
          zoom: 3,
          basemap: "dark-gray"
        });
​
        map.on("load", mapLoaded);
        function mapLoaded() {
          // Add raster layer
          if ( canvasSupport ) {
            rasterLayer = new RasterLayer(null, {
              opacity: 0.75
            });
            map.addLayer(rasterLayer);
            
            map.on("extent-change", redraw);
            map.on("resize", function(){});
            map.on("zoom-start", redraw);
            map.on("pan-start", redraw);
            var layersRequest = esriRequest({
              url: './gfs.json',
              content: {},
              handleAs: "json"
            });
            layersRequest.then(
              function(response) {
                console.log(response);
                windy = new Windy({ canvas: rasterLayer._element, data: response });
                redraw();
            }, function(error) {
                console.log("Error: ", error.message);
            });
          } else {
            dom.byId("mapCanvas").innerHTML = "This browser doesn't support canvas. Visit <a target='_blank' href='https://www.caniuse.com/#search=canvas'>caniuse.com</a> for supported browsers";
          }
        }
        // does the browser support canvas? 
        function supports_canvas() {
          return !!document.createElement("canvas").getContext;
        }
        function redraw(){
          rasterLayer._element.width = map.width;
          rasterLayer._element.height = map.height;
          windy.stop();
          var extent = map.geographicExtent;
          setTimeout(function(){
            windy.start(
              [[0,0],[map.width, map.height]], 
              map.width, 
              map.height, 
              [[extent.xmin, extent.ymin],[extent.xmax, extent.ymax]]
            );
          },500);
        }
      });
    </script>
  </head>
  
  <body class="">
     <div id="mapCanvas" style="height:100%;">
     </div>
  </body>
​
</html>
​
    