Integrate an elevation chart in popup

[yohanboniface]

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]

See also https://github.com/perliedman/geojson-elevation for adding elevation data to a geojson