Create an Interactive Flood Resilience Map Using ArcGIS Experience Builder

What I Made:

I created an interactive map using ArcGIS Experience Builder that visualizes flood resilience in Toronto. This map brings together data on the Topographic Wetness Index (TWI), greenspaces, impervious surfaces, and sewer drainage to show how different factors contribute to mitigating flood risks. It allows users to toggle layers, search by TWI rating, and explore enhanced pop-ups with detailed information and quick links to Google Maps.

Why I Made It:

I wanted to explore how greenspaces and infrastructure play a role in reducing flood risks in urban areas, a topic closely tied to my background in water utilities and interest in flood systems. This tool can assist urban planners, developers, and homeowners in understanding flood-prone areas and making informed decisions about flood mitigation and urban development.

Tools and Materials

ArcGIS Pro

1. Used for data preparation, geoprocessing, and publishing web layers.

ArcGIS Online (AGOL)

1. Used for hosting web layers, creating the web map, and configuring pop-ups.

ArcGIS Experience Builder

1. Used to build the interactive web app, add widgets, and customize the layout.

Topographic Wetness Index (TWI) Data

1. Created using elevation data in ArcGIS Pro to identify flood-prone areas.
2. Ministry of Natural Resources

Greenspace Data

1. Data representing parks, forests, and other permeable surfaces.
2. Toronto Open Data Portal and Ministry of Natural Resources Land Use Data

Impervious and Pervious Surface Data

1. Layers showing roads, buildings, and other areas that contribute to water runoff.
2. Toronto Open Data Portal

Sewer Drainage Data

1. Infrastructure data for managing stormwater flow.
2. Toronto Open Data Portal

Arcade Expressions

1. Used in pop-ups to dynamically generate Google Maps links for location data.

Google Maps

1. Integrated with the app via pop-ups for location visualization.

Esri Basemaps

1. Provided basemaps for the visualization, accessible via ArcGIS Online.

What to Do:

1. Import raw data into ArcGIS Pro, including elevation data for TWI, greenspaces, impervious surfaces, and sewer drainage.
2. Geoprocessing:
3. Calculate TWI from elevation data to point out possible water accumulation areas.
4. Clip datasets to Toronto’s boundaries.
5. Standardize and normalize data.
6. Apply clear symbology to make layers visually distinct.

What to Do:

1. In ArcGIS Pro, right-click each layer and select Share as Web Layer.
2. If you share each layer individually you have more control over what you do with each layer.
3. Publish the layers to ArcGIS Online, ensuring each layer is configured as a hosted feature layer.
4. Check the hosted layers in ArcGIS Online to confirm successful uploads.

What to Do:

1. Open ArcGIS Online and create a new web map.
2. Add the published layers (TWI, greenspaces, impervious surfaces, sewer drainage).
3. Configure pop-ups for each layer:
4. Include relevant fields (TWI score, greenspace type).
5. Use an Arcade expression to create a dynamic Google Maps link
6. Save the web map.

What to Do:

1. Open Experience Builder and create a new experience using a blank template or a pre-designed layout.
2. Insert a Map Widget and connect it to your ArcGIS Online web map.
3. You can see how I added mine.
4. If you do not see your webmap, go into the Item Details page of your webmap and at the bottom you can toggle on use in Experience Builder.

What to Do:

1. Add interactive widgets to enhance user experience:
2. Layer List: For toggling TWI, greenspaces, impervious surfaces, and drainage layers.
3. Search Bar: Enable searching by TWI rating or address.
4. Dynamic Legend: Allow users to see active layers.
5. Pop-ups: Ensure pop-ups configured in ArcGIS Online are functional.
6. Customize the layout and style of the widgets.

What to Do:

1. Adjust the layout to make the app visually appealing:
2. Add a title widget with your map name.
3. Style fonts, colors, and widget containers for a cohesive design.
4. Use the Widget Controller to group multiple widgets.

What to Do:

1. Use Live View to test the app and ensure widgets and pop-ups work as intended.
2. Bounce back and forth between editing in the webmap and Experience Builder for different customizations.
3. Ensure the interactive experience is optimized for the device you want it to be used on (phone, tablet, or computer screen)
4. Interact with the map to ensure:
5. Layers toggle on/off correctly.
6. The search bar and dynamic legend function.
7. Pop-ups display desired attributes and Google Maps links.
8. Publish the app and generate a public URL.