Skip to content

Add Interactive Global Impact Map Feature #681

@NagasaiPraneeth

Description

@NagasaiPraneeth

Feature Overview

Add an interactive world map that visualizes Sugar Labs' global impact, showing deployments across different countries with statistics and success stories.

Purpose

This feature will:

  • Showcase the global reach of Sugar Labs projects
  • Provide quantitative data on students reached and deployments
  • Share success stories from different regions
  • Help potential donors, partners, and users understand our impact

Implementation Details

New Files to Create:

  1. impact-map.html - Main page for the feature
  2. css/impact-map.css - Styling for the map and related elements
  3. js/impact-map.js - JavaScript functionality for the interactive map
  4. assets/images/impact-map/ - Directory for deployment images
  5. assets/images/impact-map/README.md - Documentation for image requirements

Modifications to Existing Files

  1. _includes/nav.html - Add link to Impact Map in the About dropdown menu
  2. _layouts/base.html - Include the impact-map.css file
  3. sitemap.txt - Add the new page to the sitemap

Technical Requirements

  • Uses Leaflet.js for the interactive map (open-source JavaScript library)
  • Responsive design that works on mobile and desktop
  • Accessible to screen readers
  • Follows existing site styling conventions

Feature Components

1. Interactive Map

  • World map with markers for each deployment location
  • Popup information when clicking on markers
  • Filtering options (National/Regional/School deployments)

2.Impact Statistics

  • Number of countries reached
  • Total students impacted
  • Number of deployments
  • Animated counters for visual appeal

expected feature:

Image

Image

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions