<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.

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