Elevation Profile Control API reference

maptiler/maptiler-elevation-profile-control

This reference documents every object and method available. Each section describes classes or objects as well as their properties, parameters, methods, and associated events. Many sections also include inline code examples and related resources.

Example (create control with some not default options)

Options

Parameters

Events

The control has three events available that we can define in the constructor options:

• onMove when moving the pointer on top of the profile
• onClick when clicking on the profile
• onChangeView when zooming or panning the profile

With the event onMove we can easily display a marker moving on top of the map. See the Elevation profile control show trace position example.

With the event onChangeView, we can access a GeoJSON LineString corresponding to the zoomed section that we can then display on top of the full-length route. We can quickly achieve this with the Polyline Helper available in the MapTiler SDK. Check out the Elevation profile control show zoomed section example.

Styling

As with many MapTiler SDK (or MapLibre) controls, it is made available with a button on the map. By default, the elevation profile chart is displayed on the map. However, you can customize how you want to achieve that.

Control constructor styling options

The following configuration makes the chart sticking to the left, partially transparent to reveal the map underneath:

const epc = new maptilerelevationprofilecontrol.ElevationProfileControl({
  visible: true, // no need to click, it's there by default
  position: "left",
  backgroundColor: "#0005",
  labelColor: "#FFF6",
  size: "50%", // Take half of the room available (default is 30%)
  elevationGridColor: "#FFF1",
  tooltipTextColor: "#000b",
  tooltipBackgroundColor: "#eeea",
  profileLineColor: "#a103fc",
  profileBackgroundColor: "#a103fc11",
});

Here is the result:

Control containerClass option

A second option to achieve even more custom styling is to use the option containerClass. This way, almost all the styling is performed at the application level (rather than internally by the control itself), yet the control still creates the container. Here is an example:

const epc = new maptilerelevationprofilecontrol.ElevationProfileControl({
  visible: true,
  // since the text is drawn in the canvas, 
  // it still has to be tuned here:
  fontSize: 9,
  containerClass: "profileContainer",
});

Here is the profileContainer style definition in CSS:

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.profileContainer {
  background-color: #fff;
  height: 200px;
  width: 60%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 3px;
  margin: 20px auto;
  filter: drop-shadow(0px 0px 15px #00000066);
  animation: fadeIn 0.5s ease forwards;
}

Here is the result:

Display the control in an external container

A third way to achieve customization with an even higher level of freedom is to use the container options. Instead of creating the container, the Control will use an existing one and not alter its container’s styling. Here is an example of how to achieve that:

const epc = new maptilerelevationprofilecontrol.ElevationProfileControl({
  unit: "imperial",
  container: "profileContainer",
  showButton: false,
  labelColor: "#FFF6",
  elevationGridColor: "#FFF1",
  tooltipTextColor: "#000b",
  tooltipBackgroundColor: "#eeea",
  profileLineColor: "#a103fc",
  profileBackgroundColor: "#a103fc11",
  crosshairColor: "#66f5",
  displayTooltip: true,
});

For a better-looking example, the example also comes with some custom colors. Here is how it looks like:

As you can see, the option showButton is false, and as a result, the control button is not showing on top of the map. This may be convenient in cases where the container is managed entirely at the application level.

Check out the Elevation profile control customized example.