I can't add a new layer after change map style in Mapbox gl js

Question

Firstly I'm a beginner in Mapbox and I have an issue with changing style of map. When change the style, I am uploading sources but can't add a new layer to map.

I am creating my sources like that.

function addRoadsSource(){
    map.addSource('roads3',{
        'type':'geojson',
        'data': datas.roadsInfo // datas --> roadsInfo includes roads geoFile Data
    });
}

And adding them as a layer to map with uploadRoads()

function uploadRoads() {
    map.on('load',function() {
                addRoadsSource();
                showRoads();
                });
            }

And also here is showRoads() function

function showRoads() {
    map.addLayer({
        'id': 'roadsLayer',
        'type': 'line',
        'source': 'roads3',
        'filter': ['==', '$type', 'LineString'],
        'paint' : {
        'line-color' : '#33cc33',
        'line-width' : 5
        }
        });
}     

But when I change style of map from streets-v11 to dark-v10 all sources are gone. According to my research it's happening because of structure of mapbox(Mapbox-GL setStyle removes layers). And everyone says that I need to upload resources again. But I'm already uploading my resources with addRoadsSource() function. Then when I add a new layer to new style with uploadRoads() roads do not appear on the map. When I look to sources of new style with map.style.sources() I can see that sources loaded correctly but layers don't appear. I hope I could explain my problem. I looked at many sources, including Github issues, but none of them worked for me. If you need anything from my code or geojson files, I can add it.

Answer 1

It would be easier to identify what is wrong in your code if you could provide a minimal reproducible example because the code you include is not enough to diagnose the origin of the problem.

My first feeling reading your question is that you are not creating your source and layer after the style load event, because changing the style shouldn't be an issue at all as you can see in this fiddle I have done to test your case fiddle showing how to change mapbox style keeping source and layers.

    mapboxgl.accessToken = 'PUT HERE YOUR TOKEN';
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [-122.486052, 37.830348],
      zoom: 14
    });
    var l = 'routeL';
    var s = 'routeS';
    var layerList = document.getElementById('menu');
    var inputs = layerList.getElementsByTagName('input');

    function addSource() {
      map.addSource(s, {
        'type': 'geojson',
        'data': {
          'type': 'Feature',
          'properties': {},
          'geometry': {
            'type': 'LineString',
            'coordinates': [
              [-122.48369693756104, 37.83381888486939],
              [-122.48348236083984, 37.83317489144141],
              [-122.48339653015138, 37.83270036637107],
              [-122.48356819152832, 37.832056363179625],
              [-122.48404026031496, 37.83114119107971],
              [-122.48404026031496, 37.83049717427869],
              [-122.48348236083984, 37.829920943955045],
              [-122.48356819152832, 37.82954808664175],
              [-122.48507022857666, 37.82944639795659],
              [-122.48610019683838, 37.82880236636284],
              [-122.48695850372314, 37.82931081282506],
              [-122.48700141906738, 37.83080223556934],
              [-122.48751640319824, 37.83168351665737],
              [-122.48803138732912, 37.832158048267786],
              [-122.48888969421387, 37.83297152392784],
              [-122.48987674713133, 37.83263257682617],
              [-122.49043464660643, 37.832937629287755],
              [-122.49125003814696, 37.832429207817725],
              [-122.49163627624512, 37.832564787218985],
              [-122.49223709106445, 37.83337825839438],
              [-122.49378204345702, 37.83368330777276]
            ]
          }
        }
      });
    }

    function addLayer() {
      map.addLayer({
        'id': l,
        'type': 'line',
        'source': s,
        'layout': {
          'line-join': 'round',
          'line-cap': 'round'
        },
        'paint': {
          'line-color': '#888',
          'line-width': 8
        }
      });

    }

    map.on('style.load', function() {
      addSource();
      addLayer();
    });

    function switchLayer(layer) {
      var layerId = layer.target.id;
      map.setStyle('mapbox://styles/mapbox/' + layerId);
    }

    for (var i = 0; i < inputs.length; i++) {
      inputs[i].onclick = switchLayer;
    }