Comments (8)
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.
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.
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.
@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.
@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.
@kfreak , nice job! Thanks for your contribution. :)
from react-native-maps.
👍
from react-native-maps.
@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)
- Android custom Markers with children content have sporadic flashing/glitches (see example video) HOT 5
- AccessibilityLabels for markers doesnt work HOT 1
- Are there any plans to replace the deprecated MKPinAnnotationView for a new AnnotationView on iOS? HOT 1
- Marker's `onPress` doesn't return `nativeEvent.position` on iOS HOT 1
- Custom marker start flicking without changing the state. HOT 14
- Task :react-native-maps:compileDebugJavaWithJavac FAILED HOT 1
- download map and save in pdf,png HOT 1
- Custom marker is croping from right to bottom. Only in IOS.
- Apple Privacy Manifest HOT 7
- Marker blinking issue HOT 5
- Markers are blinking on Android and Google Maps HOT 1
- CocoaPods could not find compatible versions for pod "react-native-google-maps" HOT 3
- Maptile works well on IOS , but it does not update on Android HOT 5
- Subview flickering on children index changes HOT 5
- Expo sdk50 cannot use it
- Marker don't display HOT 2
- Subview flickering on children index changes HOT 1
- [iOS] With Google Maps, zoomTapEnabled can't be modified and sometimes it's ignored. HOT 1
- 'onRegionChange' called long after changes has stopped HOT 1
- Invariant Violation: Event cannot be both direct and bubbling: topSelect HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-maps.