Skip to content
Make a ridge line chart from any region on Earth
JavaScript Vue HTML Other
Branch: master
Clone or download

Latest commit

Files

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 More accurate transparent background Feb 7, 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
LICENSE Added license Jan 31, 2020
README.md added more intstructions Jan 8, 2020
deploy.sh initial commit Dec 18, 2019
index.html Changed the links Dec 18, 2019
package-lock.json preparing for masks Feb 2, 2020
package.json preparing for masks Feb 2, 2020

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.