ElevationProfile

Demo

• ElevationProfile

Description

The ElevationProfile is responsible for displaying the elevation profile of a hiking and its stopovers.

To use the ElevationProfile, you need to set the target, the element where to display to profile, and the map.

const profile = new sww.ElevationProfile({
  target: "profile",
  map: map,
});
Copy

Where profile is the id of the element where to display the profile and map is an OpenLayers map instance.

Then, the profile needs to be linked to the HikingEditor to the hiking editor to be updated when the hiking is changes:

const editor = new sww.HikingEditor();

editor.addEventListener("change", () => {
  const { lines, points, lineSegments, xAxisSegments } = editor.getProfile();
  profile.setProfile(lines, points, lineSegments, xAxisSegments);
});
Copy

Events callbacks

The over and out callbacks are called when the mouse is over the elevation profile and when it leaves the elevation profile, respectively.

They receive a CustomEvent with the following details:

• coordinate: the coordinate of the point on the profile that is hovered ([x, y, elevation, distance])
• position: the position in pixels of the mouse relative to the component ({x: number, y: number})
• segments: values of the line and xAxis at the hovered point ({ line: string, xAxis: string })

Styling

The sww.css file must be included in the page to style the elevation profile.