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

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

Last synced: 4 days ago
JSON representation

Make a ridge line chart from any region on Earth

• Host: GitHub
• URL: https://github.com/anvaka/peak-map
• Owner: anvaka
• License: mit
• Created: 2019-12-18T08:48:54.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2024-03-28T02:33:56.000Z (8 months ago)
• Last Synced: 2024-05-02T01:01:20.223Z (6 months 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-frontend-gis - Peak Map - Allows you to visualize elevation of any area on the map with filled area charts (also known as a ridgeline). (🌐 Web apps / Advanced)

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