Introduction

Idea

The EventExplorer UI is a generic application scaffold that provides basic features to accelerate the creation of web-based map applications.

An application scaffold, also known as a boilerplate or template, provides a foundation for building a software application. It typically includes pre-configured libraries, frameworks, and code structures that enable developers to quickly set up the basic infrastructure of their application.

Using an application scaffold offers several benefits, including reducing development time and costs, improving code quality and consistency, and ensuring compatibility with other software components. It also helps developers focus on implementing the specific features and functionality of their application, rather than spending time on setting up the basic architecture.

The scaffold can be used to quickly build a web-based map and display geographic assets like vector or raster data. In its core it is build around events and its visualization and exploration.

Technical Features in a nutshell

• Ready-to-use application scaffold

• Components can be customized and extended

• Configurable base map (configurable)

• Overlay Raster and Vector layers

• Support for OGC API - Features

• Support for WebSockets to allow pushing updates from server-side

• Light and dark theme

Basic software stack

The application is build using NuxtJS 2 and Vue 2, which are frameworks for building web user interfaces.

If you are already familiar with these technologies, you can fast forward to the Installation and Setup section.

If not, we recommend you to go through the official documentation or a tutorial of your choice, before you start. We have some recommendations below.

Tutorials

VueJS

• Vue - The Complete Guide

• Vue Mastery

• Vue School [guide for beginners]

• Vue JS for beginners (60 videos)

• Vue.js Crash Course 2021

• The Official Vue Documentation

NuxtJS

• The official Nuxt.js documentation

• Vue Mastery’s Nuxt.js course

• FreeCodeCamp’s Nuxt.js tutorial

• Scotch.io’s Nuxt.js tutorial

• Codeburst’s Nuxt.js tutorial

PortalVue

Vue uses components to encapsulate reusable code. The EventExplorer provides basic components that can easily be customized by replacing them with your own components. We use PortalVue for this purpose. Visit Customize Layout section to learn more.

Events

In the context of this application and our scientific domain, we define events as observable processes (natural, anthropogenic) that result in changes with potentially negative consequences for the environment and which may require actions to reduce or mitigate negative effects. Events and their effects generally have a geographic context and a time frame.

Examples of events of natural origin

• Earthquakes

• Tsunamis

• Volcanic ash & eruptions

• Landslides & lahars

• Heavy rain

• Floods

• Droughts

• Forest fires

• Storms and storm surges

Events of anthropogenic origin

• Illegal waste dumps

• Marine litter

• Illegal fishing activities

• Particulate matter