justinlewis / climbmapper

An experimental app to visualize climbing ToDo and Tick routes on a map based dashboard

climbmapper

NOTE: See the Reactify branch for current efforts! Master is way behind.

An experiment built on Node.js using Mountain Project climbing route data and my climbing area data.

You can see the app live at www.climbmapper.com

About

The goal of this app is to provide a better toolset for visualizing where someone wants to climb based on their MountainProject.com ToDos and Ticks. While the initial interest was to leverage Mountain Project there is a general interest to break away from that connection to allow for other integrations and possibly the ability to add routes solely to ClimbMapper. However, none of that is in the works right now.

Current Features

* MountainProject.com user integration * Tick and ToDo downloads from user profiles * Mapping ToDo/Tick density by location (climbing area and partial crag level support) * Charting grade breakdown, route type (trad, sport, boulder, alpine), and height (in # of pitches) on hover of locations * Displaying a list of routes with preview images and supplemental info on click of a location with links to the respective route in MountainProject.com * User profile management * Data issue reports * Ability to filter maps and charts by route types (trad, sport, boulder, alpine) * Ability to search for climbing areas * Ability to add new climbing areas or crags * Ability to edit existing areas or crags * Ability to use a time slider for visualizing user ticks across time * Charting of user ticks by route type and type across time

The future

NOTE: After some interest from the community it was decided that this project is being ported from a Proof of Concept implementation to something we all can be more proud of. The target stack will include:

** See the reactify branch for the work in progress

Basic Front-end

• React
• WebPack/Babel
• Redux
• Bootstrap

Visualization Specific

• Leaflet.js
• D3.js

Backend

• Node 9.9.1
• PostgreSQL 9.6.1 (PostGIS 2 >)
• Python 2.7 (for some data processing)

Want to help out?

Awesome!

1. Dev Database Setup

1. Install PostgreSQL if you don't have it installed already.
2. Create 'climbmapper' database with PostGIS installed.
3. Create a new login user called 'app_user' who is a read only user.
4. **There is another user used in the production environment which you probably don't need but conatact me if you do end up needing it.
5. Populate the database by restoring climbmapper/project_setup/climbmapper.backup.

2. Dev Server Env Setup

1. Install Node.js if you don't have it installed already.
2. Pull the repo to your local webserver root (typically /var/www on Linux using Apache HTTPD).
3. CD into the climbmapper root directory.
4. Type 'npm install' in your terminal when cd'd into the cimbmapper root directory.
5. Type 'webpack' in your terminal when cd'd into the cimbmapper root directory.
6. Type 'npm start' in your terminal when cd'd into the cimbmapper root directory.
7. Access the site at http://localhost:8080/climbmapper

3. Making Changes

1. Make a branch
2. When you make changes run webpack in your terminal to compile your changes (simply type webpack)
3. Refresh your browser
4. Use the 'issues' tab in GitHub for reporting or accepting tickets.

General Needs

See the issues tab for more details.

- [ ] Migration from a Proof of Concept to a real app (IN PROGRESS - see reactify branch) - [x] Better security authentication - [ ] UI/UX makeover (especially with editing locations) - [ ] Stronger domain models that help minimize the bridge to Mountain Project - [ ] Connectors to other climbing websites (8a.nu, thecrag.com, etc...) - [ ] Ability to add routes directly to ClimbMapper

climbmapper's Issues

Make area click events load a dashboard that doesn't reset on hover/hover out

This way users can explore an area more without holding the mouse still. This should also support the ability to share a users analytics for an area.

Implement basic unit test coverage for data integration Python modules

Find better way to display tick comments

Currently they are just squished onto the bottom of the hover popup. These could be laid out in a much better way.

Search bar data only includes todo areas

the area search needs to include all areas.

Add ability for users to add location points

A simple widget to add climbing areas. Areas are different than crags. Crags are the individual wall or clusters of boulders. Areas are larger collections of crags.

Port front-end to React

We want to port from basic Node templates and JQuery to better facilitate:

1. Readability to better support contributors
2. Test-ability
3. Modularity
4. Re-usability

The MVP passing criteria for this ticket should be a replication of existing functionality with minimal deviation from the current behavior. Improvements on UI/UX can be considered but might necessitate a separate ticket if design work is significant enough to warrant lengthy consideration by the team contributors. That new ticket would be considered a new enhancement.

Master Feature Port List:

• Basic main map page layout
• Welcome modal
• Data issues modal
• Profile modal
• Log in modal
• About modal
• Initial map render (with defalut initial data load)
• Map feature hover events
• Map feature click events
• Area/crag click response panel
• Area/crag hover charts - IN-PROGRESS by @justinlewis
• Map layer toggle
• Time slider & associated time slider ticks over time chart - IN-PROGRESS by @justinlewis
• Route type filter selector
• Crag/area search bar
  ...

Add better encryption for user authentication

Lots of initial work has been done by @brendonakay

Disable submit button when editing areas after submitting

There is a delay that might lead to users submitting multiple times.

Improve charts

All the charts where done with basic styling. Get creative!

Add ability for users to add crag points

Crags are the individual wall or clusters of boulders. Areas are larger collections of crags.

Improve Ticks time slider

The time slider is hokey and boring. Make it more interesting! Additional indicators like hardest climb up to the current position on the slider and tick marks to indicate dates along the line would be a good starting point.

Location algorithm for routes needs better precision

The issue is that data from Mountain Project comes with only an array of location names in hierarchical order. This is a terrible way to store location and it poses a challenge to mapping routes against areas stored in climb mapper for a number of reasons. Probably the biggest issue is that of uniqueness for areas. When relating a route to an area we simply use the first name match for a location in the routes location array with all of the areas in Climb Mapper. Since area names are not unique this could create lots of false relationships as more areas with duplicate names are added to the system. One easy way to filter this down is to look for routes within a specific geographic context (i.e. a state, region, etc..).

Create comprehensive Ticks chart

Initial thoughts:

Display a chart hooked into the time slider that showed number of ticks as a line chart and hardest/average difficulty rating as additional lines. The point would be to visualize number of climbs compared to how hard someone is climbing at that point in time.

Add Typehead or other search functionality

Add representation for tick repeats

When a climber ticks a route more than once we should indicate this in the app.

Close area popup info if layers are toggled.

Make URL location driven

We want users to be able to access a specific focus area based on a url.

Add better area click behavior

currently clicking on a ToDo area opens up a panel on the bottom and populates it with an un-ordered list of ToDo routes with preview images. This whole thing is kinda weird and could be much better.

Write migration script for new encrypted authentication

Turn areas/crags layer options into a radio functionality

users really only want to see either crags or areas and it gets too confusing to not have the app take care of that decision for them

Optomize Mountain Project data process code

The current implementation was a rush job. Using instance objects will be more maintainable and just more goodly.

Add area symbols as point clouds by type

A point cloud would be a single point for each route placed in a circular cloud colored by type. Andy Woodruff provided an basic example of how he did this:

////  Incomplet. For example only.
var g = symbols.append("g"),
statePath = d3.select( /* selector for the state polygon */ ),
centroid = path.centroid( statePath.datum() );

var total = // whatever the total number of dots is
  dotDiameter = 4,
  dist = 0,
  circumference = 0,
  canFit = 1,
  count = 0,
  angleDelta = 0;
for ( var i=0; i<total; i++ ){
  count++;
  if ( count > canFit ){
    dist += dotDiameter;
    circumference = 2 * dist * Math.PI;
    canFit = Math.floor( circumference / dotDiameter ),
    angleDelta = 2 * Math.PI / canFit;
    count = 0;
  }
  var currentAngle = angleDelta * count;
  var x = Math.cos(currentAngle) * dist,
      y = Math.sin(currentAngle) * dist;

  g.append( "circle" )
    .attr("cx",x+dotDiameter/2)
    .attr("cy",y+dotDiameter/2)
    .attr("r",dotDiameter/2)
    .attr("fill","#ccc")
    .attr("stroke","#666");
}
g.attr("transform","translate(" + centroid.toString() + ")");

Create generic data import interface

A generic interface for data import endpoints would be useful for data integration with multiple sites. Ultimately it would be best to integrate with more than just Mountain Project.