{"id":2951683,"date":"2026-02-24T02:30:52","date_gmt":"2026-02-24T10:30:52","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=2951683"},"modified":"2026-02-25T06:23:46","modified_gmt":"2026-02-25T14:23:46","slug":"arcgis-flowrenderer-flood-simulation-visualization","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/3d-gis\/arcgis-flowrenderer-flood-simulation-visualization","title":{"rendered":"Visualizing Flood Simulations: from ArcGIS Pro to the Web with Flow Rendering"},"author":423680,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[23771,615021,24371],"tags":[25781,25501,780988,763022,780938],"industry":[],"product":[36831,36551,36561],"class_list":["post-2951683","blog","type-blog","status-publish","format-standard","hentry","category-3d-gis","category-aec","category-public-safety","tag-3d","tag-flood","tag-flowrenderer","tag-simulation","tag-whats-new-february-2026","product-js-api-arcgis","product-arcgis-online","product-arcgis-pro"],"acf":{"authors":[{"ID":423680,"user_firstname":"Matteo","user_lastname":"Rizzi","nickname":"Matteo Rizzi","user_nicename":"mrizzi","display_name":"Matteo Rizzi","user_email":"mrizzi@esri.com","user_url":"","user_registered":"2025-11-24 09:20:36","user_description":"Matteo Rizzi is a Senior Product Engineer on the ArcGIS Maps SDK for JavaScript team at Esri R&D Center in Z\u00fcrich, Switzerland. He focuses on advancing 3D visualization and map components for Web GIS. Before joining Esri, Matteo worked as a web developer and GIS engineer using ArcGIS technology. His experience as an Esri user drives his commitment to improving the developer experience and helping developers build powerful geospatial web applications.","user_avatar":""}],"short_description":"Simulate extreme floods in ArcGIS Pro and bring results to the web with FlowRenderer for intuitive 3D visualization of water movement and risk.","flexible_content":[{"acf_fc_layout":"content","content":"

We are living in an era where extreme flooding happens far more than expected. Climate change is increasing the frequency and severity of these events. For the communities in the path of the water, the difference between preparation and disaster often comes down to how well they\u00a0understand the risk, especially when dealing with climate events that no one has\u00a0ever\u00a0seen before.<\/span>\u00a0<\/span><\/p>\n

For years, we have relied on static visualizations (usually blue polygons) to show flooding extents. They often\u00a0fail to\u00a0communicate the reality of a flood to non-experts because a blue shape on a map simply does not tell a resident how fast the water is moving or exactly where and when it is breaching. By the time water reaches the location you are trying to protect, it is often too late to act. Effective flood management is not about seeing the inundation; it is about understanding the source. You must know where the water comes from upstream to intercept or divert it before it becomes catastrophic.\u00a0<\/span>\u00a0<\/span><\/p>\n

In this post, I will show you how to use physics-based simulations in ArcGIS Pro to visualize water rushing through streets and around buildings in a\u00a0model<\/span>\u00a0<\/span>that\u00a0helps decision-makers intuitively understand the data.\u00a0<\/span>\u00a0<\/span><\/p>\n

I\u00a0will\u00a0then take those\u00a0high-accuracy\u00a0simulation results and use\u00a0FlowRenderer\u00a0both\u00a0in\u00a0Scene Viewer<\/a> and\u00a0the\u00a0ArcGIS Maps SDK for JavaScript<\/a> to\u00a0visualize animated streamlines that\u00a0represent\u00a0water movement\u00a0and\u00a0make them accessible in a browser.<\/span>\u00a0<\/span><\/p>\n

 <\/p>\n

Hurricane Helene in Boone, North Carolina, USA<\/span><\/span>\u00a0<\/span><\/h2>\n

On September 27, 2024, Hurricane Helene brought devastation to North Carolina.<\/span><\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2952580,"id":2952580,"title":"Hurricane Helene Satellite Animation from Gulf of Mexico to Southeast US Flooding","filename":"download.gif","filesize":20001627,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/download.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/3d-gis\/arcgis-flowrenderer-flood-simulation-visualization\/download-19","alt":"Satellite animation of Hurricane Helene in the Gulf of Mexico before flooding impacts Boone and Southeast US.","author":"423680","description":"Animated satellite view of Hurricane Helene over the Gulf of Mexico before striking Florida\u2019s Big Bend region. The storm shows a well-defined eye and dense spiral cloud bands, indicating strong rotation and intensity. After landfall, Helene caused severe flooding across Florida and southern Georgia, impacting communities including Boone. This GIF highlights the storm\u2019s trajectory and its role in widespread flooding across the Southeast US.","caption":"NOAA satellite imagery showing Hurricane Helene approaching Florida\u2019s Big Bend region, later causing flooding in Boone and across the Southeast.","name":"download-19","status":"inherit","uploaded_to":2951683,"date":"2025-12-22 15:35:38","modified":"2025-12-22 15:43:33","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":1000,"height":563,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/download-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/download.gif","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/download.gif","medium_large-width":768,"medium_large-height":432,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/download.gif","large-width":1000,"large-height":563,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/download.gif","1536x1536-width":1000,"1536x1536-height":563,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/download.gif","2048x2048-width":1000,"2048x2048-height":563,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/download-826x465.gif","card_image-width":826,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/download.gif","wide_image-width":1000,"wide_image-height":563}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

The town of Boone experienced flooding that many locals had simply never seen before. Most people know how to respond to ordinary heavy rain, yet rare, severe events challenge the expectations we have of our surroundings.<\/span><\/span>\u00a0<\/span><\/p>\n

When the water rises and moves that\u00a0fast,\u00a0“flood zones” on a paper map become abstract.\u00a0A 3D simulation, however,\u00a0doesn\u2019t just show where flooding will occur, but it reveals where the\u00a0water is coming from and how it will move through the landscape, so that people can clearly see which\u00a0buildings\u00a0and roads\u00a0are impacted, at which elevations the risk is higher, and how low-lying areas will react to overwhelming amounts of water.<\/span>\u00a0<\/span><\/p>\n

In this blog post, we will use the context of this specific flood in Boone to simulate the rainfall, watch the accumulation, and then publish those results to\u00a0ArcGIS Online<\/span>\u00a0<\/span>to visualize the water’s velocity and direction using the\u00a0FlowRenderer\u00a0in a 3D\u00a0web\u00a0scene.<\/span><\/p>\n

Create a flood simulation in ArcGIS Pro<\/span>\u00a0<\/span><\/h2>\n

The Flood Simulation tool in ArcGIS Pro is powerful, and it applies shallow water equations within a defined Area of Interest (AOI) to model exactly how water moves across the landscape. You can adjust rainfall intensity, add barriers, and define infiltration rates.\u00a0For more\u00a0details and configuration\u00a0options, check out\u00a0<\/span>Flood simulation in ArcGIS Pro Documentation<\/span><\/a>\u00a0and\u00a0<\/span>Flood Simulation Technical Paper<\/span><\/a>.\u00a0Here is a basic setup I created for this scenario.<\/span>\u00a0<\/span><\/p>\n

Configuration<\/span>\u00a0<\/span><\/h3>\n
    \n
  1. Open\u00a0<\/span>ArcGIS Pro<\/span><\/b>\u00a0and create a\u00a0<\/span>Local\u00a0<\/span><\/b>Scene.<\/span>\u00a0<\/span><\/li>\n
  2. For a local simulation like this, you want to minimize distortion.\u00a0A\u00a0<\/span>Projected Coordinate System<\/span><\/b>\u00a0like\u00a0<\/span>UTM\u00a0<\/span><\/b>(Universal Transverse Mercator) preserves shapes and angles, which is important when you are calculating how water moves around physical obstacles (e.g., buildings). For Boone,\u00a0I\u2019m\u00a0using\u00a0<\/span>WGS 1984 UTM Zone 17N<\/span><\/b>.<\/span>\u00a0<\/span><\/li>\n
  3. Navigate to the\u00a0<\/span>Analysis\u00a0<\/span><\/b>tab, then\u00a0<\/span>Simulation<\/span><\/b>, and select\u00a0<\/span>Rainfall<\/span><\/b>.<\/span>\u00a0<\/span><\/li>\n
  4. Here you define your analysis extent or Area of Interest (AOI) by drawing a polygon around the area you want to simulate (e.g., downtown Boone).<\/span>\u00a0<\/span><\/li>\n
  5. Once the AOI is set, you need to\u00a0specify\u00a0the conditions of the weather event. You can set among the others:<\/span>\u00a0<\/span><\/li>\n
  6. Rainfall Rate<\/span><\/b>: How many inches\/millimeters per hour? (e.g., 2.5 inches or\u00a065 mm\u00a0per hour)<\/span>\u00a0<\/span><\/li>\n
  7. Duration<\/span><\/b>: How long does the\u00a0event\u00a0last? (e.g., 30 minutes)<\/span>\u00a0<\/span><\/li>\n
  8. By default, the simulation\u00a0takes into account\u00a0all visible layers in your 3D scene, including your 3D buildings.\u00a0This means the water will flow around houses and down alleyways.<\/span><\/li>\n<\/ol>\n

     <\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2952576,"id":2952576,"title":"Configuring Flood Simulation in ArcGIS Pro for Boone Area","filename":"annotely_image-1-scaled.png","filesize":1447530,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/annotely_image-1-scaled.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/3d-gis\/arcgis-flowrenderer-flood-simulation-visualization\/annotely_image-1","alt":"ArcGIS Pro flood simulation setup showing Boone map extent and configuration pane with key parameters.","author":"423680","description":"Screenshot of ArcGIS Pro used to configure a flood simulation for Boone. The image shows the Simulation tab and Configure Simulation pane with highlighted inputs such as cell size, duration, rainfall rate, participating layers, and surface roughness raster. The Boone map extent is outlined in orange, indicating the area for the flood model.","caption":"ArcGIS Pro flood simulation setup showing Boone map extent and configuration pane with key parameters.","name":"annotely_image-1","status":"inherit","uploaded_to":2951683,"date":"2025-12-22 15:16:59","modified":"2025-12-22 15:17:58","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2560,"height":1517,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/annotely_image-1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/annotely_image-1-scaled.png","medium-width":440,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/annotely_image-1-scaled.png","medium_large-width":768,"medium_large-height":455,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/annotely_image-1-scaled.png","large-width":1823,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/annotely_image-1-1536x910.png","1536x1536-width":1536,"1536x1536-height":910,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/annotely_image-1-2048x1213.png","2048x2048-width":2048,"2048x2048-height":1213,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/annotely_image-1-785x465.png","card_image-width":785,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/12\/annotely_image-1-1823x1080.png","wide_image-width":1823,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

    Run<\/span>\u00a0<\/span><\/h3>\n

    At this point, you can run<\/strong> the simulation. Depending on your hardware and the size of your AOI, this might take a moment. As it processes, you will see the water\u00a0move and\u00a0accumulate\u00a0in your scene.<\/span>\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"kaltura","video_id":"1_w6xytgai","time":false,"start":0,"stop":""},{"acf_fc_layout":"content","content":"

    Export<\/span>\u00a0<\/span><\/h3>\n

    With the simulation data ready, the next step is to visualize it on the web for easy sharing. Before doing\u00a0that, I first need to export the results.<\/span>\u00a0<\/span><\/p>\n

      \n
    1. Go to Simulation > Export >\u00a0<\/span>Export Analysis Results<\/span><\/b>.<\/span>\u00a0<\/span><\/li>\n
    2. Format: Select\u00a0<\/span>CRF\u00a0<\/span><\/b>(<\/span>Cloud Raster Format<\/span><\/b>). This is a multidimensional format that supports\u00a0time\u00a0and multiple bands.<\/span>\u00a0<\/span><\/li>\n
    3. Start Time:\u00a0Set\u00a0the start time for the exported dataset. This can\u00a0represent\u00a0the actual time of a real event or a representative time for a hypothetical\u00a0scenario. This\u00a0is what links your exported time slices to the time slider in visualization tools, enabling temporal navigation through the simulation results.<\/span>\u00a0<\/span><\/li>\n
    4. Select only the\u00a0<\/span>Water Velocity<\/span><\/b>\u00a0as your output\u00a0option\u00a0because\u00a0FlowRenderer\u00a0needs\u00a0magnitude\u00a0(speed) and direction. The “Water Velocity” export provides the U and V components (East-West and North-South vectors)\u00a0required\u00a0to draw animated streamlines.<\/span>\u00a0<\/span><\/li>\n<\/ol>\n

       <\/p>\n"},{"acf_fc_layout":"content","content":"

      Visualizing results on the web with\u00a0FlowRenderer<\/span>\u00a0<\/span><\/h2>\n

      Now that we have\u00a0our\u00a0.crf\u00a0file, we are going to publish a Hosted Tiled Imagery Layer and then visualize the flood simulation as\u00a0FlowRenderer\u00a0in Scene Viewer.<\/span>\u00a0<\/span><\/p>\n

      Publish to ArcGIS Online<\/span>\u00a0<\/span><\/h3>\n
        \n
      1. Log into ArcGIS Online and go to your<\/span>\u00a0Content<\/span><\/b>.<\/span>\u00a0<\/span><\/li>\n
      2. Click\u00a0<\/span>New Item<\/span><\/b>\u00a0->\u00a0<\/span>Imagery Layer<\/span><\/b>.\u00a0<\/span>\u00a0<\/span><\/li>\n
      3. Select\u00a0<\/span>Tiled Imagery Layer<\/span><\/b>\u00a0(this ensures high performance).<\/span>\u00a0<\/span><\/li>\n
      4. Select\u00a0<\/span>One Image<\/span><\/b>.<\/span>\u00a0<\/span><\/li>\n
      5. Drag and drop<\/span><\/b>\u00a0your\u00a0exported\u00a0<\/span>.crf\u00a0folder<\/span><\/b>\u00a0into the upload area.<\/span>\u00a0<\/span><\/li>\n
      6. While all the files in\u00a0the .crf\u00a0folder are being loaded, click the\u00a0<\/span>Configure properties\u00a0<\/span><\/b>button. Here you will see a\u00a0<\/span>Source Type\u00a0<\/span><\/b>dropdown. You need to select\u00a0<\/span>Vector-UV.<\/span><\/b>
        \n\u00a0<\/span><\/li>\n<\/ol>\n

        Visualization using Scene Viewer\u00a0<\/span>\u00a0<\/span><\/h3>\n

        The\u00a0easiest way to visualize and share your data is using\u00a0Scene\u00a0Viewer\u00a0which supports flow style for imagery layers\u00a0since October\u00a02025.<\/span>\u00a0<\/span><\/p>\n

          \n
        1. Open your new Imagery Layer in\u00a0<\/span>Scene Viewer<\/span><\/b>.<\/span>\u00a0<\/span><\/li>\n
        2. Initially, you will receive a warning that the default \u201cVector Field\u201d is not supported. Open the\u00a0<\/span>Layer Style<\/span><\/b>\u00a0panel and select\u00a0<\/span>Flow<\/span><\/b>.<\/span>\u00a0<\/span><\/li>\n
        3. You will see the water rushing down the streets of Boone. You can modify the styling of the streamlines by controlling the density<\/code>, the length<\/code>, and the width<\/code> of the streamlines, and how the color<\/code> ramps map to the water speed. To better understand how these parameters work, read the FlowRenderer API Reference<\/a><\/b>.\u00a0<\/span><\/li>\n
        4. Flood simulations typically involve low numerical magnitudes with high impact. For example, water velocities around 2\u202fm\/s are already considered dangerous in flood scenarios, even though they appear small compared to other vector datasets. To ensure these subtle but critical streamlines remain visible, Scene Viewer provides a length scale factor option. Enabling the 10\u00d7 factor is therefore necessary to compensate for low magnitudes and clearly communicate risk and movement that would otherwise be difficult to see.<\/li>\n
        5. Thanks to the time<\/strong> dimension<\/strong> of the tiled imagery layer, we can visualize the change in time. At the beginning, the ground is mostly dry. Then, water begins to accumulate in flat areas, gradually spreading across the landscape. By the end, the river breaches, sending fast-moving water through the main channels and significantly increasing flow velocity.<\/span>
          \n<\/span><\/li>\n<\/ol>\n

           <\/p>\n"},{"acf_fc_layout":"kaltura","video_id":"1_8u3wisyn","time":false,"start":0,"stop":""},{"acf_fc_layout":"content","content":"

          You can explore the visualization directly in Scene Viewer with this web scene<\/a><\/span>\u00a0with the flow parameters and layers already configured.<\/span>\u00a0<\/span><\/p>\n

          Visualization using ArcGIS Maps SDK for JavaScript<\/span>\u00a0<\/span><\/h3>\n

          For those of you building custom apps, you can implement this programmatically using the ArcGIS Maps SDK for JavaScript. To see how the\u00a0<\/span>FlowRenderer\u00a0<\/span><\/b>is used in a 3D scene with an\u00a0<\/span>ImageryTileLayer\u00a0<\/span><\/b>(as published in the\u00a0previous\u00a0steps), check out these samples:<\/span>\u00a0<\/span><\/p>\n