EastCoastGreenwayAlliance / ecg-map

Interactive map and trip planner for the ECGA
https://map.greenway.org
7 stars 0 forks source link

Elevation Profile: UI #35

Closed clhenrick closed 7 years ago

clhenrick commented 7 years ago

UI / visualization for rendering elevation profile after a user searches for a portion of the ECG.

clhenrick commented 7 years ago

Note: calculation for elevation gain is off, should be:

    let elevGain = data.reduce((acc, cur, idx, arr) => {
      if (idx > 0 && (cur.y > arr[idx - 1].y)) {
        acc += cur.y - arr[idx - 1].y;
      }
      return acc;
    }, 0);

With the notable line being line 3: acc += cur.y - arr[idx - 1].y;

clhenrick commented 7 years ago

Needs to be collapsable for mobile only.

clhenrick commented 7 years ago

Pretty much implemented, could display a loading message for when the elevation API call is made.

clhenrick commented 7 years ago

Probably don't need to show the ocean depth:

image

clhenrick commented 7 years ago

SVG clipping paths to the rescue!

screen shot 2017-07-03 at 5 44 41 pm

clhenrick commented 7 years ago

Implemented and is working well on both mobile and Desktop