index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.css' rel='stylesheet' />
    <style>
      /*CSS goes a long way! Didn't know it could be added in here.*/
      body {
        margin: 0;
        padding: 0;
      }
      
      /*CSS for map positioning*/
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }

      /*CSS for map icon markers*/
      .marker {
      background-image: url('mapbox-icon.png');
      background-size: cover;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      cursor: pointer;
      }

      /*CSS for pop up box with info*/
      .mapboxgl-popup {
      max-width: 200px;
      }

      .mapboxgl-popup-content {
      text-align: center;
      font-family: 'Open Sans', sans-serif;
      }

    </style>
</head>
<body>

<div id='map'></div>

<script>

mapboxgl.accessToken = 'pk.eyJ1IjoibGFneWVtYW5nIiwiYSI6ImNqeXAwZHB4MTA0YnAzZ28yaWpwZzJhcXQifQ.VYUvOURwCZBnoLKbeqpkLA';

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10',
  center: [22, -0.91],
  zoom: 1
});

// code from the next step will go here!
var geojson = {
  type: 'FeatureCollection',
  features: [{
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [-77.032, 38.913]
    },
    properties: {
      title: 'Mapbox',
      description: 'Washington, D.C.'
    }
  },
  {
    type: 'Feature',
    geometry: {
      type: 'Point',
      coordinates: [-122.414, 37.776]
    },
    properties: {
      title: 'Mapbox',
      description: 'San Francisco, California'
    }
  }]
};

// JavaScript for adding markers to map
geojson.features.forEach(function(marker) {

  // create a HTML element for each feature
  var el = document.createElement('div');
  el.className = 'marker';

  // make a marker for each feature and add to the map
  new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .setLngLat(marker.geometry.coordinates)
    .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
    .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
    .addTo(map);
});

</script>

</body>
</html>


<!-- Steps to create:  https://docs.mapbox.com/help/tutorials/custom-markers-gl-js/-->