pdubs/angel-fire-map

Angel Fire Bike Park Interactive Trail Map

Angel Fire Bike Park Interactive Trail Map

/angel-fire-map
  ├─ /server.js                # API Server
  ├─ /app/models/trail.js      # Database Schema
  ├─ /public/js/controller.js  # Front-end Controller
  └─ /public/index.html        # HTML Index

MEAN Stack: MongoDB for GeoJSON data store, Node/Express API server to fetch & serve data, Angular front-end (using google maps & visualization JS APIs)

Map Controls:

• Left sidebar mapControls control which trail segments are displayed
  • By Segment (specific segment)
  • By Trail (all segments of a trail)
  • By Difficulty (all segments of all trails of a difficulty)
  • Show/Hide All (all segments of all trails of all difficulties)
• overlayControls control which type of view is active (Satellite vs. Topographic/Terrain)

Map Interactions:

• trail hover: increased line width & opacity
• trail click: center map on trail segment, display infoWindow w/ trail details, display elevation profile in #elevation_chart
• hub (A-F) marker click: zoom & center map on location of hub

angel-fire-map's Issues

Refactor index.html

Need to use ng-repeat="difficulty in difficulties" instead of manually creating all difficulty controls in the index.html page.

Fix Show One & Show All checkboxes to work together

change the show all by difficulty checkboxes and the individual trail checkboxes to work correctly together

need an array of boolean values that determine whether trails are shown/hidden, use both types of checkboxes to change the array, and the array updates the other checkbox(es)

Improve dependencies

Rely on packages.json to install, setup .gitignore to ignore node_modules folder

Full Screen & Device Compatibility

Change display to Full Screen Map

Media Queries:

• mobile <768px
• tablet >768px
• desktop >992px
• large desktop >1200px

Combine trail segments into single row in map key

Rather than have each segment on a new line, combine each segment into single checkboxes under the name of the trail

Location Icon Feature

Create a "Where Am I?" button that fetches mobile device location from GPS and displays user icon on the map

Trail Click Functionality

• - Zoom & center the map on the clicked trail segment
• - Info Panel w/ trail name, difficulty, description
• - Advanced trail info panel (trail status, elevation profile, video link)

Trail Hover Functionality

• - Increase the strokeWeight of the trail path
• - Display trail name and segment # along trail path

Show trails on initial load

Show all trails by default on initial page load

Add Lodash

lodash.com will allow cleanup of array iteration

Custom Runs

Custom Run Overlays

Examples of custom user-created routes:

"warmup 1": "ziggy > diesel1 > combi2 > lazy susan > combi3 > full duchess > dual slalom"
"rowdy": "upper chillin 1 > fo sho > upper supreme 2 > lower supreme 1 > transition > chutes & ladders > candyland"
"raw speed": "upper chillin 1 > fo sho > upper supreme 2 > easy street 6 > lemonade full > pinball > lower boogie 2"
"hardest way down": "Upper Boogie > Lower Supreme > Graveyard > Pinball > Candyland"

Pre-made routes:

• Rocky / Technical Trails (duke, boogie, pepper spray, world cup, graveyard)
• Jump Trails (boulder dash, chillin, middle supreme, hungry hippo)
• Fast & Flowy Trails (lemonade, diesel, duchess)
• New Trails (Angel's Plunge, Hungry Hippo)
• race courses from proGRT, BME, NMEC

Elevation Profiles

Figure out the best way to generate / display elevation profiles per segment

mapControls Improvements

• better resolution & transparent difficulty icons (move to corresponding section?)
• add difficulty name, icon, style trail name with color

Show/Hide All Trails Button

add "show/hide all trails" checkbox toggle

Finish Trail Data

• - split up middle & lower supreme
• - create all diesel segments
• - create graveyard
• - create missing easy street & sierra segments
• - create transition
• - clean up easy trails
• - clean up intermediate trails
• - clean up advanced trails
• - clean up expert trails
• - Add descriptions to each trail
• - split drops & lollipops + lower pepper spray out of WC
• - create drop zone

infoWindow data:
world cup https://www.youtube.com/watch?v=btOQeQGK6u4
lower supreme https://www.youtube.com/watch?v=oPxPkp3z5Jw
hungry hippo https://www.youtube.com/watch?v=RbbstBO4zZc

Only one InfoWindow can be Open

Close active infoWindow when another infoWindow is triggered

Restructure Angular Application

Using johnpapa's style guide to reorganize and restructure the angular components into multiple files as much as possible.

Hub Marker Click Functionality

Open a modal window with a photo of the intersection when the user clicks a hub marker (A-F)