How to create two seperate line styles in Mapbox

Here is how to create two different styles with Mapbox.

If you open your JSON file where you had created your dataset of your two lines, in each properties add the follow:

"type": "Feature",
      "properties": {
        "_gpxType": "trk",
        "name": "Name of Line One",
        "color": "#9C7E53",
        "dasharray": [0, 2, 2],
        "width": 4,
        "coordinateProperties": {}
      },

 "type": "Feature",
      "properties": {
        "_gpxType": "trk",
        "name": "Name of Line Two",
        "color": "#000000",
        "dasharray": [1],
        "width": 6,
        "coordinateProperties": {}
      },

In your javascript files add the following:

map.addLayer({
    id: locationId + '-path',
    type: 'line',
    source: locationId,
    paint: {
        'line-color': ['get', 'color'],
        'line-width': ['get', 'width'],
        'line-dasharray': ['get', 'dasharray'],
    }
});