Skip to content
Make a ridge line chart from any region on Earth
JavaScript Vue HTML Shell
Branch: master
Clone or download
Latest commit c92248f Jan 19, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Create FUNDING.yml Jan 8, 2020
build initial commit Dec 18, 2019
config initial commit Dec 18, 2019
images Added documentation Dec 21, 2019
src alternate order Jan 19, 2020
static initial commit Dec 18, 2019
.babelrc initial commit Dec 18, 2019
.editorconfig initial commit Dec 18, 2019
.gitignore initial commit Dec 18, 2019
.postcssrc.js initial commit Dec 18, 2019
README.md added more intstructions Jan 8, 2020
deploy.sh initial commit Dec 18, 2019
index.html Changed the links Dec 18, 2019
index.js initial commit Dec 18, 2019
package-lock.json clean up Dec 21, 2019
package.json clean up Dec 21, 2019

README.md

Peak map

This website allows you to visualize elevation of any area on the map with filled area charts (also known as a ridgeline):

quick demo

How?

I'm using MapBox GL to draw the map. Once the area is selected, I'm using elevation data API from the MapBox.

The rendering of the lines is done on canvas overlay, using regular 2D canvas context.

Bonus

You can print the final map onto a mug if you like the result:

demo

To do this, draw the heightmap, close the settings window, and click on the small fly-out menu.

See the video demo here: https://twitter.com/anvaka/status/1207352229885181952

You can’t perform that action at this time.