setStyle bug

by Tristen Brown

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v3.14.0/mapbox-gl.js"></script>
<link
  href="https://api.mapbox.com/mapbox-gl-js/v3.14.0/mapbox-gl.css"
  rel="stylesheet"
/>
<link
  href="https://api.mapbox.com/mapbox-assembly/mbx/v1.2.0/assembly.min.css"
  rel="stylesheet"
/>

<div class="absolute z1 top left my12 mx12">
  <button id="toggle" class="btn">
    Toggle
  </button>
</div>
<div id="map" class="absolute top bottom left right w-full"></div>

JavaScript

mapboxgl.accessToken =
  "pk.eyJ1IjoiZmFsbHNlbW8yMSIsImEiOiJjamdxcnhvbXAwMzFzMndsbDdqOHVvOGhmIn0.cBAu3DOvjwc-H57irq7mqQ";

mapboxgl.config.API_URL = 'https://cloudfront-staging.tilestream.net';

const style = {
  "version": 8,
  "name": "Untitled",
  "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
  "terrain": null,
  "center": [
    -34,
    38
  ],
  "zoom": 2,
  "projection": {
    "name": "mercator"
  },
  "imports": [
    {
      "id": "basemap",
      "url": "mapbox://styles/mapbox/light-v11"
    }
  ],
  "sources": {
    "foo": {
      "minzoom": 0,
      "maxzoom": 16,
      "tiles": [
        "https://api-dex-staging.tilestream.net/datasets/v2/fallsemo21/v806vdmnkdg9/tiles/{z}/{x}/{y}.mvt?preview=true&access_token=pk.eyJ1IjoiZmFsbHNlbW8yMSIsImEiOiJjamdxcnhvbXAwMzFzMndsbDdqOHVvOGhmIn0.cBAu3DOvjwc-H57irq7mqQ&_=2025-08-18T17%3A12%3A13.215Z"
      ],
      "type": "vector"
    }
  },
  "layers": [
    {
      "id": "line-layer",
      "source": "foo",
      "source-layer": "be6c9a5bb2120a912a27",
      "type": "line",
      "paint": {
        "line-color": "red"
      }
    }
  ]
}

const map = new mapboxgl.Map({
  container: "map",
  zoom: 2,
  center: [-113.19, 59.43],
  style
});

let toggled = false;
const toggle = document.getElementById("toggle");

toggle.addEventListener("click", () => {
  if (toggled) {
    map.setStyle(style);
    toggled = false;
  } else {
    map.setStyle({
      ...style,
      sources: {
        foo: {
          ...style.sources.foo,
          tiles: [
            'https://api-dex-staging.tilestream.net/datasets/v2/fallsemo21/v806vdmnkdg9/tiles/{z}/{x}/{y}.mvt?preview=true&access_token=pk.eyJ1IjoiZmFsbHNlbW8yMSIsImEiOiJjamdxcnhvbXAwMzFzMndsbDdqOHVvOGhmIn0.cBAu3DOvjwc-H57irq7mqQ&_=2025-08-18T17%3A14%3A20.356Z'
          ]
        }
      }
    });
    toggled = true;
  }
});