Service	Master	Develop
Build Status
Version

ShakeMap Web Portal

This project provides a static web portal to visualize ShakeMap data. It consists of a Bash script to process event data and a frontend (HTML/JS/CSS) to display it.

Features

• Event List: View all processed ShakeMap events.
• Search: Filter events by Start Time, End Time, and Minimum Magnitude.
• Event Details: Interactive Leaflet map showing:
  • Epicenter
  • Intensity Contours (MMI)
  • PGA, PGV, PSA Layers
  • Seismic Stations
• Product Download: Access and download static ShakeMap products.
• Mobile Responsive: Works on desktop and mobile devices.

Setup & Usage

Option A: Docker (Recommended)

Docker provides a self-contained environment with all dependencies included.

Preferred: Pull from Docker Hub

Run with data directory as volume:

docker run -d -p 8080:80 -v $(pwd)/data:/usr/share/nginx/html/data:ro --name shakemap4-web__container ingv/shakemap4-web

Run with automated processing enabled:

docker run -d -p 8080:80 \
  -v $(pwd)/data:/usr/share/nginx/html/data:ro \
  --name shakemap4-web__container \
  -e ENABLE_CRONTAB=true \
  ingv/shakemap4-web

When ENABLE_CRONTAB=true is set, the container will automatically:

• Process the last 5 events every 2 minutes (logs: /tmp/process_events_incremental.log)
• Reprocess all events daily at 00:10 UTC (logs: /tmp/process_events_full.log)

Run with initial data processing:

docker run -d -p 8080:80 \
  -v $(pwd)/data:/usr/share/nginx/html/data:ro \
  --name shakemap4-web__container \
  -e PROCESS_ALL_DATA_FIRST_TIME=true \
  ingv/shakemap4-web

When PROCESS_ALL_DATA_FIRST_TIME=true is set, the container will process all events in the data directory at startup before starting the Nginx server. This is useful for initializing the events.json file on first deployment.

Run with a specific environment profile (e.g. EU):

docker run -d -p 8080:80 \
  -v $(pwd)/data:/usr/share/nginx/html/data:ro \
  --name shakemap4-web__container \
  -e SHAKEMAP_ENV=eu \
  ingv/shakemap4-web

Configuration Environment Variables

Variable	Description	Default	Example
ENABLE_CRONTAB	Enable automated event processing via cron	false	true
PROCESS_ALL_DATA_FIRST_TIME	Process all events at container startup	false	true
SHAKEMAP_ENV	Environment profile to load (ingv, eu, or custom)	ingv	eu

Notes:

• All environment variables are optional. If not set, the INGV defaults from js/config-base.js are used.
• SHAKEMAP_ENV selects which environment profile from js/profiles/ to copy into js/config-env.js at container startup. To add a new environment, create a js/profiles/<name>.js file with Object.assign(config, { ... }) overrides.

Alternative: Build Docker image locally

Build the Docker image:

docker build -t ingv/shakemap4-web .

Run with data directory as volume:

docker run -d -p 8080:80 -v $(pwd)/data:/usr/share/nginx/html/data:ro --name shakemap4-web__container ingv/shakemap4-web

Run with automated processing enabled:

docker run -d -p 8080:80 \
  -v $(pwd)/data:/usr/share/nginx/html/data:ro \
  --name shakemap4-web__container \
  -e ENABLE_CRONTAB=true \
  ingv/shakemap4-web

Then open http://localhost:8080 in your browser.

---

Option B: Manual Setup with Web Server

If you prefer to run without Docker, you'll need to manually set up the environment.

1. Prerequisites

• bash
• jq (for JSON processing)
• xmllint (libxml2, for XML processing)
• Web Server (Nginx, Apache, or Python HTTP server)

2. Data Processing

The process_events.sh script scans the data/ directory and generates events.json.

Process all events:

./process_events.sh

Process a single event:

./process_events.sh -e <eventid>

Example: ./process_events.sh -e 44683062

3. Serve the Portal

Example with Python HTTP server:

python3 -m http.server 8000

Then open http://localhost:8000 in your browser.

Directory Structure

• data/: Contains ShakeMap event data.
• css/: Stylesheets.
• js/: JavaScript logic.
• index.html: Main entry point.
• process_events.sh: Backend processing script.
• events.json: Generated data file.

Customization

• Map Layers: configured in js/app.js (initMap function).
• Styles: css/style.css.

Thanks to

This work has been partially funded by:

• Seismology and Earthquake Engineering Research Infrastructure Alliance for Europe (SERA) project
• European Union’s Horizon 2020 research and innovation program Grant Agreement Number 730900
• Italian Civil Protection (2019–2021) B2 ShakeMap adjournment project.

Contribute

Thanks to your contributions!

For develop run:

docker run --rm -p 8085:80 -e ENABLE_CRONTAB=true -e SHAKEMAP_ENV=ingv -v $(pwd):/usr/share/nginx/html --name shakemap4-web__container ingv/shakemap4-web

Note: SHAKEMAP_ENV selects the environment profile (ingv, eu, or custom). When mounting the full project directory, the entrypoint generates js/config-env.js locally — this file is gitignored.

Here is a list of users who already contributed to this repository:

Author

(c) 2026 Valentino Lauciani valentino.lauciani[at]ingv.it

Istituto Nazionale di Geofisica e Vulcanologia, Italia