Flood Risk Mapping in Afghanistan- An Interactive Web Mapping App
Background
During the last few years, Afghanistan has experienced highly uncertain climatic conditions, varying between cycles of drought to eras of frequent and severe flooding. Western part of the country, particularly, Herat province is one of most affected provinces due to various natural disasters specially flooding. The government of Afghanistan has recently constructed one of the biggest dam in Herat province called “Salma Dam” and hence, the government wants to assess and map various hazards of natural disasters around the nearby districts of the dam.
One of the multi hazard assessment exercise, supported by the International Organization for Migration (IOM) Afghanistan, has recently helped the Afghanistan National Disaster Management Authority (ANDMA) to collect primary data on the existing and potential hazards of the natural disasters in the country. One of the Hazard is flood risk which is the highest among the others.
Since I am working in IOM Afghanistan as Information Management Officer, I tried to visualize the flood risk data for Herat province in an interactive web mapping application.
Objective:
The objectives of this information product are:
- To visualize the tabular data in an interactive web mapping tool to provide easy readability;
- To help the field staff of ANDMA to identify locations that are under risk easily;
- To enable the policy makers and project developers to find out suitable location for their key investments and infrastructure development like roads, schools, hospitals, etc.
Features of the application
- It is a web based interactive application
- You can overly different layers on the base map to find out the overlaying features (switching layers on and off)
- The application has the search capacity to search particular location (using GPS) to locate
- Zoom in and Zoom out features
- Legends of the layers
- Satellite image overly to make the visualization more clear and natural looking
- Very performant since the application is using tiles of Map Box having caching features
Technology used
I have used the following technologies to achieve it
- HTML 5
- Geo Ext
- Map Box (using Mapbox GL JS)
- Map Box Open Layers 2
- JavaScript
Data
The primary date on the flood exposure risk is obtained from the Government and IOM joint initiative “Multi-hazard assessment in Herat Province” which is open to public while the other layers such as settlements, critical facilities and road network data was obtained from a public, crowdsourced portal “Afghan Geonode, https://disasterrisk.". The layers are available on Github.
Live Link to Application
You can have a look at the final product by visiting the Link
How I did it
Description of Technology used
I have used the Geo Ext for building the web mapping application, which is open source, rapidly developing JavaScript framework for building rich, web-based GIS applications. It combines the GIS functionality of Open Layers with the user interface of the Ext JS library provided by Sencha, together with Open Layers which are open source, high-performance, feature-packed JavaScript library. It can display vector data (point, line, and polygon), Tiled layer and markers.
My map development tools is Mapbox Studio which is an open source, high-performance, and live location application. This tool is used for managing geospatial data and designing custom map styles.
Digital maps are comprised of three major parts:
- Geospatial data: Mapbox uses Tilesets as a geospatial data format when displaying maps. Tilesets are a lightweight storage format for both raster and vector data. Uploaded data to the Mapbox, is stored as a Tileset.
- Styling rules: When the user define how data should be styled in the Mapbox Studio style editor, this information is stored in a JSON Format.
- Display: User can use Mapbox Maps SDK for iOS or Android on mobile or Mapbox GL JS on the web
Steps
Uploading Data to MapBox
1. Uploading data to Tilesets: Open Mapbox studio, Go to the Tilesets page, Click the New Tilesets button, Import zipped shapefile and Click Confirm to upload the file to the account.
2. Creating new style: Go to the Styles page in Mapbox Studio, Click the New Style button. Find the style and click Customize Template (in this map dark style selected).
3. Creating layer from Tileset: At the top of the layer panel, click + Add layer, in the list of Data sources, search for added Tileset “E.g. Airport” and select the intended Tileset, Click the Type option, and select the type of layer.
4. Publishing Layer: After configuring layer property like color, opacity, radius, Blur, Stroke Width , etc. you can click on publish to make change in draft and production style. Then clicking on the share button you can use style URL of the layer in your map.
Creating Web Application
Getting to start with Geo Ext:
GeoExt is built on the robust OpenLayers JavaScript mapping library and the rich graphical components of ExtJS. For licensing reasons, ExtJS cannot be included in the GeoExt download.so
1- Download GeoExt
2- Download OpenLayers
3- Download Ext Js
Note: In this application GeoExt 2, OpenLayers 2 and ExtJS 5 are Used.
Start building Geo Ext application:
- Include all necessary libraries in the web page (app.HTML).
2. For representing an entire app, you should add Ext.aplication component of ExtJS which include all part of the app.
3. MapPanel is the most important section of GeoExt application, it displays rendered data and tiles from Mapbox.
a) The region property describes the location of MapPanel
b) Center description the center point coordinate of the map
4. For display data from Mapbox you can use instances of OpenLayers.Layer.XYZ .
In the below code:
a) Population Density (Person/Sq.km): is the name of the layer which will display in the map legend
b) https://api.mapbox.com/styles/v1/mapbox/cjxyb505v0cyw1cnyu18qnr7v/: is the URL of Mapbox style
c) Tiles/256/${z}/${x}/${y}: is define Tile size
d) Access_token= “our access taken” is associated API requests with the account.
5. The Tree Store provides convenience methods for loading nodes use the hierarchical tree structure.
In the below code:
a) The model used to maintain the state of copied tree fields.
b) To read nested data in the tree, the Ext reader must be configured with a root property
c) gx_layercontainer plugin used to create a tree node that holds the layers of a tree.
6. Ext.Viewport is an instance, representing the viewable application area and all item added to it. The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page. The different layout should be chosen like fit layout, border layout card layout, etc.
7. The TreePanel provides tree-structured UI representation of tree-structured data. A TreePanel must be bound to an Ext.data.TreeStore (description in step 5) by default, TreePanel contains a single column and it supports multiple columns.
8. For add geolocation search to the app the GeocoderCombobox configured to the OpenStreetMap nomination.
9. For displays an overview map of a parent map xtype overview (a component of ExtJS) used.
10. For display the coordinate (lon, lat) of every point in the Map new OpenLayers.Control.MousePosition function used.
Download Complete Code
To download the complete application, please click on Github Link
Conclusion
This visualization is a starting point to visualize disaster risks in a more interactive way and to overlay different layers to find out the key potential impacts of the disaster in a particular area. This exercise can be more improved and extended to visualize multi-hazards and ultimately pave the way to develop a disaster risk portal for helping key policy makers and humanitarian agencies about the potential risks in order to plan better disaster relief the operations and mitigate disaster risks.
