boulder-route-preview
Create, map, and analyze a trail-based route in Boulder, CO using high-quality, publicly-available data from the City of Boulder and the National Elevation Dataset
Build a route on a map of Boulder area trails by clicking on trail segments.
Click Build Route
to create an elevation profile and statistics about the route.
Flask backend. React frontend.
To run locally:
Use two terminal windows.
First window:
cd backend
python3 -m venv env
pip install -r requirements.txt
source env/bin/activate
python app.py
Second window:
cd frontend
npm install
npm start
Lower-priority issues
To-do
Bugs
Features
- Stats tab: show elevation loss too.
(Not as much of an issue on round-trips)
- Find some way to use the same trail segment twice! ie an out-and-back or lollipop
- This might be a big overhaul, because I currently am just keeping track of
selected segments. This approach might require me to adopt the "mapmyrun"
approach. Hmm.
- Maybe the profile could get built in real-time as they click
segments, so that it doesn't have to infer everything at the end, making
smarter inferences possible.
- Or we could have the segments populate a
list in order. Some way to just get an ordered list of trail segments,
with the only remaining inference being the direction of each trailseg.
That would also allow me to perform some kind of validation before each click.
Like "hey, that segment is nowhere near the first one you clicked! NO!"
- [Huge, Potential] Add ability to save routes with names.
Data Processing
- See if it's possible/easy to add a histogram of grades like
in the (currently evolving) horsetooth-analysis
Aesthetics
- Selected segment list: brainstorm a better way to display other than
a scrolly plain-text div.
- Elev profile: show elevation axis ticks on left side
- Replace react logo with TZ logo.
- In
frontend/public
, modify the .png
s, favicon.ico
, and manifest.json
- See
distilling-flask
repo for media
- Connect route markers with lines.
Maybe those lines can be color-coded by grade.
- Use
flyToBounds
instead of fitBounds
wherever it occurs.
Performance
Requirements
Refactor
- Make a smarter way to control
getData()
source between
local file in dev environment and fetch
in production.
- (later) employ similar strategy to control the url of the
backend server. This will involve a whole thing with deployment.
In-progress
Bugs
Features
Data Processing
Aesthetics
Refactor
Complete
Bugs
- CircleMarkers have duplicate keys if they have the same lat.
- Tests:
- Build a route of Mount Sanitas Trail (had duplicate lat vals)
-> no warning in console.
- Elevation profile doesn't re-draw when I already have drawn one.
The stats tab actually DOES refresh though.
Features
- "Clear selected segments" button
- Tests:
- Add a bunch of segs, click clear -> segment list empty, map style reset.
- Add a bunch of segs, navigate away, navigate back -> selected seg list
and selected segments on map preserved.
- Add a bunch of segs, click clear, navigate away, navigate back ->
selected seg list empty, no segments selected on map.
- Hover on map <-> hover on graph
Data Processing
Aesthetics
- Make route-building tooltips on geojson sticky
Refactor
- Split tab content into separate components in their own files, imported by
App.js