tech-map-canada

Overview

The Interactive Company Map is a dynamic web application that leverages Flask and Leaflet.js to present an engaging visualization of company locations across Canada. Users can interact with a full-screen map and explore company details seamlessly.

Key Features

• Interactive Map: A full-screen view featuring company location markers.
• Scrollable Sidebar: A sidebar that provides a list of companies with easy navigation.
• Information Popups: Clickable markers that reveal detailed company information.
• Responsive Design: Optimized for various screen sizes for mobile and desktop use.
• Search and Filter Options: Users can search for companies and filter results based on work field and location.
• Dynamic Interaction: Company cards can center the map upon selection for enhanced user experience.

Technology Stack

• Backend: Python Flask
• Frontend: HTML, CSS, JavaScript
• Mapping Library: Leaflet.js
• Data Storage: JSON files for easy manipulation of company data.

Project Structure

The application is organized as follows:

company-map/
├── app.py                  # Core Flask application
├── requirements.txt        # Project dependencies
└── static/
    └── companies.json      # Contains company data
└── templates/
    └── index.html          # Main HTML template

Example Usage

To add company data, the structure within companies.json should resemble:

{
    "companies": [
        {
            "name": "Company Name",
            "location": "City, State",
            "coordinates": [latitude, longitude],
            "website": "https://company-website.com",
            "workField": "Industry Field"
        }
    ]
}

Contribution Guidelines

Contributing to the project is encouraged. Steps include forking the repository, editing the companies.json file, adhering to the existing format, and submitting a pull request.

Video Demonstration

A demonstration of the application can be viewed here or on YouTube.

This application provides a user-friendly interface for exploring Canadian companies, integrating the latest web technologies for a functional and informative experience.