CODEWITHSUNDEEP
react-nativehere-apipolylinereact-native-maps
mememanyes
mememanyes

Reputation: 145

How to make <Polyline /> follow roads in react-native-maps with HERE API

I was able to make the request to HERE API and get the response, I put all the waypoints from leg to an array(latitude and longitude) and it does draw a polyline but it does not follow the road. It just goes trough buildings etc.

This is my Polyline component:

<Polyline coordinates={this.state.route} strokeWidth={7} strokeColor="#2ecc71" geodesic={true} />

this.state.route is an array of coordinates which I got like this:

axios.get(`https://route.api.here.com/routing/7.2/calculateroute.json?app_id={myappid}&app_code={myappcode}&waypoint0=geo!${from_lat},${from_long}&waypoint1=geo!${to_lat},${to_long}&mode=fastest;bicycle;traffic:disabled`).then((response) => {
      console.log(response.data.response.route);
      response.data.response.route[0].leg[0].maneuver.map((m) => {
        routeCoordinates.push({latitude: m.position.latitude, longitude: m.position.longitude});
      })
      console.log(routeCoordinates);
      this.props.navigation.navigate('ShowMap', {
        spot: chosenSpot,
        route: routeCoordinates,
      });  
    }).catch((error) => {
        console.log(error);
    })

And then I pass this array to my screen and put it in my state as route.

I expect it to draw a polyline over roads and not over buildings and stuff.

Here is an image to show you how it looks like(NOTE that blue lines are just to cover road names it has nothing to do with drawing a polyline): image of polyline

Upvotes: 0

Views: 2872

Answers (2)

Shubham Pal
Shubham Pal

Reputation: 1

Please Use this

axios.get(`https://route.api.here.com/routing/7.2/calculateroute.json?app_id={myappid}&app_code={myappcode}&waypoint0=geo!${from_lat},${from_long}&waypoint1=geo!${to_lat},${to_long}&mode=fastest;bicycle;traffic:disabled`).then((response) => {
  console.log(response.data.response.route);
  const steps = response.data.response.route[0].leg.flatMap((leg: any) => leg.steps.flatMap((step: any) => decodePolyline(step.polyline.points)));
  if (steps.length > 0) {
    setCoordinates(steps);
    
  } 
}).catch((error) => {
    console.log(error);
})

this is the code of decodePolyline

const decodePolyline = (t: any) => {
let points: any = [];
let index = 0, len = t.length;
let lat = 0, lng = 0;

while (index < len) {
  let b, shift = 0, result = 0;
  do {
    b = t.charCodeAt(index++) - 63;
    result |= (b & 0x1f) << shift;
    shift += 5;
  } while (b >= 0x20);
  let dlat = ((result & 1) ? ~(result >> 1) : (result >> 1));
  lat += dlat;

  shift = 0;
  result = 0;
  do {
    b = t.charCodeAt(index++) - 63;
    result |= (b & 0x1f) << shift;
    shift += 5;
  } while (b >= 0x20);
  let dlng = ((result & 1) ? ~(result >> 1) : (result >> 1));
  lng += dlng;

  points.push({ latitude: lat / 1e5, longitude: lng / 1e5 });
}
return points;};

This is the polyline code

<Polyline
   coordinates={coordinates}
   strokeColor={COLORS.green} 
   strokeWidth={5} />

This is the 100% will work

Upvotes: 0

user3505695
user3505695

Reputation:

Please add an additional parameter to the calculateroute rest api: legAttributes=shape

Then the rest api will return shape object containing the points along the roads. 

https://route.api.here.com/routing/7.2/calculateroute.json?app_id={myappid}&app_code={myappcode}&waypoint0=geo!${from_lat},${from_long}&waypoint1=geo!${to_lat},${to_long}&mode=fastest;bicycle;traffic:disabled&legAttributes=shape

Please see legAttributes in the documentation. https://developer.here.com/documentation/routing/topics/resource-calculate-route.html

Upvotes: 1

Related Questions