{"id":17700476,"url":"https://github.com/aaron-schroeder/boulder-route-preview","last_synced_at":"2026-01-20T03:33:16.104Z","repository":{"id":118331057,"uuid":"577916890","full_name":"aaron-schroeder/boulder-route-preview","owner":"aaron-schroeder","description":"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","archived":false,"fork":false,"pushed_at":"2022-12-13T21:41:38.000Z","size":375,"stargazers_count":0,"open_issues_count":8,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-13T11:55:46.872Z","etag":null,"topics":["flask","plotly","react","react-plotlyjs","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aaron-schroeder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-13T20:32:39.000Z","updated_at":"2022-12-13T20:40:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"516eb238-d1d9-4312-84c6-a6b48ed4d3b2","html_url":"https://github.com/aaron-schroeder/boulder-route-preview","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaron-schroeder%2Fboulder-route-preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaron-schroeder%2Fboulder-route-preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaron-schroeder%2Fboulder-route-preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaron-schroeder%2Fboulder-route-preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aaron-schroeder","download_url":"https://codeload.github.com/aaron-schroeder/boulder-route-preview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247615479,"owners_count":20967183,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flask","plotly","react","react-plotlyjs","reactjs"],"created_at":"2024-10-24T17:42:17.981Z","updated_at":"2026-01-20T03:33:16.079Z","avatar_url":"https://github.com/aaron-schroeder.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# boulder-route-preview\n\nCreate, 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\n\nBuild a route on a map of Boulder area trails by clicking on trail segments.\nClick `Build Route` to create an elevation profile and statistics about the route.\n\nFlask backend. React frontend.\n\n## To run locally:\n\nUse two terminal windows.\n\nFirst window:\n\n```sh\ncd backend\npython3 -m venv env\npip install -r requirements.txt\nsource env/bin/activate\npython app.py\n```\n\nSecond window:\n\n```sh\ncd frontend\nnpm install\nnpm start\n```\n\n## Lower-priority issues\n\n### To-do\n\nBugs\n\nFeatures\n- Stats tab: show elevation loss too.\n  (Not as much of an issue on round-trips)\n- Find some way to use the same trail segment twice! ie an out-and-back or lollipop\n  - This might be a big overhaul, because I currently am just keeping track of\n    selected segments. This approach might require me to adopt the \"mapmyrun\"\n    approach. Hmm. \n  - Maybe the profile could get built in real-time as they click\n    segments, so that it doesn't have to infer everything at the end, making\n    smarter inferences possible. \n  - Or we could have the segments populate a \n    list in order. Some way to just get an ordered list of trail segments,\n    with the only remaining inference being the direction of each trailseg.\n    That would also allow me to perform some kind of validation before each click.\n    Like \"hey, that segment is nowhere near the first one you clicked! NO!\"\n- [Huge, Potential] Add ability to save routes with names.\n\nData Processing\n- See if it's possible/easy to add a histogram of grades like\n  in the (currently evolving) `horsetooth-analysis`\n\nAesthetics\n- Selected segment list: brainstorm a better way to display other than\n  a scrolly plain-text div.\n- Elev profile: show elevation axis ticks on left side\n- Replace react logo with TZ logo.\n  - In `frontend/public`, modify the `.png`s, `favicon.ico`, and `manifest.json`\n  - See `distilling-flask` repo for media\n- Connect route markers with lines. \n  Maybe those lines can be color-coded by grade.\n- Use [`flyToBounds`](https://leafletjs.com/reference.html#map-flytobounds)\n  instead of `fitBounds` wherever it occurs.\n\nPerformance\n\nRequirements\n\nRefactor\n- Make a smarter way to control `getData()` source between\n  local file in dev environment and `fetch` in production.\n  - (later) employ similar strategy to control the url of the\n    backend server. This will involve a whole thing with deployment.\n\n### In-progress\n\nBugs\n\nFeatures\n\nData Processing\n\nAesthetics\n\nRefactor\n\n### Complete\n\nBugs\n- CircleMarkers have duplicate keys if they have the same lat.\n  - Tests:\n    - Build a route of Mount Sanitas Trail (had duplicate lat vals)\n      -\u003e no warning in console.\n- Elevation profile doesn't re-draw when I already have drawn one.\n  The stats tab actually DOES refresh though.\n\nFeatures\n- \"Clear selected segments\" button\n  - Tests:\n    - Add a bunch of segs, click clear -\u003e segment list empty, map style reset.\n    - Add a bunch of segs, navigate away, navigate back -\u003e selected seg list \n      and selected segments on map preserved.\n    - Add a bunch of segs, click clear, navigate away, navigate back -\u003e\n      selected seg list empty, no segments selected on map.\n- Hover on map \u003c-\u003e hover on graph\n  - [x] Make the leaflet map have hover behavior in the first place\n    - Tests: \n      - hover over vertex -\u003e tooltip appears at vertex\n      - FAILING: (extra) hover over polyline line \n        -\u003e tooltip appears at nearest vertex\n        - Look into `this.mapRef.current.distance(latlng1, latlng2)`\n  - [x] Hover on leaflet map -\u003e hover on plotly graph\n    - Tests:\n      - hover over map point that contains a data point from xy graph\n        -\u003e that data point is highlighted on the xy graph\n      - unhover that map point -\u003e that xy data point is unhovered\n      - unhover that map point and hover another point\n        -\u003e the first xy data point is unhovered, and the next xy point is hovered\n      - FAILING: (extra) hover on all points that share an x-value with the\n        elevation trace.\n        - Bug: Only elevation trace is hovered, due to circular events (I think?)\n        - Solution: instead of hovering by {curveNumber, pointNumber} to target\n          the elevation trace, get the x-value of that point and manually hover\n          at that location. I forget exactly how, but we'll find out in `Fx.hover`.\n  - [x] Hover on plotly graph -\u003e hover on leaflet map\n    - [x] create an eventhandler for the Plot's elevation trace\n      - Use `onHover` prop (don't wrap in `eventHandlers`):\n        https://github.com/plotly/react-plotly.js/#event-handler-props\n    - [x] Make the eventhandler force-hover the map based on the\n          pointnumber\n    - [x] create a complementary event for mouseout.\n      - `onUnhover` in react-plotly world.\n\nData Processing\n\nAesthetics\n- Make route-building tooltips on geojson sticky\n\nRefactor\n- Split tab content into separate components in their own files, imported by `App.js`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaron-schroeder%2Fboulder-route-preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaron-schroeder%2Fboulder-route-preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaron-schroeder%2Fboulder-route-preview/lists"}