nitaliano / react-native-mapbox-gl

A Mapbox GL react native module for creating custom maps
Other
2.16k stars 697 forks source link

Mapbox getDirections Error: value must be an object #1437

Closed ThiaggoResende closed 5 years ago

ThiaggoResende commented 5 years ago

I'm trying to add directions over a map in a React Native app.

I've followed this tutorial: https://blog.mapbox.com/adding-directions-to-the-react-native-store-locator-kit-ade759bd824e

The thing is that I'm receiving 'Error: value must be an object' when requesting the directions with mbDirections.getDirections and trying to store it at res variable. Does anyone knows how to solve this problem?

Here's what I'm trying:

const Directions = require('@mapbox/mapbox-sdk/services/directions');
const mbDirections = Directions({ accessToken: 'my token' });

async fetchDirections (origin, destination) {

const originLatLng = {
  latitude: origin[1],
  longitude: origin[0],
};

const destLatLng = {
  latitude: destination[1],
  longitude: destination[0],
};

const requestOptions = {
  geometry: 'polyline',
};

let res = null;
try {
  res = await mbDirections.getDirections([
    originLatLng,
    destLatLng,
  ], requestOptions);
} catch (e) {
  console.log(e);
}

if (res !== null) {
  const directions = res.entity.routes[0];
  this.setState({ directions: directions });
}
}
onitzschke commented 5 years ago

Please check the example

If you solved your issue please close this issue.

Hermanyo commented 5 years ago

Try install, mapbox without @, likes this npm install mapbox -s, after import like this, import Directions from 'mapbox'; and doing const mbDirections = new Directions('Your acessToken');

results:

import Directions from 'mapbox';
const mbDirections = new Directions('Your acessToken');

async fetchDirections (origin, destination) {

const originLatLng = {
  latitude: origin[1],
  longitude: origin[0],
};

const destLatLng = {
  latitude: destination[1],
  longitude: destination[0],
};

const requestOptions = {
  geometry: 'polyline',
};

let res = null;
try {
  res = await mbDirections.getDirections([
    originLatLng,
    destLatLng,
  ], requestOptions);
} catch (e) {
  console.log(e);
}

if (res !== null) {
  const directions = res.entity.routes[0];
  this.setState({ directions: directions });
}
}
anastely commented 4 years ago

Are u solve it?