Maps: Directions between Two-point location in mapbox-gl - React Native?

[anastely]

I have two point i get it from database and i want to render a line From start point to end point

what I got is the Straight line in two points without consideration the routes and directions on the maps

So how can i handle it to take a look for routes and Directions on the map?

here's what i got

here's what i expect

here is my code

    import MapboxGL from '@react-native-mapbox-gl/maps';
    import React, {Component} from 'react';
    import {PermissionsAndroid, StyleSheet, View} from 'react-native';
    import Icon from 'react-native-vector-icons/Ionicons';

    export default class Mapbox extends Component {
      constructor(props) {
        super(props);
        this.startPoint = [34.4999, 31.5542];
        this.finishedPoint = [34.4979, 31.5512];
        this.state = {
          center: [],
          // initialCoords: undefined,
          initialCoords: [-77.034084, 38.9],
          acceptedPermations: false,

          // Two point state
          route: {
            type: 'FeatureCollection',
            features: [
              {
                type: 'Feature',
                properties: {},
                geometry: {
                  type: 'LineString',
                  coordinates: [
                    this.startPoint, //point A "current" ~ From
                    this.finishedPoint, //Point B ~ to
                  ],
                },
                style: {
                  fill: 'red',
                  strokeWidth: '10',
                  fillOpacity: 0.6,
                },
                paint: {
                  'fill-color': '#088',
                  'fill-opacity': 0.8,
                },
              },
            ],
          },
        };
        this.onRegionDidChange = this.onRegionDidChange.bind(this);
      }

      async componentDidMount() {
        const isGranted = await MapboxGL.requestAndroidLocationPermissions();
        this.setState({isGranted: isGranted});
        MapboxGL.setAccessToken(
          '....',
        );
      }

      async onRegionDidChange() {
        const center = await this._map.getCenter();
        this.setState({center}, () =>
          console.log('onRegionDidChange', this.state.center),
        );
      }

      renderCurrentPoint = () => {
        return (
          <>
            <MapboxGL.UserLocation
              renderMode="normal"
              visible={false}
              onUpdate={location => {
                const currentCoords = [
                  location.coords.longitude,
                  location.coords.latitude,
                ];
                // console.log(location); // current location is here
                this.setState({
                  initialCoords: currentCoords,
                });
              }}
            />

            {/* current Provider location */}
            <MapboxGL.PointAnnotation
              selected={true}
              key="key1"
              id="id1"
              coordinate={this.startPoint}>
              <Icon name="ios-pin" size={45} color="#00f" />
              <MapboxGL.Callout title="My" />
            </MapboxGL.PointAnnotation>
            {/* user From DB location */}
            <MapboxGL.PointAnnotation
              selected={true}
              key="key2"
              id="id2"
              coordinate={this.finishedPoint}>
              <Icon name="ios-pin" size={45} color="#0f0" />
              <MapboxGL.Callout title="User" />
            </MapboxGL.PointAnnotation>
            <MapboxGL.ShapeSource id="line1" shape={this.state.route}>
              <MapboxGL.LineLayer
                id="linelayer1"
                style={{
                  lineColor: 'red',
                  lineWidth: 10,
                  lineCap: 'round',
                }}
              />
            </MapboxGL.ShapeSource>
            <MapboxGL.Camera
              zoomLevel={16}
              centerCoordinate={this.state.initialCoords}
              // centerCoordinate={[-5.803457464752711, 35.769940811797404]}
            />
          </>
        );
      };
      render() {
        if (!this.state.isGranted) {
          return null;
        }

        return (
          <View style={styles.page}>
            <MapboxGL.MapView
              styleURL={MapboxGL.StyleURL.Street}
              ref={c => (this._map = c)}
              onRegionDidChange={this.onRegionDidChange}
              zoomEnabled={true}
              style={styles.map}>
              {this.renderCurrentPoint()}
            </MapboxGL.MapView>
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      page: {
        flex: 1,
        // justifyContent: 'center',
        // alignItems: 'center',
        // backgroundColor: '#F5FCFF',
      },
      container: {
        height: 500,
        width: 500,
        backgroundColor: 'tomato',
      },
      map: {
        flex: 1,
      },
    });

[ferdicus]

Hey, you need a routing service that provides you the route.
There are many services out there - google/ HERE have apis that provide this.
Mapbox has a directions service as well, however that is an external service from this repo.

Please close the ticket - thanks.

[harrypfry]

HERE maps have a good API which you can put the start and end coordinates as queries in the URL and it returns a JSON with an array of directions (among other things).

https://route.api.here.com/routing/7.2/calculateroute.json?app_id={APP_ID}&app_code=${APP_CODE}&waypoint0=geo!${startCoordinates}&waypoint1=geo!${endCoordinates}&mode=fastest;pedestrian;traffic:disabled

I've managed to implement this in leaflet on react, but currently struggling with react native. It could be done with several polylines so would be better than start and end point, but still wont stick to the roads.

[anastely]

@harrypfry I work with here Api before and got the route between two-points and handle it with react-native-maps, I couldn't handle it with mapbox sadly :(
if u have an example with mapbox tell me

[ferdicus]

@anastely: you'll probably get back something like a geojson from HERE.
You need to convert that to an array of [lng, lat] coordinates, which you finally have to pass into a Linelayer. That should render your path.

NB: The HERE route won't map 1to1 onto another providers maptiles.
HERE routing - mapbox tiles.

For right mapping you also need maptiles from that provider or ... need to do some post adjustment of the route.

[kristfal]

This is a map rendering library and not a direction library.

Any API/service/library that provides navigation assistance and outputs geojson should be easy to implement.

[anastely]

@kristfal I get a geojson from HERE API how can I implement it in the mapbox library?

[kristfal]

@anastely, check out the examples or post on stack overflow.

I can’t help you on implementation details like that, that is something you need to figure out on your own.

[xander18]

Hi @anastely i made something today like what you asked do you still need help ?

[anastely]

Sadly I just skip it, so yes I need ur help :).

