ContextMenu Routing

set waipoints on ContextMenu click

HTML

<script src="https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <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>ContextMenu routing</title>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <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>
  </head>

  <body>
    <div id="map"></div>
    <div id="routingInputContainer">
      Starting point:
    
      <input id="inputStart" class="routingInput" disabled/>
      Destination point:
      <input id="inputDest" class="routingInput" disabled/>
      <br/><br/>
      <span id="info"></span>
    </div>
  </body>

</html>

CSS

body {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

#map {
  width: 100%;
  height: 100%;
  background-color: gray;
}

#routingInputContainer {
  width: 300px; 
  height: 110px; 
  position:absolute; 
  top: 5px; 
  left: 5px; 
  padding: 10px; 
  background-color: rgba(00, 130, 130, 0.8);
  color: white;
}

.routingInput {width: 95%;}

JavaScript

function addContextMenu(map, geocodingService) {
  // First we need to subscribe to the "contextmenu" event on the map
  map.addEventListener('contextmenu', function (evt) {
    currentGeocodingResultObject = null;
    // As we already handle contextmenu event callback on middle waypoints
    // we don't do anything if target is different than the map.
    if (evt.target !== map) {
      return;
    }

    // "contextmenu" event might be triggered not only by a pointer,
    // but a keyboard button as well. That's why ContextMenuEvent
    // doesn't have a "currentPointer" property.
    // Instead it has "viewportX" and "viewportY" properties
    // for the associates position.

    // Get geo coordinates from the screen coordinates.
    let coord = map.screenToGeo(evt.viewportX, evt.viewportY);

    // Now we get the name of the place we clicked using reverse geocode
    geocodingService.reverseGeocode(
      {
        prox: coord.lat + ',' + coord.lng + ',50',
        mode: 'retrieveAddresses',
        maxresults: 1,
        languages: 'en-GB'
      },
      function(response) {
      	let res = response.Response;
        if (res.View && res.View[0].Result && res.View[0].Result[0]) {
          updateContextMenuLabel(evt, res.View[0].Result[0].Location.Address.Label);
          currentGeocodingResultObject = {
            label: res.View[0].Result[0].Location.Address.Label,
            coord
          }
        } else {
          var coordLabel = [
            Math.abs(coord.lat.toFixed(4)) + ((coord.lat > 0) ? 'N' : 'S'),
            Math.abs(coord.lng.toFixed(4)) + ((coord.lng > 0) ? 'E' : 'W')
          ].join(' ');
          updateContextMenuLabel(evt, coordLabel);
          currentGeocodingResultObject = {
            label: coordLabel,
            coord
          }
        }
      },
      function(err) {
        currentGeocodingResultObject = null;
        console.error(err);
      }
    );

    // In order to add menu items, you have to push them to the...