Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://anvaka.github.io/peak-map/
Make a ridge line chart from any region on Earth
https://anvaka.github.io/peak-map/
Last synced: 4 months 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 (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-03-28T02:33:56.000Z (11 months ago)
- Last Synced: 2024-05-02T01:01:20.223Z (10 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
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`):
# 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:

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