diff --git a/index.html b/index.html
index 02baa29..725c74f 100644
--- a/index.html
+++ b/index.html
@@ -1,52 +1,189 @@
-<!doctype html>
+<!-- <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
-    <script type="text/javascript" src="js/tabletop1.3.4.js"></script>
-    <script type="text/javascript" src="js/sheetsee.js"></script>
-    <link   type='text/css' rel='stylesheet' href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css'>
-    <!-- Add a Title -->
-    <title>Map</title>
-  </head>
+<head>
+  <meta charset='utf-8' />
+  <title>Display a map</title>
+  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
+  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
   <style>
-    html {width: 100%; height: 100%;}
-    body {width: 100%; height: 100%; margin: 0;}
-    /* How about a different background color? */
-    #map {width: 100%; height: 100%; background-color: #F7CE86;}
-    .leaflet-popup-content li {list-style:none;}
-    .leaflet-popup-content {width: 102px;}
-    .leaflet-popup-content img {width: 100px;}
-    a {border: none;}
+    body { margin:0; padding:0; }
+    #map { position:absolute; top:0; bottom:0; width:100%; }
   </style>
-  <body>
-    <div id="map"></div>
+</head>
+<body>
 
-    <script type="text/javascript">
-      document.addEventListener('DOMContentLoaded', function() {
-        // see how what the example spreadsheet looks like:
-        // https://docs.google.com/spreadsheet/lv?key=0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc
-        var URL = "1muHT2a5eXHI11VWSNnwmVCEfMmPm8kzktnDFRPVdzow"
-        Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
-      })
+<div id='map'></div>
+<script>
+mapboxgl.accessToken = 'pk.eyJ1IjoibmFqb21hcjY4IiwiYSI6ImNqZjkzZGhhczBkc3gycXFvbHA3d2U1aTcifQ.2g2XefOGLxJrIqi8z2uNGA';
+const map = new mapboxgl.Map({
+  container: 'map',
+  style: 'mapbox://styles/najomar68/cjfkqhna10mvf2rnvnn0nhf8o',
+  center: [151.209240, -33.878838],
+  zoom: 13.8
+});
+</script>
 
