Vector Risk Portals

Interactive webmaps and visualizations showing risk of vector mosquitoes for countries and cities.

Overview

Vector Risk Portals is a static web application that provides interactive maps and data visualizations for vector-borne disease risk assessment. The platform displays risk information generated by predictive models for various regions including Spain, Brazil, Barcelona, and Rio de Janeiro.

Features

• Interactive Maps: Explore detailed risk maps with multiple layers using Leaflet.js and Mapbox GL JS
• Data Visualizations: View risk trends and patterns through interactive charts with toggleable legends
• Multiple Regions: Access risk data for countries (Spain, Brazil) and cities (Barcelona, Rio de Janeiro)
• Date Selection: View historical risk data for Spain and Barcelona
• Vector & Model Selection: Choose mosquito species and prediction models (more options coming soon)
• Data Loading: Supports CSV, GeoJSON, and GeoTIFF file formats
• Basemap Options: Choose from OpenStreetMap, Satellite, Light Street Map, or Topographic views
• Responsive Design: Works on desktop and mobile devices
• GitHub Pages Ready: Static site designed for easy deployment on GitHub Pages

Technology Stack

• HTML5/CSS3: Modern web standards
• JavaScript (ES6+): Client-side logic
• Leaflet.js: Interactive mapping library for most regions
• Mapbox GL JS: Vector tile rendering for Spain municipality data
• Chart.js: Data visualization
• GeoRaster: GeoTIFF support for raster data
• Chroma.js: Color scale generation

Project Structure

vector-risk/
├── index.html              # Main HTML file
├── css/
│   └── style.css          # Styling
├── js/
│   ├── app.js             # Main application logic
│   ├── config.js          # Configuration and region definitions
│   ├── dataLoader.js      # Data loading utilities
│   ├── mapManager.js      # Map management
│   └── visualization.js   # Chart and visualization logic
├── data/
│   ├── *-timeseries.csv   # Time-series risk data
│   ├── *-risk.geojson     # Spatial risk data
│   └── *-risk.tif         # Raster risk data (optional)
└── assets/                # Additional resources

Data Sources

The application loads data from the following file types:

• CSV files: Time-series data with risk levels, temperature, humidity, and mosquito observation counts
• GeoJSON files: Spatial data with geographic features and risk properties
• GeoTIFF files: Raster data for continuous risk surfaces (optional)

Data Format Examples

CSV Format:

date,risk_level,temperature,humidity,observations
2024-01-01,35.2,12.5,65.3,15

GeoJSON Format:

{
  "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "properties": {
      "name": "Location Name",
      "risk_level": "high",
      "risk_score": 75.3
    },
    "geometry": {
      "type": "Point",
      "coordinates": [longitude, latitude]
    }
  }]
}

Usage

Local Development

1. Clone the repository:

   git clone https://github.com/E4Warning/vector-risk.git
   cd vector-risk

2. Serve the files using a local web server:

   python -m http.server 8000
   # or
   npx serve

3. Open your browser to http://localhost:8000

GitHub Pages Deployment

1. Go to repository Settings > Pages
2. Select the branch to deploy (usually main)
3. Select root (/) as the source folder
4. Save and wait for deployment

The site will be available at: https://e4warning.github.io/vector-risk/

Adding New Regions

To add a new region, follow these steps:

1. Add configuration in js/config.js:

   'new-region': {
       name: 'New Region',
       type: 'country', // or 'city'
       center: [latitude, longitude],
       zoom: 6,
       dataSources: {
           geojson: 'data/new-region-risk.geojson',
           csv: 'data/new-region-timeseries.csv',
           geotiff: 'data/new-region-risk.tif'
       }
   }

2. Add data files in the data/ folder following the format examples

3. Update navigation in index.html to include the new region in the menu

Customization

Risk Color Scale

Edit the riskColors object in js/config.js to customize the color scheme:

riskColors: {
    'very_low': '#4575b4',
    'low': '#91bfdb',
    'medium': '#fee090',
    'high': '#fc8d59',
    'very_high': '#d73027'
}

Map Tile Layer

Change the base map by modifying tileLayer in js/config.js:

tileLayer: {
    url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    attribution: '...'
}

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

About

The Vector Risk Portals site is being developed under the E4Warning project (Eco-Epidemiological Intelligence for early Warning and response to mosquito-borne disease risk in Endemic and Emergence settings) funded by the European Union's Horizon Europe programme under Grant Agreement 101086640.

License

This project is licensed under the GNU General Public License v3.0 - see the LICENSE file for details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Contact

For questions or issues, please open an issue on GitHub.