Layer with slot

by Tristen Brown

HTML

<div id="map" class="absolute top bottom left right w-full"></div>

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

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiamNyaXRjaGxleS1tYXBib3giLCJhIjoiY2wxdXZ4dWNrMDBsYTNicGZmMjF6MTB4MyJ9.JZQ1_NCrVvpWlCbHtVTxpQ';

const style = {
    "version": 8,
    "name": "test-style",
    "sources": {
        "composite": {
            "url": "mapbox://mapbox.mapbox-streets-v8",
            "type": "vector"
        }
    },
    "sprite": "mapbox://sprites/jcritchley-mapbox/clsui3jrc000p01qufbrr39zf/bnjp7m3zcu50706c92kn8jole",
    "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
    "layers": [
        {
      "id": "road-motorway-trunk",
      "type": "line",
      "source": "composite",
      "source-layer": "road",
      "minzoom": 3,
      "filter": [
        "all",
        [
          "step",
          ["zoom"],
          ["match", ["get", "class"], ["motorway", "trunk"], true, false],
          5,
          [
            "all",
            ["match", ["get", "class"], ["motorway", "trunk"], true, false],
            ["match", ["get", "structure"], ["none", "ford"], true, false]
          ]
        ],
        ["==", ["geometry-type"], "LineString"]
      ],
      "layout": {
        "line-cap": ["step", ["zoom"], "butt", 13, "round"],
        "line-join": ["step", ["zoom"], "miter", 13, "round"]
      },
      "paint": {
        "line-color-use-theme": "none",
        "line-emissive-strength": 1,
        "line-width": [
          "interpolate",
          ["exponential", 1.5],
          ["zoom"],
          3,
          0.8,
          18,
          30,
          22,
          300
        ],
        "line-color": "hsl(214, 23%, 70%)",
        "line-opacity": [
          "interpolate",
          ["linear"],
          ["zoom"],
          3,
          0,
          3.5,
          1,
          5,
          1
        ]
      }
    }
    ]
}

const map = new mapboxgl.Map({
  container: 'map',
  center: [2.3441,48.8623],
  zoom: 8,
  style: style
});