D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
jcnesci
Full window
Github gist
Windmap-1
Built with
blockbuilder.org
<!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>
https://js.arcgis.com/3.12compact/