Welcome to Heatmaps! This project is a web application that uses Flask (Python) on the backend, with HTML, CSS, and JavaScript on the frontend to visualize Strava activities on an interactive map. In its current version, users can view Ethan Aidam's past Strava activities, complete with route details, activity statistics, and customizable map themes.
-
Interactive Map: View your activities as polylines on a map.
-
Dynamic Themes: Switch between various map themes like outdoors, dark mode, and topographic.
-
Activity Details: See details like activity name, distance, and duration by clicking on a route.
-
Geosearch: Search for specific locations on the map.
-
Athlete Overview: Automatically zooms to the athlete's home city based on Strava data.
-
Python 3.8+
-
pip (Python Package Installer)
Use pip to install required libraries:
pip install -r requirements.txt
The project uses Leaflet.js and other libraries via CDN. No additional installation is required for these libraries.
Launch the Flask app:
python app.py
The application will be accessible at http://127.0.0.1:5000. As long as the application is run via a development server accessed via localhost or 127.0.0.1, no Stadia Maps API key is necessary.
project/
│
├── app.py # Flask backend
├── static/ # Static files (CSS, JavaScript, images)
│ ├── styles.css # Custom styles
│ ├── map1-5.jpg/png # Images on home page
│ └── strava_mapper.js # Main JavaScript logic
├── templates/ # HTML templates
│ ├── index.html # Home page
│ └── map.html # Map view
└── requirements.txt # Python dependencies
-
Open your browser and navigate to
http://127.0.0.1:5000. -
You will see the homepage with a "Enter Heatmaps" button to view your activities.
-
The map initially centers on the United States.
-
Once data is fetched, the map will zoom to the athlete's home location.
-
Activities are displayed as polylines. Click on any route to see details.
- From the menu, use the theme switcher to toggle between:
-
Outdoors
-
Dark Mode
-
Topographic
- Use the search bar to find specific places or addresses on the map.
-
Modify the
tileLayersobject inscripts.jsto add a new tile URL. -
Ensure proper attribution for the tile provider.
-
Open the browser console (
F12> Console). -
Look for error messages related to fetching activities.
-
Check the Flask logs in your terminal for backend errors.
- Error: "Failed to fetch activities data"
Ensure Strava API credentials are valid and the server has internet access.
- Map does not render
Ensure all Leaflet.js CDN links in map.html are accessible.
- Geosearch fails
Verify that the OpenStreetMap provider is reachable and the athlete's city/state data is correct.
-
Leaflet.js: Interactive map rendering.
-
Flask: Backend framework.
-
Stadia Maps & OpenStreetMap: Map tiles.
See a video breakdown of Heatmaps from the Youtube link below.
Happy exploring! 🚴♂️🌍s