Image square with ghost line

by Tristen Brown

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v3.12.0/mapbox-gl.js"></script>
<link
  href="https://api.mapbox.com/mapbox-gl-js/v3.12.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";

const style1 = {
  "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": {
    "fallsemo21.v806vdmnkdg9": {
      "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"
    },
    "be6c9a5bb2120a912a27": {
      "type": "geojson",
      "buffer": 2.56,
      "data": {
        "type": "FeatureCollection",
        "features": []
      }
    }
  },
  "layers": [
    {
      "id": "fill:fallsemo21.v806vdmnkdg9:be6c9a5bb2120a912a27",
      "source": "be6c9a5bb2120a912a27",
      "type": "fill",
      "paint": {
        "fill-color": "hsla(336, 58%, 42%, 0.125)",
        "fill-opacity": 0.5,
        "fill-outline-color": "hsl(336, 58%, 42%)"
      },
      "filter": [
        "==",
        [
          "geometry-type"
        ],
        "Polygon"
      ]
    },
    {
      "id": "line:fallsemo21.v806vdmnkdg9:be6c9a5bb2120a912a27",
      "source": "be6c9a5bb2120a912a27",
      "type": "line",
      "paint": {
        "line-width": [
          "interpolate",
          [
            "linear"
          ],
          [
            "zoom"
          ],
          0,
          1,
          16,
          2
        ],
        "line-color": "hsl(336, 58%, 42%)",
        "line-opacity": 0.5
      },
      "filter": [
        "==",
    ...