# Multi-Hazard WebGIS Platform for Coastal Regions
## 2 Materials and Methods
### The MOSAIC Multi-Hazard Platform
#### 2.2.2 Platform Architecture  
The web portal is developed in Django ([[https://www.djangoproject.com/](https://www.djangoproject.com/)]([https://www.djangoproject.com/](https://www.djangoproject.com/)) (accessed on 10 May 2021)), a Python-based free and open-source web framework. The interface consists of a frontend and a backend, with a shared repository for data upload, storage and sharing. The frontend handles the user interactions through HTML pages, and the backend processes the user requests (with PostgreSQL Database--[[https://www.postgresql.org/](https://www.postgresql.org/)]([https://www.postgresql.org/](https://www.postgresql.org/)) (accessed on 10 May 2021)), similarly to [11]. It also resorts to external resources such as the e-service OPENCoastS and its WFS/WMS map server for the hydrodynamic SCHISM-WWM forecasts outputs, and LNEC's water data repository for in-situ data. The platform frontend interacts directly with the backend, acting as the main consumer of the operations performed in the backend to select the data requested by the user. The data is loaded based on the user interactions with the platform. Most of these actions are unlocked after the selection of an observatory. Figure 5 represents the workflow and the consumption of resources that occurs within the MOSAIC platform in order to obtain a successful visualization. Figure 4: Main dashboard and help center. Figure 5: MOSAIC platform workflow. When the user chooses an observatory, a numerical identifier is sent to the Django backend to be processed. This action triggers the unlocking of the results (_resultados_) tab, which remains inaccessible until the user chooses an observatory, as the results shown depend on the selected observatory. The observatory can be altered both in the data visualization page and on all of the remaining sections of the interface. Clicking on Observatory (_observationio_) and then on Change observatory (_alternar obs._) opens a pop-up that displays the list of available observatories (Figure 6). The user can then proceed to change the selected observatory. If this action is performed while on the data visualization page, the updated data for the newly chosen observatory is automatically loaded with the aid of an AJAX (asynchronous JavaScript and XML) request. A small cache system was implemented to store both the last selected observatory and data variable. This is done through a combination of cookies and an AJAX request sent to the backend which carries both the numerical identifier of the observatory and a string that identifies the variable. Both are stored in the session data that are available via Django and the next time the user performs a login on MOSAIC, the data are pre-loaded into the interface. Just like every portion of the website, the pop-up was created using a combination of HTML, CSS, Javascript with the aid of the Bootstrap ([[https://getbootstrap.com/](https://getbootstrap.com/)]([https://getbootstrap.com/](https://getbootstrap.com/)) (accessed on 10 May 2021)) open-source CSS framework. The color scheme chosen for the website is based on multiple shades of blue. Different shades of blue are used to highlight and differentiate portions of a webpage. Most pages within the interface are simple and straightforward, having only two to three elements. One of the elements corresponds to a text portion explaining the purpose of the page, while the remaining elements are where the users can interact and choose what they want to visualize on that page. The process of visualizing data on the interface occurs in two parts. The first part consists of the users' decision, where they choose the data they want to visualize which is transformed into a request sent to the portal backend. This request (corresponding to the second part of the process of visualizing data) is then processed in the backend, where the necessary filtering is performed, and the end result is then sent to the interface to be displayed. Figure 6: Observatory selection options: map (background) or list pop-up.