{"id":1322972,"date":"2021-08-31T17:30:08","date_gmt":"2021-09-01T00:30:08","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1322972"},"modified":"2024-04-12T03:59:02","modified_gmt":"2024-04-12T10:59:02","slug":"visualize-and-animate-flow-in-mapview-with-a-custom-webgl-layer","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualize-and-animate-flow-in-mapview-with-a-custom-webgl-layer","title":{"rendered":"Visualize and animate flow in MapView with a custom WebGL layer"},"author":7921,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[738191],"tags":[],"industry":[],"product":[761642,36831],"class_list":["post-1322972","blog","type-blog","status-publish","format-standard","hentry","category-developers","product-platform","product-js-api-arcgis"],"acf":{"short_description":"Learn how to animate streamlines using WebGL and a custom layer.","flexible_content":[{"acf_fc_layout":"content","content":"

Introduction<\/strong><\/p>\n

This article discusses visualizing wind and water currents through animated streamlines<\/em>; the out-of-the-box<\/em> capabilities of the ArcGIS API for JavaScript (ArcGIS JS API) are combined with custom WebGL code to create compelling animated visualizations of real-world atmospheric and marine data.<\/p>\n

See it live<\/a> or check out the source code on GitHub<\/a>.<\/p>\n

Custom layers are an advanced topic; familiarity with WebGL and custom WebGL layer views is recommended. A good place to get started with extending the ArcGIS JS API with custom WebGL layer views is the official SDK sample<\/a>. And remember that your fellow developers at community.esri.com<\/a> are always happy to help!<\/p>\n

With that said… everyone deserves amazing maps<\/em>! Streamlines are a natural drawing style for flow datasets, and our team is considering adding them to the ArcGIS JS API. Join the discussion on community.esri.com<\/a> and share your ideas on how to bring this awesomeness to a larger audience!<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1333622,"id":1333622,"title":"animate-flow","filename":"animate-flow-1.gif","filesize":4593475,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/animate-flow-1.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/visualize-and-animate-flow-in-mapview-with-a-custom-webgl-layer\/animate-flow-2","alt":"","author":"7921","description":"","caption":"","name":"animate-flow-2","status":"inherit","uploaded_to":1322972,"date":"2021-08-23 19:37:16","modified":"2021-08-23 19:37:16","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":762,"height":446,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/animate-flow-1-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/animate-flow-1.gif","medium-width":446,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/animate-flow-1.gif","medium_large-width":762,"medium_large-height":446,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/animate-flow-1.gif","large-width":762,"large-height":446,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/animate-flow-1.gif","1536x1536-width":762,"1536x1536-height":446,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/animate-flow-1.gif","2048x2048-width":762,"2048x2048-height":446,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/animate-flow-1.gif","card_image-width":762,"card_image-height":446,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/08\/animate-flow-1.gif","wide_image-width":762,"wide_image-height":446}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/wind-es.s3.us-west-1.amazonaws.com\/demos\/winds.html"},{"acf_fc_layout":"content","content":"

The power of animations<\/strong><\/p>\n

Awesome datasets need awesome visualizations. The ArcGIS JS API ships with 2D<\/a> and 3D<\/a> support and a variety of layer types<\/a>, renderers<\/a>, effects<\/a>, and blend modes<\/a> that should cover the requirements of most users most of the time.<\/p>\n

In this blog post, we focus on animated visualizations<\/em>; animations can capture and communicate the dynamicity of certain datasets more effectively than static graphics. The ArcGIS JS API supports several forms of animations out-of-the-box<\/em> and my colleague Anne Fitz penned down a great writeup<\/a> covering several useful techniques that are applicable in a broad range of situations. With that said, certain applications call for a more customized experience; this is where custom WebGL layers<\/a> come into play.<\/p>\n

The images below show the same area of the map rendered in three different ways. For this article, we are focusing on an imagery tile layer\u00a0containing wind magnitude and direction for the continental United States<\/a>.<\/p>\n