HazMap app

The HazMap app supports the management of natural hazards and disaster events by providing its users data from complementing European and national open sources including that collected through crowdsourcing. The app aggregates actionable information and allows professional users (civil protection, water and environmental management, policy makers) but also citizens to effectively prevent and react against disasters.

The HazMap app integrates information from Copernicus EMS with data from complementing open sources and allows users to collect hazard related information through geo-tagged photos and annotations directly in the field.

This is the source code for the hazmap app. A running prototype lives at https://hazmap.terranea.de/.

EOVALUE

This application has been developed within the EOVALUE project, which has received funding from the European Union’s Horizon 2020 research and innovation programme. The JRC, or as the case may be the European Commission, shall not be held liable for any direct or indirect, incidental, consequential or other damages, including but not limited to the loss of data, loss of profits, or any other financial loss arising from the use of this application, or inability to use it, even if the JRC is notified of the possibility of such damages.

Used Technologies and Data

Client:

The app was created as a single page app and uses the following open source technologies:

• User interface and interactivity: Svelte
• Map rendering: Mapbox Gl JS
• Data sync and authentication: Firebase js sdk

Backend:

• Data storage: Cloud Firestore
• Picture and file storage: Cloud Storage
• User authentication and authorization: Firebase Authentication

Data:

• Disaster Events: Copernicus EMS Activations
• Flood Risk: BFG OpenData
• Gauge Stations: Pegelonline
• Landcover: Corine LC BKG
• Critical Infrastructure: extracted from OSM data

Get started locally

Download the source code:

git clone https://github.com/terranea/hazmap.git
cd hazmap

Install the dependencies...

Note that you will need to have Node.js installed.

cd hazmap
npm install

...then run the development server to start the app:

npm run dev

Navigate to localhost:5000. You should see your app running.

Mapbox and Firebase Credentials

You need a Firebase and a Mapbox account for the app to work. Put an .env file with your own environment variables (see below) in the root directory.

.env file example:

MAPBOX_ACCESS_TOKEN=your-key
FIREBASE_apiKey=your-key
FIREBASE_authDomain=your-domain
FIREBASE_databaseURL=your-dburl
FIREBASE_projectId=your-projectId
FIREBASE_storageBucket=your-bucketID
FIREBASE_messagingSenderId=your-msgSenderId
FIREBASE_appId=your-appId

Build the app

Run the build command to build it for the web:

npm run build

all neessary files are located in the folder "public"