CODEWITHSUNDEEP
javascripthere-api
Nathan Meyer
Nathan Meyer

Reputation: 425

Here-Maps Routing API fails with invalid credentials, but other Here-API's continue to work with exact same credentials

So, I've copy pasted the example code from https://developer.here.com/documentation/maps/topics/routing.html into a new project after setting up a new Freemium project, and it worked flawlessly until recently when the routing API mysteriously began rejecting my API requests:

The credentials seem to be OK, given that every OTHER request using them worked just fine. Am I missing something, or is this an issue on their end?

(Site hosted on https://www.cs.drexel.edu/~nim28/CI102/Projects/Project-1/trucking-gps.php)

// Instantiate a map and platform object:
var platform = new H.service.Platform({
  'app_id': '4I898D4cYJAYrLryygIZ',
  'app_code': 'lfkO_XjyiIn0D-IdiPw-rg',
  useHTTPS: true
});
// Retrieve the target element for the map:
var targetElement = document.getElementById('map');

// Get the default map types from the platform object:
var defaultLayers = platform.createDefaultLayers();

// Instantiate the map:
var map = new H.Map(targetElement, defaultLayers.normal.map, {
  zoom: 10,
  center: {
    lat: 52.51,
    lng: 13.4
  }
});

// Create the parameters for the routing request:
var routingParameters = {
  // The routing mode:
  'mode': 'fastest;car', // The start point of the route:
  'waypoint0': 'geo!50.1120423728813,8.68340740740811', // The end point of the route:
  'waypoint1': 'geo!52.5309916298853,13.3846220493377', // To retrieve the shape of the route we choose the route
  // representation mode 'display'
  'representation': 'display'
};

// Define a callback function to process the routing response:
var onResult = function(result) {
  var route, routeShape, startPoint, endPoint, linestring;
  console.log(result);
  if (result.response.route) {
    // Pick the first route from the response:
    route = result.response.route[0];
    // Pick the route's shape:
    routeShape = route.shape;

    // Create a linestring to use as a point source for the route line
    linestring = new H.geo.LineString();

    // Push all the points in the shape into the linestring:
    routeShape.forEach(function(point) {
      var parts = point.split(',');
      linestring.pushLatLngAlt(parts[0], parts[1]);
    });

    // Retrieve the mapped positions of the requested waypoints:
    startPoint = route.waypoint[0].mappedPosition;
    endPoint = route.waypoint[1].mappedPosition;

    // Create a polyline to display the route:
    var routeLine = new H.map.Polyline(linestring, {
      style: {
        strokeColor: 'blue',
        lineWidth: 10
      }
    });

    // Create a marker for the start point:
    var startMarker = new H.map.Marker({
      lat: startPoint.latitude,
      lng: startPoint.longitude
    });

    // Create a marker for the end point:
    var endMarker = new H.map.Marker({
      lat: endPoint.latitude,
      lng: endPoint.longitude
    });

    // Add the route polyline and the two markers to the map:
    map.addObjects([routeLine, startMarker, endMarker]);

    // Set the map's viewport to make the whole route visible:
    map.setViewBounds(routeLine.getBounds());
  }
};

// Get an instance of the routing service:
var router = platform.getRoutingService();

// Call calculateRoute() with the routing parameters,
// the callback and an error callback function (called if a
// communication error occurs):
router.calculateRoute(routingParameters, onResult, function(error) {
  alert(error.message);
});
#map {
  height: 50vh;
  width: 75vh;
  margin: auto;
  display: block;
  vertical-align: middle;
  background: gray;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}


/*# sourceMappingURL=trucking-gps.css.map */
<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <script src="https://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
  <script src="https://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
</head>

<body style="background:gray;">
  <div id="map"></div>
</body>

</html>

EDIT

I do have those keys registered to the proper domain btw, so that's not the issue.

Upvotes: 1

Views: 907

Answers (1)

user3505695
user3505695

Reputation:

Freemium users need to have the correct HTTP Referer header set in their request. Checking Here logs,we could see that you are using:

referer=https://www.cs.drexel.edu/~nim28/CI102/Projects/Project-1/trucking-gps.php

However, the referrer in the Delivery Portal is set to “cs.drexel.edu” (no www)

This is why you get a 401 error. Because app_id / app_code are correct and active, the only reason for a http 401 is a wrong referrer. We have confirmed locally that setting the referrer to https://cs.drexel.edu/~nim28/CI102/Projects/Project-1/trucking-gps.php does work.

Hope this helps!

Upvotes: 1

Related Questions