• JavaScript
  • HTML

<!DOCTYPE html>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>Markers with altitude</title>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <link rel="stylesheet" type="text/css" href="demo.css" />
    <link rel="stylesheet" type="text/css" href="../template.css" />
    <script type="text/javascript" src='../test-credentials.js'></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
  <script>window.ENV_VARIABLE = 'developer.here.com'</script><script src='../iframeheight.js'></script></head>
  <body id="markers-on-the-map">

    <div class="page-header">
        <h1>Markers with altitude</h1>
        <p>Display markers at different altitudes.</p>
    <p>This example shows the bicyle route at the Yungas Road (also known as the "Death road") in Bolivia. Markers
      with the altitude values help to visualise the 3500m of descent for this road. Each marker is located at the altitude
      associated with the given route vertex. Markers' icons are assigned a normalized color from red (approx. altitude 4600 meters above see level)
      to blue (approx. altitude 1100 meters above see level).
    <div id="map"></div>
    <p>Access to the routing service is obtained from the <code>H.service.Platform</code> by calling
      <code>getRoutingService(null, 8)</code>. The <code>calculateRoute()</code> method is used to calculate the bicycle route by passing in the relevant parameters as defined in
      <a href="https://www.here.com/docs/bundle/routing-api-v8-api-reference/page/index.html#tag/Routing" target="_blank">Routing API</a>.
      The markers are supplied with the latitude, longitude and altitude obtained from the routing response, the altitude value provides the elevation for the marker.</p>
    <script type="text/javascript" src='demo.js'></script>