https://anvaka.github.io/peak-map/

Make a ridge line chart from any region on Earth
https://anvaka.github.io/peak-map/

Last synced: about 1 year ago
JSON representation

Make a ridge line chart from any region on Earth

• Host: GitHub
• URL: https://anvaka.github.io/peak-map/
• Owner: anvaka
• License: mit
• Created: 2019-12-18T08:48:54.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-03-28T02:33:56.000Z (almost 2 years ago)
• Last Synced: 2024-05-02T01:01:20.223Z (almost 2 years ago)
• Language: JavaScript
• Homepage: https://anvaka.github.io/peak-map/
• Size: 4.64 MB
• Stars: 593
• Watchers: 8
• Forks: 47
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-plotters - Peak Map - A web-based tool to generate ridge line charts from map data. (Software / Vector Creation)

README

          
# Peak map

[This website](https://anvaka.github.io/peak-map) allows you to visualize elevation of any area on the map with 

filled area charts (also known as a `ridgeline`):

![quick demo](images/quick_demo.gif)

# How?

I'm using MapBox GL to draw the map. Once the area is selected, I'm using [elevation data](https://docs.mapbox.com/help/troubleshooting/access-elevation-data/) API from the MapBox.

The rendering of the lines is done on canvas overlay, [using regular 2D canvas context](https://github.com/anvaka/peak-map/blob/master/src/lib/createHeightMapRenderer.js).

## Bonus

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

![demo](images/zazzle_mug.png)

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