Call Directions API and draw route in the map

9 posts / 0 new
Log in or register to post comments
Last post
Mon, 12/09/2019 - 10:51
#1
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.

 

Top
Tue, 12/10/2019 - 09:20
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?
Top
Tue, 12/10/2019 - 11:16
(Reply to #2)
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.

Top
Wed, 12/11/2019 - 14:56
(Reply to #3)
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?
Top
Thu, 12/12/2019 - 11:56
(Reply to #4)
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.

Top
Fri, 12/13/2019 - 06:06
(Reply to #5)
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>

Top
Tue, 12/17/2019 - 11:36
(Reply to #6)
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?

Top
Tue, 12/17/2019 - 13:08
(Reply to #7)
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.
Top
Sun, 11/06/2022 - 06:05
Andre87
Hello,

Hello,
I am using the code taken from your example and it woks well.

I would like to get the distance and time, if anyone can help me.

Thanks.

Top