Routing API return object not encoded string with "points_encoded : true"

#1

I want to make routing Polyline with Google map API.

When I click some points in google maps, graphhopper API returns routing result. But

My response returns like this. points’ value is object. Not encoded string.

points: {type: "LineString", coordinates: Array(196)}
points_encoded: true

I want points with encoded string type value.

My Javascript code is…

var defaultKey = MY_KEY;
    var profile = "car";
    var host;
    var ghRouting = new GraphHopper.Routing({
      key: defaultKey, 
      host: host, 
      vehicle: profile, 
      elevation: false, 
      type:"json", 
      debug: true, 
      calc_points: true
    });

if(isMarkerExists && markerArray.length >= 2){ 
      for(let i = 0; i < markerArray.length; i++){
        console.log(markerArray[i].lat,markerArray[i].lng);
        ghRouting.addPoint(new GHInput(markerArray[i].lat,markerArray[i].lng)); //add clicked points
      }
      ghRouting.doRequest()
      .then(function(res){
        console.log(res);
        //I want to make `res.paths[0].points` return encoded string NOT OBJECT.
        let path = window.google.maps.geometry.encoding.decodePath(res.paths[0].points);
        setPolylinePath(path); //set polyline path object for google api.
      })
      .catch(function(err){
        console.error('niklasjang ERROR : '+err.message);
      });
    }else{
      dispatch(navigationPageSetGoogleMapRoutingDisplayFalse)
    }
  }

What should I do?

#2

For JavaScript please use the JS client: https://github.com/graphhopper/directions-api-js-client

If you want encoded polylines then this is returned by default, no special parameter required.

Please do not use the google decode function as this won’t work, when we include elevation which is the default or set elevation=false.

1 Like
#3

I did what https://github.com/graphhopper/directioens-api-js-client is saying.

  1. Make my basic web app with react.
  2. I installed api with npm install graphhopper-js-api-client --save
  3. Added require('graphhopper-js-api-client'); to my code.
  4. Added this code below and used it.
var defaultKey = "[Sign-up for free and get your own key: https://www.graphhopper.com/products/]";
     var profile = "car";
 
     var host;
     var ghRouting = new GraphHopper.Routing({key: defaultKey, host: host, vehicle: profile, elevation: false});
     // If you only need e.g. Routing, you can only require the needed parts
     //var ghRouting = new GraphHopperRouting({key: defaultKey, host: host, vehicle: profile, elevation: false});
 
     // Setup your own Points
     ghRouting.addPoint(new GHInput(47.400905, 8.534317));
     ghRouting.addPoint(new GHInput(47.394108, 8.538265));
 
     ghRouting.doRequest()
     .then(function(json){
        // Add your own result handling here
        console.log(json);
     })
     .catch(function(err){
        console.error(err.message);
     });

Is there something wrong? It is first time to use API for me. Please help me.

I did

ghRouting.doRequest()
      .then(function(json){
        console.log(markerArray.length);
        console.log(json);
        setPolylinePath(json);
      })
      .catch(function(err){
        console.error('niklasjang ERROR : '+err.message);
      });
    }else{
      dispatch(navigationPageSetGoogleMapRoutingDisplayFalse)
    }

And get result like…
points’s value is object, not encoded string right? I did not add additional property or something. Just as js-client repo says!

result
result.png623×623 17 KB

#4

And I tried with axios to understand query/

When web brower URL is

https://graphhopper.com/api/1/route?point=47.400905,8.534317&point=47.394108,8.538265&vehicle=car&elevation=false&key=MY_KEY

the output is well formatted. It works well.

{"hints":{"visited_nodes.average":"64.0","visited_nodes.sum":"64"},
"info":{"copyrights":["GraphHopper","OpenStreetMap contributors"],"took":7},"paths":[{"distance":1192.467,
"weight":189.215835,
"time":171317,
"transfers":0,
"points_encoded":true,
"bbox":[8.532457,47.394227,8.538603,47.401338],
"points":"w~h`Hazas@cAo@MVnGdEz@`@z@RvAJHDLPLVJ^LTPJLDN?p@GR?d@_@JUPs@DeAZm@v@UlAe@^Wn@i@`AqApDiGNKjAoB@Gn@y@XU{AyEzB_B"
//HERE NOT OBJECT BUT ENCODED STRING!

...omission...

Although the query and query string (URL) is formed by me manually according to my code, Chrome console.log show OBJECT.

What should I do? :sob:

@karussell

#5

The GraphHopper Js client lets you directly work on the point objects, it decodes the encoded polyline already under the hood (you don’t need to do that!).