Calculate bbox in turf.js,MapBox,react-native-mapbox-gl(react-native code)?

Question

I am trying to calculate bbox from turf.js like give in the below link

http://turfjs.org/docs#bbox

This is my code and how i tried to implement bbox from turf.js But its resulting in an error.

import React, { Component } from 'react';
import { View, Text,StyleSheet } from 'react-native';
import {Spinner} from 'native-base';
import Mapbox from '@mapbox/react-native-mapbox-gl';
import MapboxGL from '@mapbox/react-native-mapbox-gl';
import MapboxClient from '@mapbox/react-native-mapbox-gl';
import { lineString as makeLineString} from '@turf/helpers';
import turf from '@turf/bbox'

Mapbox.setAccessToken('pk.eyJ1IjoiYW1hbHAiLCJhIjoiY2pkdTZ0M3ZpMnFsYzJ2amc0ZnRjZXRhMCJ9.8PFRuAdcjb7OMHAQHiW5fA');

const myCoords = [
  [43.75, -16.875],
  [33.75, -16.875],
  [22.5, -22.5],
]

const line = makeLineString(myCoords)

var bounds = turf.bbox(myCoords);

//var bounds = require('bound-points')(myCoords)

const layerStyles = MapboxGL.StyleSheet.create({
  origin: {
    circleRadius: 5,
    circleColor: 'white',
  },
  destination: {
    circleRadius: 5,
    circleColor: 'white',
  },
  route: {
    lineColor: 'red',
    lineWidth: 10,
    lineOpacity: 0.84,
  },
  progress: {
    lineColor: '#314ccd',
    lineWidth: 3,
  },
});


export default class App extends Component {

  componentDidMount() {

   }

  constructor(props) {
    super(props);

    this.state = {
      latitude: 41.596,
      longitude: 1.542,
      error: null,
      isMapLoaded: true,
      isLoaded: true,
      isTimeout: false,
      route: null,
      currentPoint: null,
      routeSimulator: null,
      visibleBounds: undefined
    };


  }

  getVisibleBounds = async () => {
    const visibleBounds = await this.map.getVisibleBounds();
    this.setState({ visibleBounds });
    console.log(visibleBounds + "amal")
    console.log(visibleBounds[0] + "amal")
    console.log(visibleBounds[1] + "amal")    
    if(visibleBounds != null)
    {
       this.onFitBounds(visibleBounds);
    }
  };

  onFitBounds (visibleBounds) {
    this.map.fitBounds( bounds[0],bounds[1], 20); // ne sw
  }


  render() {
    return (
      <View style={styles.container}>
        {
         this.state.isMapLoaded?this.mapView():null
        }
      </View>
    );
  }

  mapView(){
    return(
      <Mapbox.MapView
        ref={(ref) => this.map = ref}
        styleURL={Mapbox.StyleURL.Street}
        zoomLevel={8}
        centerCoordinate={[47.809532,13.055054]}
        onDidFinishRenderingMapFully={this.getVisibleBounds}
        style={styles.container}
       >
      <MapboxGL.ShapeSource id='line1' shape={line}>
       <MapboxGL.LineLayer style={layerStyles.route} id='linelayer1' />
       </MapboxGL.ShapeSource>
      </Mapbox.MapView>
    )
  }



}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },

});

This what i am getting (error screen),what might be the issue,i am not able to get the bbox function from '@turf/bbox'.I am feeding a certain number of co-ordinates to

turf.bbox(myCoords)

And setting it to fitBounds in mapbox.

Answer 1

Possibly the way you are importing it.

Try

var bbox = require('@turf/bbox')

bbox(myCoords)

Answer 2

import module/package

var turf = require('@turf/turf');

Now use

turf.bbox(myCoords)

it is working for me. answer by @Charlie Wade

Answer 3

Just use this function instead,it will return the perfect output for your this.map.fitBounds( bounds[0],bounds[1], 20); // ne sw function.

Ex: if var points = [[-1, 1], [5, 10], [-8, 13]]

output: [ [ -8, 1 ], [ 5, 13 ] ]

function findBounds(points) {
  var n = points.length
  if(n === 0) {
    return []
  }
  var d = points[0].length
  var lo = points[0].slice()
  var hi = points[0].slice()
  for(var i=1; i<n; ++i) {
    var p = points[i]
    for(var j=0; j<d; ++j) {
      var x = p[j]
      lo[j] = Math.min(lo[j], x)
      hi[j] = Math.max(hi[j], x)
    }
  }
  return [lo, hi]
}

Answer 4

You can use this code :

import bbox from '@turf/bbox'

const bboxArray = bbox("coordinates or feature");
const boundObject = ({ne:[bboxArray[0],bboxArray[1]],sw:[bboxArray[2],bboxArray[3]]})