Draw a line between two markers map-box react-native?

Question

I was able to achieve creating a marker(annotation) on the map using the below code in react-native.

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import MapboxGL from '@mapbox/react-native-mapbox-gl';
import Mapbox from '@mapbox/react-native-mapbox-gl';


const columbusCircleCoordinates = [
  -73.98197650909422, 40.768793007758816
];

Mapbox.setAccessToken('your access key');

export default class App extends Component {

  renderAnnotations () {
    return (
      <Mapbox.PointAnnotation
        key='pointAnnotation'
        id='pointAnnotation'
        coordinate={[11.254, 43.772]}>

        <View style={styles.annotationContainer}>
          <View style={styles.annotationFill} />
        </View>
        <Mapbox.Callout title='Look! An annotation!' />
      </Mapbox.PointAnnotation>
    )
  }

  render() {
    return (
      <View style={styles.container}>
        <Mapbox.MapView
            styleURL={Mapbox.StyleURL.Street}
            zoomLevel={15}
            centerCoordinate={[11.256, 43.770]}
            showUserLocation={true}
            style={styles.container}>
            {this.renderAnnotations()}
        </Mapbox.MapView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  annotationContainer: {
    width: 30,
    height: 30,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
    borderRadius: 15,
  },
  annotationFill: {
    width: 30,
    height: 30,
    borderRadius: 15,
    backgroundColor: 'orange',
    transform: [{ scale: 0.6 }],
  }
});

But from the tutorials i figured out that we are able to draw polylines on mapbox using <MapboxGL.LineLayer />. But there is proper example on how to do this.

Can someone please provide with me a sample code how to draw a line between two annotations on mapbox react-native.

Answer 1

Like I shared in my previous answer: In your state, have a variable that is a geojson of type linestring. This takes more than two coordinates, which is basically the number of points you are passing the line through. What the "awesome" mapbox documentation neglects to mention when they show you the polyline tag is that you need to wrap it in a shapeSource tag under the MapboxGL tag. In this.state I put a geojson variable called route. Maybe it will make more sense with the below code sample:

import React, {Component} from 'react';
import {


 Platform,
  StyleSheet,
  Text,
  View,
  Button
} from 'react-native';
import MapboxGL from '@mapbox/react-native-mapbox-gl';

MapboxGL.setAccessToken('your access key');

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      route:
        {
          "type": "FeatureCollection",
          "features": [
            {
              "type": "Feature",
              "properties": {},
              "geometry": {
                "type": "LineString",
                "coordinates": [
                  [
                    11.953125,
                    39.436192999314095
                  ],
                  [
                    18.896484375,
                    46.37725420510028
                  ]
                ]
              }
            }
          ]
        },   
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <MapboxGL.MapView
          styleURL={MapboxGL.StyleURL.Light}
          zoomLevel={15}
          centerCoordinate={[11.256, 43.770]}
          style={styles.container}> 
          <MapboxGL.ShapeSource id='line1' shape={this.state.route}>
            <MapboxGL.LineLayer id='linelayer1' style={{lineColor:'red'}} />
          </MapboxGL.ShapeSource>

        </MapboxGL.MapView>
      </View>
    );
  }
}

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