TNF Routes

An interactive web application for visualizing political campaign routes across Ghana's regions. Built with OpenStreetMap and Leaflet.js for strategic campaign planning and route optimization.

Overview

This project provides an interactive map interface for visualizing and planning political campaign routes across Ghana's 16 regions. Originally developed for campaign strategy, it has been enhanced as a comprehensive portfolio project showcasing modern web development techniques and geospatial data visualization.

Features

Interactive Map

• Dynamic Route Visualization: View campaign routes with custom colors and styling
• Responsive Design: Fully optimized for desktop, tablet, and mobile devices
• Real-time Search: Search routes by region, name, or key stops
• Route Information Panel: Detailed statistics and descriptions for each route
• Interactive Markers: Clickable markers showing key campaign stops

Data Insights

• Population Statistics: Regional population data for each route
• Constituency Information: Number of constituencies covered
• Key Stops: Major cities and towns along each route
• Route Descriptions: Strategic context for each campaign path

Modern UI/UX

• Glass Morphism Design: Modern translucent interface elements
• Smooth Animations: Fade-in effects and transitions
• Intuitive Navigation: Easy-to-use dropdown and search functionality
• Custom Map Controls: Reset button and scale indicator

Live Demo

Visit the live application: Ghana Campaign Routes

Technologies Used

• HTML5: Semantic markup and structure
• CSS3: Styling with Tailwind CSS framework
• JavaScript (ES6+): Interactive functionality and data handling
• Leaflet.js: Open-source mapping library
• OpenStreetMap: Free and open geographic data
• GeoJSON: Geographic data format for route information
• Python: Data preprocessing, automation scripts and generating GeoJSON route files from raw location data.

Data Structure

Routes are stored in GeoJSON format with the following properties:

{
  "type": "Feature",
  "properties": {
    "name": "Route Name",
    "region": "Region Name",
    "description": "Route description",
    "color": "#hexcolor",
    "population": "Population figure",
    "constituencies": "Number",
    "keyStops": ["City1", "City2", "..."]
  },
  "geometry": {
    "type": "LineString",
    "coordinates": [[lng, lat], [lng, lat], ...]
  }
}

Getting Started

Prerequisites

• A modern web browser with JavaScript enabled
• Basic understanding of HTML/CSS/JavaScript (for modifications)

Installation

1. Clone the repository

   git clone https://github.com/NanaBright/pymap.git
   cd pymap

2. Open in browser

   # Simply open index.html in your web browser
   open index.html

Customization

Adding New Routes

1. Edit routes_constituencies.json to add new route data
2. Ensure proper GeoJSON format with required properties
3. Include coordinates as [longitude, latitude] pairs

Styling Modifications

• Update CSS classes in the <style> section of index.html
• Modify Tailwind classes for different color schemes
• Adjust map styling in the JavaScript section

Data Updates

• Population figures can be updated in the properties section of each route
• Constituency numbers and key stops are easily modifiable
• Route descriptions can be enhanced with more strategic context

Key Achievements

• Modernized Legacy Code: Transformed multiple static HTML pages into a single dynamic application
• Enhanced User Experience: Added search, filtering, and interactive features
• Responsive Design: Ensured compatibility across all device types
• Performance Optimization: Efficient data loading and rendering
• Portfolio Ready: Professional documentation and clean code structure

Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Contribution Ideas

• Add more route data for comprehensive coverage
• Implement route optimization algorithms
• Add export functionality (PDF, image, etc.)
• Integrate real-time traffic data
• Add demographic overlay data

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

NanaBright

• GitHub: @NanaBright
• Project Link: https://github.com/NanaBright/pymap

Future Enhancements

• Add real-time GPS tracking
• Implement route optimization algorithms
• Add demographic data overlays
• Include election results visualization
• Add export and sharing capabilities
• Integrate with campaign management systems

---

Technologies Used:

1. Folium – for map visualization.
2. Geopy – for geocoding towns (converting town names to coordinates).
3. Selenium – for rendering and taking screenshots of the maps.
4. Matplotlib – for displaying the final map images.

Installation:

Clone the repository:

bash

git clone https://github.com/yourusername/regional-route-maps.git

cd regional-route-maps

Install the required dependencies:

You can install the required Python packages by running:

pip install -r requirements.txt

Alternatively, you can manually install them:

pip install folium geopy selenium matplotlib

Install the WebDriver for Selenium:

Ensure you have the appropriate WebDriver for your browser (e.g., ChromeDriver for Chrome). Download it from here and add it to your system's PATH.

Usage:

Run the script for a specific region:

python ashanti_route.py

Replace ashanti_route.py with any script for the region you're working on.

View the generated map:

After running the script, an HTML file will be generated showing the interactive map. You can open this file in your browser to explore the map.

View the screenshot of the map:

The script also generates a PNG image of the map using Selenium. This image can be found in the project directory and is named according to the region.

Customization:

Adding new towns or regions:

You can add new towns to the existing region scripts or create new region scripts by following the pattern in the current ones. If a town’s coordinates are not known, the script will automatically try to fetch them using Geopy.

Adjusting map zoom and center:

You can customize the map’s initial zoom level and center by adjusting the parameters passed to folium.Map() in the script.

Contributing:

Feel free to submit issues or pull requests if you have suggestions for improvements or would like to contribute additional regions! License

This project is licensed under the MIT License – see the LICENSE file for details.