<div id='map'></div>
#map {
  height: 500px;
  width: 1000px;
#map .mapboxgl-popup-content {
  padding: 10px;
  max-width: 300px;
  padding-top: 20px;
#map .mapboxgl-popup-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;

#map .mapboxgl-popup-content ul h3 {
  margin: 0 0 10px 0;

#map .mapboxgl-popup-content img {
  width: 30px; 
  margin-right: 10px;
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
    map.setFilter('countries', ['in', 'ADM0_A3_IS'].concat(['USA', 'AUS', 'NGA']));

External CSS

  1. https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css

External JavaScript

  1. https://api.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js