umap icon indicating copy to clipboard operation
umap copied to clipboard

Integrate an elevation chart in popup

Open yohanboniface opened this issue 1 year ago • 2 comments

When using uMap for trekking, it could be very useful to have an elevation chart option, when the feature is a LineString which has the altitude defined ([lon, lat, alt]) (which is generally the case when importing a GPX for example).

There are a few Leaflet plugins for that:

  • https://github.com/MrMufflon/Leaflet.Elevation
  • https://github.com/GIScience/Leaflet.Heightgraph (used by https://github.com/alexcojocaru/elevation-profile)
  • https://github.com/Raruto/leaflet-elevation

See also https://github.com/slutske22/leaflet-topography which compute the lat by using the DEM (through Mapbox API, but we may find an open source one maybe).

Though I'm not sure we need a Leaflet plugin in this case, so certainly the choice is between D3.js and Chart.js.

Example with D3: https://gist.github.com/pgiraud/8938194 / https://ahrjarrett.com/posts/2019-02-11-draw-an-interactive-elevation-chart-with-d3-and-react Example with Chart.js: https://jsfiddle.net/Geoapify/2pjhyves

yohanboniface avatar Dec 01 '24 16:12 yohanboniface