Adding Load Function

main.js

mapboxgl.accessToken = 'pk.eyJ1IjoiYnlmcm9zdC1hcnRpY2xlcyIsImEiOiJjajVsZ3NwZGczMWNtMnFyeTR2cHRnajZ4In0.HOjYrueiLWlhLfhsDCa7wQ'; // Replace with your token

var map = new mapboxgl.Map({
  container: 'map', //this is the id of the container you want your map in
  style: 'mapbox://styles/mapbox/light-v9', // this controls the style of the map. Want to see more? Try changing 'light' to 'simple'. 
  minZoom: 2 // We want our map to start out pretty zoomed in to start.
});

map.on('load', function() { //On map load, we want to do some stuff
    map.addLayer({ //here we are adding a layer containing the tileset we just uploaded
      'id': 'countries',//this is the name of our layer, which we will need later
      'source': {
        'type': 'vector',
        'url': 'mapbox://' // <--- Add the Map ID you copied here
      },
      'source-layer': '', // <--- Add the source layer name you copied here
      'type': 'fill',
      'paint': {
        'fill-color': '#52489C', //this is the color you want your tileset to have (I used a nice purple color)
        'fill-outline-color': '#F2F2F2' //this helps us distinguish individual countries a bit better by giving them an outline
      }
    });
  });