We have added vector tiles to the map drawn with Mapbox GL JS. We changed the tiles of addSource based on the sample below, and it shows what we expected. https://docs.mapbox.com/mapbox-gl-js/example/third-party/

        const source = "xxx"

        map.addSource(source, {
          type: "vector",
          tiles: [`http://tiles.url/{z}/{x}/{y}.mvt`],
          minzoom: 7,
          maxzoom: 17,
        });

        const sourceLayer = "yyy";
        const layerId = "zzz";

        map.addLayer(
        {
            id: layerId,
            type: "fill",
            source,
            "source-layer": sourceLayer,
            paint: {
              "fill-color": "#ff0000",
            },
          },
          "road-label"
        );

        map.setPaintProperty(layerId, "fill-opacity", 0.6);
        map.setPaintProperty(layerId, "fill-antialias", false);

We added a button there, and we made it so that when the button is pressed, it switches to another source and layer, which is also working as we expected.

        const layerId = "zzz";
        map.removeLayer(layerId);

        const source = "xxx"
        map.removeSource(source);

However, when we try the same thing after manipulating the zoom with NavigationControl, the tiles do not show up. How can we solve this trouble?

We have set the maxZoom and minZoom of our maps and sources appropriately. At this zoom the tiles should be visible.

After this problem is encountered, when we manipulate the zoom level, the tiles will reappear. However, if we just manipulate the zoom level from the program, the tiles will not appear.

We also tried adding all the sources and layers and changing the visibility to visible or none to switch, but the same problem occurs.

map.setLayoutProperty(
  layerId,
  'visibility',
  isShow ? 'visible' : 'none'
)

Do you have any advice or tips for us?