mapboxgl.accessToken = 'pk.eyJ1IjoiYnlmcm9zdC1hcnRpY2xlcyIsImEiOiJjajVsZ3NwZGczMWNtMnFyeTR2cHRnajZ4In0.HOjYrueiLWlhLfhsDCa7wQ';

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',
      'source': {
        'type': 'vector',
        'url': 'mapbox://byfrost-articles.74qv0xp0'
      },
      'source-layer': 'ne_10m_admin_0_countries-76t9ly',
      '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
      }
    });
  });