Is there anything goes wrong while drwaing line in react-map-gl?

Question

I am using react-map-gl as React wrapper for mapbox to draw maps on the screen. I want to add a line into the map. I can achihve this in leaflet using Polyline component.

EXAMPLE

routes = data.map((points, i) => (
  <Polyline key={i} positions={points} color="red" weight={4} lineCap="square" />
));

RESULT:

I think we can achive this in react-map-gl using Source and Layer component.

Index.js

import Route1 from "./Route1"
    <ReactMapGL
                {...viewport}
                ref={mapRef}
                mapStyle={mapStyle}
                mapboxApiAccessToken="API__KEY"
                onViewportChange={nextViewport => setViewport(nextViewport)}
            >
                <Route1/>
            </ReactMapGL>

Route1

import React from "react";
import {Source, Layer} from "react-map-gl";
import * as tempdata from "./temp-data";
const Routes=()=>{
    return <Source type="geojson" data={tempdata.route1}>
        <Layer {...tempdata.layer}/>
    </Source>
}
export default Routes;

temp-dara

export const layer = {
  'id': 'route',
  'type': 'line',
  'source': 'route',
  'layout': {
      'line-join': 'round',
      'line-cap': 'round'
  },
  'paint': {
      'line-color': 'red',
      'line-width': 8
  }
}
export const route1={
    
  type: "Feature",
  properties: {},
  geometry: {
    type: "LineString",
    coordinates: [
        [31.780632, 76.994168],
        [31.781929, 76.993894],
        [31.783204 ,76.997771],
        [31.782787 ,77.005974],
        [31.786132 ,77.007503],
        [31.788978 ,77.009612],
        [31.794107 ,77.012691],
        [31.796991 ,77.017183],
        [ 31.797196, 77.020515],
        [31.794456 ,77.032804],
        [31.794735 ,77.050037],
        [31.791744 ,77.052444],
        [31.792045, 77.053965]
    ]
  }
} 

Same coordinates are passed into leaflet.

Result

Why different lines are appearing for the same data.

Answer 1

It looks like longitude/latitude are opposite in your temp-data. Following worked for me.

export const layer = {
  'id': 'route',
  'type': 'line',
  'source': 'route',
  'layout': {
      'line-join': 'round',
      'line-cap': 'round'
  },
  'paint': {
      'line-color': 'red',
      'line-width': 8
  }
}
export const route1={

  type: "Feature",
  properties: {},
  geometry: {
    type: "LineString",
    coordinates: [
        [76.994168, 31.780632],
        [76.993894, 31.781929],
        [76.997771, 31.783204],
        [77.005974, 31.782787],
        [77.007503, 31.786132],
        [77.009612, 31.788978],
        [77.012691, 31.794107],
        [77.017183, 31.796991],
        [77.020515, 31.797196],
        [77.032804, 31.794456],
        [77.050037, 31.794735],
        [77.052444, 31.791744],
        [77.053965, 31.792045]
    ]
  }
}