Merge pull request #126 from jlord/next

diff --git a/site/assets/styles/atelier-forest.light.css → assets/atelier-forest.light.css b/site/assets/styles/atelier-forest.light.css → assets/atelier-forest.light.css
diff --git a/site/assets/styles/highlight.css → assets/highlight.css b/site/assets/styles/highlight.css → assets/highlight.css
diff --git a/js/highlight.js → assets/highlight.js b/js/highlight.js → assets/highlight.js
diff --git a/site/assets/sss.css → assets/sss.css b/site/assets/sss.css → assets/sss.css
diff --git a/site/assets/style.css → assets/style.css b/site/assets/style.css → assets/style.css
@@ -22,15 +22,24 @@ footer a {border: none;}
 .half {max-width: 50%; display: inline-block; vertical-align: top;}
 .half:nth-child(odd) {padding-left: 20px;}
 
+img[alt=sheetseeimg] {
+  width: 400px;
+  margin: 0 auto;
+}
+
+.index p:first-of-type {
+  text-align: center;
+}
 /* older css */
 
-body {font-family: 'Source Sans Pro'; font-size: 18px; background: #fff; color: #535353;  border: 10px #47CCFC solid; margin: 0px; padding: 20px 20px 100px 20px; overflow: auto; }
+body {font-family: 'Source Sans Pro'; background: #fff; color: #535353;  border: 10px #47CCFC solid; margin: 0px; padding: 20px 20px 100px 20px; overflow: auto; }
 h1, h2, h3, h4, h5, h6 {font-family: Source Sans Pro, Arial, sans-serif;}
 h2 {margin-top: 40px;}
 
 img {width: 100%;}
 hr {border: 2px solid #CCF4FF;}
 
+p {font-size: 18px;}
 p a, a {color: #535353; text-decoration: none; padding-bottom: 0px; border-bottom: 2px #CCF4FF solid;}
 a:hover {color: #47CCFC;}
 a:active {color: #47CCFC;}
@@ -44,8 +53,20 @@ body.index table {border: 4px solid #CCF4FF; padding: 18px;}
 
 pre {word-wrap: break-word; padding: 10px; background: #F8F8F8;}
 pre code {padding: 0;}
-code {font-family: "Source Code Pro", monospace; font-size: 14px; line-height: 1; background: #F8F8F8; color: #636363; font-weight: 400; padding: 2px 6px; border-radius: 2px;}
-.hljs { background: #F8F8F8; color: #494949; line-height: 1.4em; }
+code {font-family: "Source Code Pro", monospace; line-height: 1; font-size: 14px; background: #F8F8F8; color: #636363; font-weight: 400; padding: 2px 6px; border-radius: 2px;}
+h3 code {font-weight: bold; background: #CCF4FF; font-size: 19px;}
+.hljs {background: #F8F8F8; color: #494949; line-height: 1.4em;}
+
+.new-news {
+  color: #47CCFC;
+  font-size: 30px;
+  font-weight: bold;
+  border: 8px solid #47CCFC;
+  /*border-radius: 3px;*/
+  display: inline-block;
+  padding: 6px 16px;
+  margin-top: 40px;
+}
 
 /* funsies */
 ::selection {background: #44FFB4;}

diff --git a/buildpage.js b/buildpage.js
diff --git a/demos/demo-chart.html b/demos/demo-chart.html
diff --git a/demos/demo-map.html b/demos/demo-map.html
@@ -4,30 +4,24 @@
     <meta charset='utf-8'>
     <title>Sheetsee Maps Demo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
     <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900,400italic|Source+Code+Pro:400' rel='stylesheet' type='text/css'>
     <link rel="shortcut icon" href="../favicon.png">
-    <script type='text/javascript' src='../js/tabletop1.3.4.js'></script>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
     <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='../assets/style.css'>
   </head>
   <style>
-    #map, #shapesmap {max-width: 800px; height: 500px;}
-    .leaflet-popup-content li {list-style:none;}
+    #map {width: 800px; height: 500px; background: #CCF4FF;}
     .leaflet-popup-content {width: 102px;}
     .leaflet-popup-content img {width: 100px;}
-    a {border: none;}
   </style>
   <body>
     <div class="container">
       <h1>All Pennies  Map</h1>
       <p><em><a href="https://docs.google.com/a/github.com/spreadsheet/ccc?key=0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc&usp=drive_web#gid=0" target="_blank">spreadsheet</a></em><p>
-      <div id="map"></div>
+      <div id="map">Loading...</div>
       <p><em><a onClick='window.location="view-source:" + window.location.href'>View Source</a> // <a href="../docs/sheetsee-maps.html">View Documentation</a></em></p>
-      <h2>Using linestrings, polygons and multipolygons</h2>
-      <div id="shapesmap"></div>
-      <p><em><a onClick='window.location="view-source:" + window.location.href'>View Source</a> // <a href="https://docs.google.com/spreadsheets/d/1jOz6yFY5nIDre5RYtVROYPgIbkgh9lIddsyXo0-79_0/edit?usp=drive_web" target="_blank">View Spreadsheet</a></em></p>
 
       <footer>
         <h4 id="getting-started">Getting Started</h4>
@@ -38,59 +32,47 @@ <h4 id="getting-started">Getting Started</h4>
         </ul>
         <h4 id="ideas">Ideas</h4>
         <ul>
-          <li><a href="../docs/fork-n-go.html">Fork-n-Go</a></li>
+          <li><a href="../docs/templates.html">Templates</a></li>
           <li><a href="../docs/tips.html">Tips!</a></li>
-          <li><a href="../docs/custom-charts.html">Custom charts</a></li>
         </ul>
         <h4>Demos</h4>
         <ul>
           <li><a href="./demo-table.html">Table Demo</a></li>
           <li><a href="./demo-map.html">Map Demo</a></li>
-          <li><a href="./demo-chart.html">Chart Demo</a></li>
         </ul>
         <h4 id="use">Use</h4>
         <ul>
           <li><a href="../docs/sheetsee-core.html">Sheetsee-core</a></li>
           <li><a href="../docs/sheetsee-tables.html">Sheetsee-tables</a></li>
           <li><a href="../docs/sheetsee-maps.html">Sheetsee-maps</a></li>
-          <li><a href="../docs/sheetsee-charts.html">Sheetsee-charts</a></li>
         </ul>
         <h4 id="use">Contact</h4>
         <ul>
           <li><a href="http://www.twitter.com/jllord">@jllord</a></li>
           <li><a href="https://github.com/jlord/sheetsee.js/issues/new">File an issue</a></li>
         </ul>
-        <h4><a class="home-link" href="http://jlord.github.io/sheetsee.js">Home Page</a></h4>
+        <h4><a class="home-link" href="../index.html">Home</a></h4>
       </footer>
+    </div>
 
     <script type="text/javascript">
       document.addEventListener('DOMContentLoaded', function() {
-        var URL = "0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc"
-        var URL2 = "1jOz6yFY5nIDre5RYtVROYPgIbkgh9lIddsyXo0-79_0"
-        Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
-        Tabletop.init( { key: URL2, callback: shapesMap, simpleSheet: true } )
+        var URL = '0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc'
+        Tabletop.init({key: URL, callback: showInfo, simpleSheet: true})
       })
 
-      function showInfo(data) {
-        var optionsJSON = ["placename", "photo-url"]
-        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, 'jllord.n7aml2bc')
-        Sheetsee.addMarkerLayer(geoJSON, map, template)
+      function showInfo (data) {
+        console.log(data)
+        var popup = "<a href='{{PhotoUrl}}' target='_blank'>"
+          + "<img src='{{PhotoUrl}}'></a><h4>{{PlaceName}}</h4>"
+        var mapOptions = {
+          data: data,
+          mapDiv: 'map',
+          geoJSONincludes: ['PlaceName', 'PhotoUrl'],
+          template: popup
+        }
+        Sheetsee.loadMap(mapOptions)
       }
-
-      function shapesMap(data) {
-        var opts = ['description']
-        var geojson = Sheetsee.createGeoJSON(data, opts)
-        var plytemplate = "<h4>{{description}}</h4>"
-        var shapesmap = Sheetsee.loadMap("shapesmap")
-        Sheetsee.addTileLayer(shapesmap, 'jllord.n7aml2bc')
-        Sheetsee.addMarkerLayer(geojson, shapesmap, plytemplate)
-      }
-
     </script>
   </body>
 </html>