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 realtime data and historical storage directories:

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

With this setup, public URLs remain under /data/.... Nginx first looks in /usr/share/nginx/html/data and then falls back internally to /usr/share/nginx/html/data_storage.

Run with automated processing enabled:

docker run -d -p 8080:80 \
  -v $(pwd)/data:/usr/share/nginx/html/data:ro \
  -v $(pwd)/data_storage:/usr/share/nginx/html/data_storage: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 12:00 UTC (logs: /tmp/process_events_full.log)

Incremental processing reads only the realtime data directory. Full rebuilds also include the historical storage directory when it is mounted.

Run with initial data processing:

docker run -d -p 8080:80 \
  -v $(pwd)/data:/usr/share/nginx/html/data:ro \
  -v $(pwd)/data_storage:/usr/share/nginx/html/data_storage: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 events at startup before starting the Nginx server. It processes recent events from the realtime data directory first, then starts a full rebuild in the background; the full rebuild also includes data_storage when mounted.

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 \
  -v $(pwd)/data_storage:/usr/share/nginx/html/data_storage: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 realtime data/ directory and generates events.json.

Process all realtime events:

./process_events.sh --data-realtime-dir data/

Process realtime and historical storage events:

./process_events.sh --data-realtime-dir data/ --data-storage-dir data_storage/ --exclude-dir-end _ri

The --data-storage-dir option is valid only for full rebuilds. If the same event exists in both directories, the realtime directory has priority and the storage copy is skipped.

Process a single event:

./process_events.sh --data-realtime-dir data/ -e <eventid>

Example: ./process_events.sh --data-realtime-dir data/ -e 44683062

Process the last 5 realtime events:

./process_events.sh --data-realtime-dir data/ -l 5 --exclude-dir-end _ri

3. Serve the Portal

Example with Python HTTP server:

python3 -m http.server 8000

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

Python's simple HTTP server cannot provide the /data/... to data_storage/ fallback. Use the provided Nginx configuration when historical storage must be exposed without changing public URLs.

Directory Structure

• data/: Contains ShakeMap event data.
• data_storage/: Optional historical ShakeMap event data served as an internal fallback for /data/... URLs.
• 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