diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..e43b0f9
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/index.html b/index.html
index 9e9ec44..29492ca 100644
--- a/index.html
+++ b/index.html
@@ -1,40 +1,44 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
+    <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 rel='stylesheet' type='text/css' href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css'  />
-    <!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
-    <title> </title>
+    <!-- Add a Title -->
+    <title>Map</title>
   </head>
   <style>
-    #map {width: 100%; height: 100%; background-color: #ff00ff;}
+    /* 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;}
   </style>
   <body>
-    <!-- HTML -->
     <div id="map"></div>
 
-    <!-- Templates -->
-    <script id="placeholder" type="text/html">
-      // template HTML here
-    </script>
-
-    <!-- JavaScript -->
     <script type="text/javascript">
       document.addEventListener('DOMContentLoaded', function() {
-          var URL = "1jOz6yFY5nIDre5RYtVROYPgIbkgh9lIddsyXo0-79_0"
-          Tabletop.init( { key: URL, callback: myData, simpleSheet: true } )
+        // see how what the example spreadsheet looks like:
+        // https://docs.google.com/spreadsheet/lv?key=0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc
+        var URL = "0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc"
+        Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
       })
-      function myData(data) {
-        console.log("The data ", data)
-        var opts = ['description']
-        var geojson = Sheetsee.createGeoJSON(data, opts)
-        console.log("The geoJSON ",JSON.stringify(geojson, null, ' '))
-        var template = "<h4>{{description}}</h4>"
+
+      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")
-        Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
-        var markerLayer = Sheetsee.addMarkerLayer(geojson, map, template)
+        // Maybe different map tiles? examples.map-20v6611k
+        Sheetsee.addTileLayer(map, 'examples.map-h67hf2ic')
+        Sheetsee.addMarkerLayer(geoJSON, map, template)
       }
     </script>
   </body>
