Call Directions API and draw route in the map

8 posts / 0 new
Last post
trrycola
Call Directions API and draw route in the map

Hello, 

I'm new to mapquest so I'm sorry to bother if the question is too obvious, but when I call Direcitions API from my server side i get the json with the route and i try to draw the route with L.mapquest.directionsLayer but i get this error: 

  • Uncaught (in promise) TypeError: Cannot read property '0' of null
        at e._projectLatlngs (mapquest.js:10)
        at e._projectLatlngs (mapquest.js:10)
        at e._project (mapquest.js:10)
        at e._updatePath (mapquest.js:10)
        at e.redraw (mapquest.js:10)
        at e.setLatLngs (mapquest.js:10)
        at e.setLatLngs (mapquest.js:23)
        at e._constructPrimaryRouteShape (mapquest.js:10)
        at e._constructPrimaryRoute (mapquest.js:10)
        at e._generatePrimaryRoute (mapquest.js:10)

The js code is this:

L.mapquest.key = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
var baseLayer = L.mapquest.tileLayer('map');
var map = L.mapquest.map('map', {
center: [40.447255, -3.7007],
layers: baseLayer,
zoom: 10
});
var json_result = {{ route|safe }};
console.log(json_result)
var customLayer = L.mapquest.directionsLayer({
directionsResponse: json_result
});
customLayer.addTo(map);

 

Im using django in the server side.

 

Could somebody help me?

 

Thanks in advance.

 


MQBrianCoakley
Can you post a url where we
Can you post a url where we can see this happening? If not, can you post a sample html page showing the application getting the error?

trrycola
Sorry but i can't post any

Sorry but i can't post any url.

 

This is the html page:

<html>
<head>
<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script>
<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>

<script type="text/javascript">
window.onload = function() {
L.mapquest.key = 'XXXXXXXXXXX';
var baseLayer = L.mapquest.tileLayer('map');
var map = L.mapquest.map('map', {
center: [40.447255, -3.7007],
layers: baseLayer,
zoom: 10
});
var json_result = {{ route|safe }};
console.log(json_result)
var customLayer = L.mapquest.directionsLayer({
directionsResponse: json_result
});
customLayer.addTo(map);
}
</script>
</head>

<body style="border: 0; margin: 0;">
<div id="map" style="width: 100%; height: 530px;"></div>
</body>
</html>

 

And the info showed in the console is this:

 

  • Part of the json response

{route: {…}, info: {…}}info: copyright: {imageAltText: "© 2019 MapQuest, Inc.", imageUrl: "http://api.mqcdn.com/res/mqlogo.gif", text: "© 2019 MapQuest, Inc."}debug: "diff=0.0000, AKA 'Distance-biased-AW/FZ=[1.50,1.25,0.95,0.90,0.85]/5.00', AKA 'Default'"messages: []statuscode: 0__proto__: Objectroute: alternateRoutes: [{…}]bestFit: {margin: 0, newLevel: 15, width: 768, scale: 11812, newScale: 12975, …}boundingBox: {lr: {…}, ul: {…}}computedWaypoints: []distance: 2.846formattedTime: "00:08:55"fuelUsed: 0.22hasAccessRestriction: falsehasBridge: falsehasCountryCross: falsehasFerry: falsehasHighway: falsehasSeasonalClosure: falsehasTimedRestriction: falsehasTollRoad: falsehasTunnel: falsehasUnpaved: falselegs: [{…}]locationSequence: (2) [0, 1]locations: (2) [{…}, {…}]mapState: {center: {…}, width: 768, scale: 11812, height: 1024}maxRoutes: "9"name: "Paseo del Prado"options: {arteryWeights: Array(6), cyclingRoadFactor: 1, timeType: 0, useTraffic: false, returnLinkDirections: false, …}realTime: -1realTimeAlternatePercentSavingsThreshhold: "5"realTimeAlternateTimeSavingsThreshhold: "120"routeError: errorCode: -400message: ""__proto__: ObjectsessionId: "5defe85c-027d-4ee4-02b4-22fe-0e39c89030f0"shape: {legIndexes: Array(2), maneuverIndexes: Array(16), shapePoints: Array(98)}time: 535timeOverage: 31_index: 0__proto__: Object__proto__: Object

 

  • The error message

mapquest.js:10 Uncaught TypeError: Cannot read property '0' of null
    at e._projectLatlngs (mapquest.js:10)
    at e._projectLatlngs (mapquest.js:10)
    at e._project (mapquest.js:10)
    at e._updatePath (mapquest.js:10)
    at e.redraw (mapquest.js:10)
    at e.setLatLngs (mapquest.js:10)
    at e.setLatLngs (mapquest.js:23)
    at e._constructPrimaryRouteShape (mapquest.js:10)
    at e._constructPrimaryRoute (mapquest.js:10)
    at e._generatePrimaryRoute (mapquest.js:10)

 

Thank you for your time.


MQBrianCoakley
There's part of a sample page
There's part of a sample page but I'll need more information to get to the root of the issue. Since I haven't seen anyone else running into the issue, I suspect there is an issue with the route locations. Can you post a sample that I can run on my side with locations that gets the error?

trrycola
Hi,

Hi,

Im sorry for not post more information.

I don't think that the problem is in the locations because i tried a lot of locations and all failed. 

I've been researching and found out that the problem comes when I add the layer to the map.

For example when i search  from "San Francisco, CA" to "San Jose, CA" i do the next GET request:

'http://www.mapquestapi.com/directions/v2/alternateroutes?key=XXXXXXXXX&from='+origin+'&to='+destiny+'&maxRoutes='+str(9)+'&timeOverage='+str(200)

 

I get a good json response and i can create a custom layer with  

var customLayer = L.mapquest.directionsLayer({
directionsResponse: json_result
});

But the problem come when i try add the layer to the map with 

customLayer.addTo(map);

 

If you want i can post the json of the layer.


MQBrianCoakley
Is the intention to start

Is the intention to start with an external json response and then create the route layer? Usually there is a route request then the layer is created as shown in the directionsLayer reference.

 

Here is a simple example how I did something similar.

 

<!DOCTYPE html>

<html>

<head>

<title>MapQuest.js sample</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.2.0/mapquest.js"></script>

<link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.2.0/mapquest.css"/>

<script type="text/javascript">

L.mapquest.key = 'KEY';

 

function init(){

var directions = L.mapquest.directions();

directions.route({

start: 'San Francisco, CA',

end: 'San Jose, CA'

}, createMap);

 

function createMap(err, response) {

var map = L.mapquest.map('map', {

center: [0, 0],

layers: L.mapquest.tileLayer('map'),

zoom: 12

});

 

var customLayer = L.mapquest.directionsLayer({

directionsResponse: response

});

customLayer.addTo(map);

}

}

</script>

<style>

#map {

width: 800px;

height: 600px;

}

</style>

</head>

<body onload='init();'>

<div id="map"></div>

</body>

</html>


trrycola
Resolved

Yes, this is my intention, but i had a lot of problems.

Right now I have a solution, it's not the best, but it works. 

Thank you for your time.
 
Taking advantage of the thread... I want to recover several routes so I use alternateRoutes but at most I get 2 routes. Is there any way to force more routes? For example a minRoutes?


MQBrianCoakley
There is a maxRoutes
There is a maxRoutes parameter, but not a minRoutes. There is no function to force a minimum number of alternate routes. 2-3 is normal.