-      function showInfo(data) {
-        // the column headers of the info you want in your popup
-        var optionsJSON = ["placename", "photo-url"]
-        // an html template for your popup
-        var template = "<ul><li><a href='{{photo-url}}' target='_blank'>"
-                     + "<img src='{{photo-url}}'></a></li>"
-                     + "<li><h4>{{placename}}</h4></li></ul>"
-        var geoJSON = Sheetsee.createGeoJSON(data, optionsJSON)
-        var map = Sheetsee.loadMap("map")
-        // Try different map tiles? examples.map-20v6611k
-        // examples.map-y7l23tes
-        // examples.map-h67hf2ic
-        // examples.map-i86nkdio
-        // examples.h186knp8
-        Sheetsee.addTileLayer(map, 'jllord.n7aml2bc')
-        Sheetsee.addMarkerLayer(geoJSON, map, template)
-      }
-    </script>
-  </body>
-</html>
+</body>
+</html> -->
+<!-- <!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8' />
+    <title>Attach a popup to a marker instance</title>
+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
+    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
+    <style>
+        body { margin:0; padding:0; }
+        #map { position:absolute; top:0; bottom:0; width:100%; }
+    </style>
+</head>
+<body>
+
+<style>
+
+#marker {
+    background-image: url('https://docs.mapbox.com/mapbox-gl-js/assets/washington-monument.jpg');
+    background-size: cover;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.mapboxgl-popup {
+    max-width: 200px;
+}
+
+</style>
+
+<div id='map'></div>
+
+<script>
+mapboxgl.accessToken = 'pk.eyJ1IjoibmFqb21hcjY4IiwiYSI6ImNqZjkzZGhhczBkc3gycXFvbHA3d2U1aTcifQ.2g2XefOGLxJrIqi8z2uNGA';
+
+var monument = [-77.0353, 38.8895];
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/light-v10',
+    center: monument,
+    zoom: 15
+});
+
+// create the popup
+var popup = new mapboxgl.Popup({ offset: 25 })
+    .setText('Construction on the Washington Monument began in 1848.');
+
+// create DOM element for the marker
+var el = document.createElement('div');
+el.id = 'marker';
+
+// create the marker
+new mapboxgl.Marker(el)
+    .setLngLat(monument)
+    .setPopup(popup) // sets a popup on this marker
+    .addTo(map);
+
+</script>
+
+</body>
+</html> -->
+
+<!-- <!DOCTYPE html>
+<html>
+<head>
+  <meta charset='utf-8' />
+  <title>Display a map</title>
+  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
+  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
+  <style>
+    body { margin:0; padding:0; }
+    #map { position:absolute; top:0; bottom:0; width:100%; }
+  </style>
+</head>
+<body>
+
+<div id='map'></div>
+<script>
+
+</script>
+<script>
+mapboxgl.accessToken = 'pk.eyJ1IjoibmFqb21hcjY4IiwiYSI6ImNqZjkzZGhhczBkc3gycXFvbHA3d2U1aTcifQ.2g2XefOGLxJrIqi8z2uNGA';
+const map = new mapboxgl.Map({
+  container: 'map',
+  style: 'mapbox://styles/najomar68/cjw0120761syu1cmzhptjbahc',
+  center: [151.209240, -33.878838],
+  zoom: 13.8
+});
+
+map.on('click', function(e) {
+  var features = map.queryRenderedFeatures(e.point, {
+    layers: ['airports-1'] // replace this with the name of the layer
+  });
+
+  if (!features.length) {
+    return;
+  }
+
+  var feature = features[0];
+
+  var popup = new mapboxgl.Popup({ offset: [0, -15] })
+    .setLngLat(feature.geometry.coordinates)
+    .setHTML('<h3>' + feature.properties.title + '</h3><p>' + feature.properties.city + '</p>')
+    .setLngLat(feature.geometry.coordinates)
+    .addTo(map);
+});
+// Add zoom and rotation controls to the map.
+map.addControl(new mapboxgl.NavigationControl());
+</script> -->
+
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset='utf-8' />
+  <title>Display a map</title>
+  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
+  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
+  <style>
+    body { margin:0; padding:0; }
+    #map { position:absolute; top:0; bottom:0; width:100%; }
+  </style>
+</head>
+<body>
+
+<div id='map'></div>
+<script>
+mapboxgl.accessToken = 'pk.eyJ1IjoibmFqb21hcjY4IiwiYSI6ImNqZjkzZGhhczBkc3gycXFvbHA3d2U1aTcifQ.2g2XefOGLxJrIqi8z2uNGA';
+const map = new mapboxgl.Map({
+  container: 'map',
+  style: 'mapbox://styles/najomar68/cjw02ixkt1u6i1cp6uw0zbphb',
+  center: [-89.352858, 39.329402],
+  zoom: 2.8
+});
+// Add popups
+map.on('click', function(e) {
+  var features = map.queryRenderedFeatures(e.point, {
+    layers: ['airports-1'] // replace this with the name of the layer
+  });
+
+  if (!features.length) {
+    return;
+  }
+
+  var feature = features[0];
+
+  var popup = new mapboxgl.Popup({ offset: [0, -15] })
+    .setLngLat(feature.geometry.coordinates)
+    .setHTML('<h3>' + feature.properties.title + '</h3><p>' + feature.properties.city + '</p>')
+    .setLngLat(feature.geometry.coordinates)
+    .addTo(map);
+});
+// Add zoom and rotation controls to the map.
+map.addControl(new mapboxgl.NavigationControl());
+</script>
+
+</body>
+</html>
\ No newline at end of file
