New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Do you have plans to have a directions api in place? #52

Closed
ahmed1490 opened this Issue Jan 27, 2016 · 8 comments

Comments

Projects
None yet
7 participants
@ahmed1490

ahmed1490 commented Jan 27, 2016

No description provided.

@lelandrichardson

This comment has been minimized.

Collaborator

lelandrichardson commented Jan 27, 2016

cc @christopherdro who is working on something similar.

I don't think we will add a directions API... but it is conceivable you could open source a directions component or something that worked on top of this library...

@christopherdro

This comment has been minimized.

Collaborator

christopherdro commented Jan 27, 2016

@ahmed1490 You can use Google's or Mapbox's api to get an array of geo json coordinates that you can set on the coordinates prop for <Polyline />.

It would look something like this.

Get directions based on start and end coordinates.

getDirections() {
    return new Promise((resolve, reject) => {
      fetch(`https://api.mapbox.com/v4/directions/mapbox.driving/-118.2980330,34.1036520;-118.258443,34.145785.json?geojson=true&access_token=YOUR_API_TOKEN`)
      .then((response) => {
        return response.json();
      }).then((json) => {
        resolve(json);
      }).catch((err) => {
        reject(err);
      });
    });
}

Massage data to fit <Polyline /> component.

this.getDirections().then((result) => {
   let polylineCoordiantes = result.routes[0].geometry.coordinates.map(c => {
      return {
         latitude: c[1],
         longitude: c[0],
      }
  });
});
<Polyline coordinates={polylineCoordinates} />

I'll try by best to get an official example up when I get some free time.

@ahmed1490

This comment has been minimized.

ahmed1490 commented Jan 27, 2016

@christopherdro Thank you for the quick response 👍
Is it because of the API token that you are skeptical.. to have this included in the project?

And lastly Great work in the project guys!

@mihaisampaleanu

This comment has been minimized.

mihaisampaleanu commented Mar 2, 2016

Starting from @christopherdro idea I used google directions api.

getDirections(opts) {
    var fromCoords = opts.fromCoords;
    var toCoords = opts.toCoords;
    var url = 'https://maps.googleapis.com/maps/api/directions/json?mode=walking&';
        url += 'origin=' + fromCoords.latitude + ',' + fromCoords.longitude;
        url += '&destination=' + toCoords.latitude + ',' + toCoords.longitude + '&key=' + constants.GOOGLE_KEY;

    return new Promise((resolve, reject) => {;
      fetch(url)
      .then((response) => {
        return response.json();
      }).then((json) => {
        resolve(json);
      }).catch((err) => {
        reject(err);
      });
    });
  }

from the response I used: data.routes[0].overview_polyline.points;

  _createRouteCoordinates(data) {
    if (data.status !== 'OK') {
      return [];
    }

    let points = data.routes[0].overview_polyline.points;
    let steps = Polyline.decode(points);
    let polylineCoords = [];

    for (let i=0; i < steps.length; i++) {
      let tempLocation = {
        latitude : steps[i][0],
        longitude : steps[i][1]
      }
      polylineCoords.push(tempLocation);
    }

    return polylineCoords;
  }

Polyline it an object that is able to decode into an array with lat,lng coordinates the encoded polyline points. You can find it here. [https://github.com/mapbox/polyline]

and finally

  <MapView.Polyline
    coordinates={this.state.polylineCoords}
    strokeWidth={2}
    strokeColor="red"
   />

It works perfectly. Thanks @christopherdro for the idea.

Good luck guys. Hope this post will be useful.

@paulbrie

This comment has been minimized.

paulbrie commented Mar 2, 2016

@KFreak , nice job! Thanks for your contribution. :)

@christopherdro

This comment has been minimized.

Collaborator

christopherdro commented Mar 2, 2016

👍

@CharlieIGG

This comment has been minimized.

CharlieIGG commented Aug 13, 2016

@mihaisampaleanu I've been trying to recreate your solution, but I'm stuck after getting the Promise's response. Any chance you could go a little bit more ELI5 with this please?

@bramus

This comment has been minimized.

Contributor

bramus commented Nov 20, 2017

Based upon the feedback here (and in #929 and #778) I've knocked up a standalone and immediately usable component to do just that: https://github.com/bramus/react-native-maps-directions

Hope it helps out those struggling to combine all suggestions. Installation per npm/yarn: yarn add react-native-maps-directions

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment