malwoodsantoro/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Add a raster tile source</title>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
  <link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }

    #layer {
      display: block;
      position: relative;
      margin: 20px auto;
      width: 50%;
      height: 40px;
      padding: 10px;
      border: none;
      border-radius: 3px;
      font-size: 12px;
      text-align: center;
      color: #000;
      background: #93E9BE;
    }

    #loader {
      border: 16px solid #f3f3f3;
      /* Light grey */
      border-top: 16px solid #93E9BE;
      /* Blue */
      border-radius: 50%;
      width: 120px;
      height: 120px;
      animation: spin 2s linear infinite;
      position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -100px;
      margin-left: -100px;
      z-index: 2;
      visibility: hidden;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <div id="loader"></div>
  <button id="layer">Add layer</button>
  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
    var map = new mapboxgl.Map({
      container: 'map', // container id
      style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
      center: [-70.28229732510181, 43.669559507130316], // starting position
      zoom: 13 // starting zoom
    });

    map.on('load', function () {

      addRasterLayer = () => {
        map.addLayer({
          'id': 'open-cycle-tiles',
          'type': 'raster',
          'source': {
            'type': "raster",
            'tiles': ['https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=9c9153fd548d400faf38239d6ee7ccb4'],
            'tileSize': 256
          },
          "minzoom": 0,
          "maxzoom": 22,
          "paint": {
            "raster-opacity": .5
          }
        }, 'waterway-label')
      }

      stopSpinner = (e) => {
        console.log('stop spinner')
        document.getElementById("loader").style.visibility = "hidden";
        map.off('idle', stopSpinner)
      }


      document.getElementById('layer').addEventListener('click', function () {
        addRasterLayer()
      });

      map.on('sourcedataloading', (e) => {
        if (!e.isSourceLoaded && e.sourceId === "open-cycle-tiles") {
          document.getElementById("loader").style.visibility = "visible";
          map.on('idle', stopSpinner);
        }
      })

    });
  </script>

</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<title>Add a raster tile source</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
	<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
	<link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet" />
	<style>
	body {
	margin: 0;
	padding: 0;
	}

	#map {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	}

	#layer {
	display: block;
	position: relative;
	margin: 20px auto;
	width: 50%;
	height: 40px;
	padding: 10px;
	border: none;
	border-radius: 3px;
	font-size: 12px;
	text-align: center;
	color: #000;
	background: #93E9BE;
	}

	#loader {
	border: 16px solid #f3f3f3;
	/* Light grey */
	border-top: 16px solid #93E9BE;
	/* Blue */
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -100px;
	margin-left: -100px;
	z-index: 2;
	visibility: hidden;
	}

	@keyframes spin {
	0% {
	transform: rotate(0deg);
	}

	100% {
	transform: rotate(360deg);
	}
	}
	</style>
	</head>

	<body>
	<div id="map"></div>
	<div id="loader"></div>
	<button id="layer">Add layer</button>
	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
	var map = new mapboxgl.Map({
	container: 'map', // container id
	style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
	center: [-70.28229732510181, 43.669559507130316], // starting position
	zoom: 13 // starting zoom
	});

	map.on('load', function () {

	addRasterLayer = () => {
	map.addLayer({
	'id': 'open-cycle-tiles',
	'type': 'raster',
	'source': {
	'type': "raster",
	'tiles': ['https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=9c9153fd548d400faf38239d6ee7ccb4'],
	'tileSize': 256
	},
	"minzoom": 0,
	"maxzoom": 22,
	"paint": {
	"raster-opacity": .5
	}
	}, 'waterway-label')
	}

	stopSpinner = (e) => {
	console.log('stop spinner')
	document.getElementById("loader").style.visibility = "hidden";
	map.off('idle', stopSpinner)
	}


	document.getElementById('layer').addEventListener('click', function () {
	addRasterLayer()
	});

	map.on('sourcedataloading', (e) => {
	if (!e.isSourceLoaded && e.sourceId === "open-cycle-tiles") {
	document.getElementById("loader").style.visibility = "visible";
	map.on('idle', stopSpinner);
	}
	})

	});
	</script>

	</body>

	</html>