Code Monkey home page Code Monkey logo

Comments (8)

mihaisampaleanu avatar mihaisampaleanu commented on May 7, 2024 14

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.

from react-native-maps.

bramus avatar bramus commented on May 7, 2024 8

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

from react-native-maps.

lelandrichardson avatar lelandrichardson commented on May 7, 2024

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...

from react-native-maps.

christopherdro avatar christopherdro commented on May 7, 2024

@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.

from react-native-maps.

ahmed1490 avatar ahmed1490 commented on May 7, 2024

@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!

from react-native-maps.

paulbrie avatar paulbrie commented on May 7, 2024

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

from react-native-maps.

christopherdro avatar christopherdro commented on May 7, 2024

👍

from react-native-maps.

CharlieIGG avatar CharlieIGG commented on May 7, 2024

@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?

from react-native-maps.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.