Apply a custom map style to a web page

by Tristen Brown

HTML

<link rel="stylesheet" href="https://api.mapbox.com/mapbox-assembly/mbx/v1.2.0/assembly.min.css">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.13.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v3.13.0/mapbox-gl.css">
<div id="map" class="absolute top bottom left right w-full"></div>

JavaScript

mapboxgl.accessToken =
  "pk.eyJ1IjoibWFwYm94c2F0ZWxsaXRlIiwiYSI6ImNqZWZ0MHg0djFqZWoyeG9kN3ZiMmkyd3cifQ.y2HNjGo7FcKQ7psI_BfGqQ";

const data = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {},
      geometry: {
        type: "LineString",
        coordinates: [
          [-79.439899, 43.674284, 142.2],
          [-79.439927, 43.674302, 142.2],
          [-79.439943, 43.674309, 142.2],
          [-79.439959, 43.674317, 142.2],
          [-79.440006, 43.674321, 142.2],
          [-79.440023, 43.674321, 142.2],
          [-79.440078, 43.674312, 142.2],
          [-79.440101, 43.674307, 142.2],
          [-79.440124, 43.674303, 142.4],
          [-79.440179, 43.674292, 142.4],
          [-79.440197, 43.674289, 142.4],
          [-79.440261, 43.674293, 142.4],
          [-79.440287, 43.674297, 142.4],
          [-79.440313, 43.674302, 142.4],
          [-79.440362, 43.674329, 142.4],
          [-79.440378, 43.674342, 142.4],
          [-79.440394, 43.674354, 142.6],
          [-79.440422, 43.674386, 142.6],
          [-79.44043, 43.674396, 142.6],
          [-79.440451, 43.674436, 142.6],
          [-79.440459, 43.674452, 142.8],
          [-79.440467, 43.674468, 142.8],
          [-79.440483, 43.674504, 142.8],
          [-79.440488, 43.674517, 142.8],
          [-79.440504, 43.674559, 143],
          [-79.44051, 43.674577, 143],
          [-79.440517, 43.674594, 143.2],
          [-79.440532, 43.674633, 143.2],
          [-79.440536, 43.674646, 143.2],
          [-79.440553, 43.67469, 143.4],
          [-79.440559, 43.674708, 143.4],
          [-79.440566, 43.674726, 143.6],
          [-79.440578, 43.674766, 143.6],
          [-79.440582, 43.67478, 143.8],
          [-79.440592, 43.674825, 143.8],
          [-79.440595, 43.674843, 143.8],
          [-79.440598, 43.67486, 144],
          [-79.440606, 43.674898, 144],
          [-79.440608, 43.67491, 144],
         ...