On Sat, 4 Jan 2020 at 20:03, xander18 [e-mail] wrote:

Hi @anastely https://github.com/anastely i made something today like
what you asked do you still need help ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/react-native-mapbox-gl/maps/issues/565?email_source=notifications&email_token=AF327M2Z4MHAGHZMYOZNEQLQ4DFOZA5CNFSM4JY5YC6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIC47GY#issuecomment-570806171,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AF327M6SHXI23RKZEWOB2NLQ4DFOZANCNFSM4JY5YC6A
.

[xander18]

ok i'll take the time tomorow to write u an exemple with explication

[anastely]

Ok, take your time , thanks in advance

On Sat, Jan 4, 2020, 10:19 PM xander18 [e-mail] wrote:

ok i'll take the time tomorow to write u an exemple with explication

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/react-native-mapbox-gl/maps/issues/565?email_source=notifications&email_token=AF327M3STJFISJQ77FPNR4LQ4DVO3A5CNFSM4JY5YC6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIC7P4Y#issuecomment-570816499,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AF327M3W5GQGOU2BZ7YKZZTQ4DVO3ANCNFSM4JY5YC6A
.

[xander18]

@anastely
check this : https://github.com/xander18/MapBoxShowDirection
Tell me if everything is ok for you
If you have some question don't hesitate

[xander18]

check this : https://github.com/xander18/MapBoxShowDirection
Tell me if everything is ok for you
If you have some question don't hesitate

Le sam. 4 janv. 2020 à 21:54, Anas T [e-mail] a écrit :

Ok, take your time , thanks in advance

On Sat, Jan 4, 2020, 10:19 PM xander18 [e-mail] wrote:

ok i'll take the time tomorow to write u an exemple with explication

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<
https://github.com/react-native-mapbox-gl/maps/issues/565?email_source=notifications&email_token=AF327M3STJFISJQ77FPNR4LQ4DVO3A5CNFSM4JY5YC6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIC7P4Y#issuecomment-570816499
,
or unsubscribe
<
https://github.com/notifications/unsubscribe-auth/AF327M3W5GQGOU2BZ7YKZZTQ4DVO3ANCNFSM4JY5YC6A

.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/react-native-mapbox-gl/maps/issues/565?email_source=notifications&email_token=ABP3PZGO6YFSXJZ6JYHVLP3Q4DZPDA5CNFSM4JY5YC6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIDAEUQ#issuecomment-570819154,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABP3PZBFKJZSZJRRK4SYLBDQ4DZPDANCNFSM4JY5YC6A
.

--

Al Akkad Youssef

LD: 07 81 94 74 07

Site Web : http://youssef-alakkad.com/

Twitter : https://twitter.com/LittleYouss

Linkedin : http://www.linkedin.com/pub/youssef-al-akkad/82/222/139

[anastely]

check this : https://github.com/xander18/MapBoxShowDirection Tell me if everything is ok for you If you have some question don't hesitate Le sam. 4 janv. 2020 à 21:54, Anas T [e-mail] a écrit :
…
Ok, take your time , thanks in advance On Sat, Jan 4, 2020, 10:19 PM xander18 @.*> wrote: > ok i'll take the time tomorow to write u an exemple with explication > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > < #565?email_source=notifications&email_token=AF327M3STJFISJQ77FPNR4LQ4DVO3A5CNFSM4JY5YC6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIC7P4Y#issuecomment-570816499 >, > or unsubscribe > < https://github.com/notifications/unsubscribe-auth/AF327M3W5GQGOU2BZ7YKZZTQ4DVO3ANCNFSM4JY5YC6A > > . > — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#565?email_source=notifications&email_token=ABP3PZGO6YFSXJZ6JYHVLP3Q4DZPDA5CNFSM4JY5YC6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIDAEUQ#issuecomment-570819154>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABP3PZBFKJZSZJRRK4SYLBDQ4DZPDANCNFSM4JY5YC6A .
-- Al Akkad Youssef LD: 07 81 94 74 07 Site Web : http://youssef-alakkad.com/ Twitter : https://twitter.com/LittleYouss Linkedin : http://www.linkedin.com/pub/youssef-al-akkad/82/222/139

