Skip to content

Embed GPX with elevation

Learnings

  • Create a map from a GPX file
  • Display an elevation chart for that trace

1. Create a map from a GPX file⚓︎

You simply have to drag&drop a GPX file above the map to automagically create a datalayer with these data.

Screenshot of a browser with a GPX file hover

A line should appear on the map with optionnal pre-defined points according to your source file:

Screenshot of the map with the trace

2. Display an elevation chart⚓︎

Perform a right-click on the line and choose the editing pencil.

Open Interaction options and switch Popup shape to Popup (large) to give some room to the incoming graph. Then change the Popup content style from Default to Route.

You should see the popup in the background gaining an elevation graph:

Screenshot of the map with the configuration panel and the popup

You’ll notice that when hovering the graph, the current position is made visible on the map (orange point on the line) and the elevation is dynamically updated within the popup:

Screenshot of the map with the elevation graph

Enjoy your hike!