mapbox - Array of Point Annotations with MapbBox and React Native

Question

I started using the mapbox a short time ago and now I run into a problem. What I'm trying to do is to take a json of coordinates coming from an API, in this case I demonstrated it as an array and show the respective points on the map using the mapbox sdk. I'm using this repository to get some references, but I still can't find anything that works.

  function Nav() {


  const coordinates = [
    [-73.98330688476561, 40.76975180901395],
    [-73.96682739257812, 40.761560925502806],
    [-74.00751113891602, 40.746346606483826],
    [-73.95343780517578, 40.7849607714286],
    [-73.99017333984375, 40.71135347314246],
    [-73.98880004882812, 40.758960433915284],
    [-73.96064758300781, 40.718379593199494],
    [-73.95172119140624, 40.82731951134558],
    [-73.9829635620117, 40.769101775774935],
    [-73.9822769165039, 40.76273111352534],
    [-73.98571014404297, 40.748947591479705]
  ]



    function renderAnnotations() {
        return (
          <View>
            <MapboxGL.PointAnnotation
              key='pacienteteste'
              id='paciente'
              coordinate={[-38.5270, -3.7327]}
            >
              <View style={styles.annotationContainer}>
                <View style={styles.annotationFill} />
              </View>
              <MapboxGL.Callout title='People 01' />
            </MapboxGL.PointAnnotation>
    
          </View>
    
        )
      }
    
      return (
        <View style={styles.page}>
          <View style={styles.container}>
            <MapboxGL.MapView
              centerCoordinate={[8.5270, 3.7327]}
              style={styles.map}
              showUserLocation={true}
            >
              <MapboxGL.UserLocation
                visible={true}
              />
    
              <MapboxGL.Camera
                centerCoordinate={[8.5270, 3.7327]}
                animationMode={'flyTo'}
                animationDuration={0}
                zoomLevel={9}
              >
    
              </MapboxGL.Camera>
    
              {renderAnnotations()}
            </MapboxGL.MapView>
          </View>
        </View>
      );
}

question from:https://stackoverflow.com/questions/66057773/array-of-point-annotations-with-mapbbox-and-react-native

Answer 1

Waitting for answers