Great!!
Thank you I just run it and it's work like a charm, i will check the code you write when I have more time

[SherozeAli]

https://github.com/xander18/MapBoxShowDirection
i've tried run this code added all the necesary req but it shows an error
index 1 , code 0

[SherozeAli]

Sadly I just skip it, so yes I need ur help :).
…
On Sat, 4 Jan 2020 at 20:03, xander18 @.*> wrote: Hi @anastely https://github.com/anastely i made something today like what you asked do you still need help ? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#565?email_source=notifications&email_token=AF327M2Z4MHAGHZMYOZNEQLQ4DFOZA5CNFSM4JY5YC6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIC47GY#issuecomment-570806171>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AF327M6SHXI23RKZEWOB2NLQ4DFOZANCNFSM4JY5YC6A .

[sarahberraadi]

what about MapBoxShowDirection with reactjs

[xander18]

what about MapBoxShowDirection with reactjs

https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/

if you have issue to make it i can try to help you

[sauhardar]

https://github.com/xander18/MapBoxShowDirection
i've tried run this code added all the necesary req but it shows an error
index 1 , code 0

@SherozeAli @xander18 , do you understand what this index 1, code 0 error is or where it's coming from? I've encountered it before, but I'm not sure about why that comes up—stackoverflow is no use here. Seems like it's an Android-only issue too.

[xander18]

its an android issue i'll fix it gimme 5min its just a android config issue my example was only for ios that why you've got this error sry

[sauhardar]

@xander18 , I have some questions about markers, do you think I can email you?

[xander18]

join me on this discord faster https://discord.gg/Bc8D7Q

Le mar. 2 juin 2020 à 19:54, Sauharda Rajbhandari [e-mail]
a écrit :

@xander18 https://github.com/xander18 , I have some questions about
markers, do you think I can email you?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/react-native-mapbox-gl/maps/issues/565#issuecomment-637708918,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABP3PZHKJZUIH356XNVWEQLRUU4E7ANCNFSM4JY5YC6A
.

--

Al Akkad Youssef

LD: 07 81 94 74 07

Site Web : http://youssef-alakkad.com/

Twitter : https://twitter.com/LittleYouss

Linkedin : http://www.linkedin.com/pub/youssef-al-akkad/82/222/139

[SiddigHope]

@xander18 can I add you on discord I need some help in working with mapbox.. the invite link is invalid

[ferdicus]

@xander18, if possible, I would either prefer you'd discuss a solution to this in this ticket or in the gitter channel.
Reasoning for my request being, that we have quite some comments on this thread and people seem to be looking for a solution to this issue in regular intervals.
Would be good to have it available for the following people stumbling over this ticket.

Thanks 🙇

[xander18]

https://discord.gg/zrF9Eg

Le lun. 28 sept. 2020 à 09:05, Siddig A.Hamoda [e-mail] a
écrit :

@xander18 https://github.com/xander18 can I add you on discord I need
some help in working with mapbox.. the invite link is invalid

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/react-native-mapbox-gl/maps/issues/565#issuecomment-699820225,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABP3PZC2DQIQDIED4IBXRYDSIAYSJANCNFSM4JY5YC6A
.

--

Al Akkad Youssef

LD: 07 81 94 74 07

Site Web : http://youssef-alakkad.com/

Twitter : https://twitter.com/LittleYouss

Linkedin : http://www.linkedin.com/pub/youssef-al-akkad/82/222/139

[xander18]

https://discord.gg/zrF9Eg

Le lun. 28 sept. 2020 à 09:30, Kid Commit [e-mail] a
écrit :

@xander18 https://github.com/xander18, if possible, I would either
prefer you'd discuss a solution to this in this ticket or in the gitter
channel.
Reasoning for my request being, that we have quite some comments on this
thread and people seem to be looking for a solution to this issue in
regular intervals.
Would be good to have it available for the following people stumbling over
this ticket.

Thanks 🙇

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/react-native-mapbox-gl/maps/issues/565#issuecomment-699832642,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABP3PZBZDFJK7UEWNEJKF7DSIA3QRANCNFSM4JY5YC6A
.

--

Al Akkad Youssef

LD: 07 81 94 74 07

Site Web : http://youssef-alakkad.com/

Twitter : https://twitter.com/LittleYouss

Linkedin : http://www.linkedin.com/pub/youssef-al-akkad/82/222/139