Skip to content

Commit

Permalink
fix missing zoom level documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
jlord committed Jan 2, 2014
1 parent b14d30d commit 844ac3d
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 471 deletions.
46 changes: 23 additions & 23 deletions demo.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<html>
<head>
<title>Yo, yo, yo!</title>
<script type="text/javascript" src="js/ICanHaz.js"></script>
<script type="text/javascript" src="js/ICanHaz.js"></script>
<script type="text/javascript" src='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.js'></script>
<script type="text/javascript" src='js/jquery.js '></script>
<script type="text/javascript" src='js/d3.js'></script>
Expand All @@ -11,8 +11,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css' rel='stylesheet' />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600|Merriweather:400,700' rel='stylesheet' />
<link rel="stylesheet" media="screen" type="text/css" href="css/style.css">
<link rel="stylesheet" media="screen" type="text/css" href="css/site.css">
<link rel="stylesheet" media="screen" type="text/css" href="css/style.css">
<link rel="stylesheet" media="screen" type="text/css" href="css/site.css">
</head>

<body>
Expand Down Expand Up @@ -76,15 +76,15 @@ <h2>Bare Minimum Setup</h2>
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
var gData
var URL = &quot;0AvFUWxii39gXdFhqZzdTeU5DTWtOdENkQ1Y5bHdqT0E&quot;
Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
})
Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
})
function showInfo(data) {
gData = data
optionsJSON = ["something", "something"]
var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON)
var map = Sheetsee.loadMap(&quot;map&quot;)
Sheetsee.addTileLayer(map, &#39;examples.map-20v6611k&#39;)
var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map)
var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 11)
// customize the popup content
addPopups(map, markerLayer)
function addPopups(map, markerLayer) {
Expand Down Expand Up @@ -128,7 +128,7 @@ <h4>Hexcolor</h4>
<h4>Geocoding</h4>
<p>If you intend to map your data and only have addresses you&#39;ll need to geocode the addresses into lat/long coordinates. Mapbox built a <a href="http://mapbox.com/tilemill/docs/guides/google-docs/#geocoding">plugin</a>
that does this for you in Google Docs. You can also use websites like <a href="http://www.latlong.net/">latlong.net</a> to get the coordinates and paste them into rows with column headers <em>lat</em> and <em>long</em>.</p>
<img src="https://raw.github.com/jllord/sheetsee-cache/master/img/latlong.png" alt="sheetsee">
<img src="https://raw.github.com/jllord/sheetsee-cache/master/img/latlong.png" alt="sheetsee">
<h4>Publishing Your Spreadsheet</h4>
<p><img src="https://raw.github.com/jllord/sheetsee-cache/master/img/publish.png" alt="sheetsee"></p>
<p>You need to do this in order to generate a unique key for your spreadsheet, which Tabletop.js will use to get your spreadsheet data. In your Google Spreadsheet, click <em>File</em> &gt; <em>Publish to the Web</em>. Then in the next window click <em>Start Publishing</em>; it will then turn into a <em>Stop Publishing</em> button.</p>
Expand All @@ -145,11 +145,11 @@ <h3>Client-side Hookup</h3>
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
var gData
var URL = &quot;0AvFUWxii39gXdFhqZzdTeU5DTWtOdENkQ1Y5bHdqT0E&quot;
Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
})
Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
})
function showInfo(data) {
gData = data
//
//
//everything you do with sheetsee goes here
//
}
Expand All @@ -159,22 +159,22 @@ <h3>Server-side Hookup</h3>
<p>The server-side version is in the repo <a href="http://www.github.com/jllord/sheetsee-cache">sheetsee-cache</a>. It uses <a href="http://www.nodejs.org">Node.js</a> to go to Google, get the spreadsheet data (with a Node.js version of <a href="http://npmjs.org/tabletop">Tabletop.js</a>, thanks Max Ogden!) and save it on the server. This means every user that visits the page doesn&#39;t have to wait on Google&#39;s response to load the charts from the data.</p>
<p>When the server builds your page, it will build in your data as the variable gData. All you need to do is add your scripts to the bottom of the page. For the tables/templating you&#39;ll need to wrap them in an event listener so that it doesn&#39;t try and build them before the data has settled. </p>
<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
document.addEventListener(&#39;DOMContentLoaded&#39;, function() {
// table/templating things the rest can be in their own script tags if you&#39;d like
})
})
&lt;/script&gt;</code></pre>
<h4>Running Locally</h4>
<p>You can run this locally and it will check your internet connection - if you&#39;re not online it will use the last saved data allowing you to develop offline, yay! </p>
<p>Once you <a href="https://github.com/jlord/sheetsee-cache">clone the repo</a>, navigate there in Terminal, install the node modules and launch the server.</p>
<pre><code>cd sheetsee-cache
npm install
npm install
node server.js</code></pre>
<p>This will launch a local server you can visit and develop locally with in your browser. </p>
<h2 id="workdata">Working With Your Data</h2>
<p>Tabletop.js will return all of your data and it will be passed into your site as an <em>array of objects</em> called <strong>gData</strong>. Sheetsee.js has functions built in to help you filter or use that data in other ways if you&#39;d like.</p>
<h4>Play Along!</h4>
<p>This page is using sheetsee. If you (are in Chrome and) right click on the page and select <em>Inspect Element</em> it will bring up the Web Inspector. Select the <em>Console</em> tab. Now you can interact with the data and functions from Sheetsee. Give the functions below a try - <strong>gData</strong> is the variable with the data (from <a href="https://docs.google.com/spreadsheet/ccc?key=0AvFUWxii39gXdFhqZzdTeU5DTWtOdENkQ1Y5bHdqT0E&usp=sharing") target="_blank">this spreadsheet</a>).
<img src="https://raw.github.com/jllord/sheetsee-cache/master/img/webconsole.png" alt="sheetsee">
<img src="https://raw.github.com/jllord/sheetsee-cache/master/img/webconsole.png" alt="sheetsee">
<h3 class="functionH">Sheetsee.getKeyword(data, keyword)</h3>
<p>This takes in your data, an <em>array of objects</em>, and searches for a <em>string</em>, <strong>keyword</strong>, in each piece of your <strong>data</strong> (formerly the cells of your spreadsheet). It returns an array of each row that contained a keyword match. Similarly, using `getKeywordCount(data, keyword)` will return just the number of times the keyword occured.</p>
<pre><code data-language="javascript">getKeyword(gData, &quot;cat&quot;)
Expand Down Expand Up @@ -260,9 +260,9 @@ <h3 class="functionH">Sheetsee.addTileLayer(map, tileLayer)</h3>
<pre><code data-language="javascript">Sheetsee.addTileLayer(map, &#39;examples.map-20v6611k&#39;)</code></pre>
<p>You can add tiles from awesome mapmakers like <a href="examples.map-20v6611k">Stamen</a> or create your own in Mapbox&#39;s <a href="http://www.mapbox.com/tilemill">Tilemill</a> or <a href="https://tiles.mapbox.com/newmap#3.00/0.00/0.00">online</a>.</p>

<h3 class="functionH">Sheetsee.addMarkerLayer(geoJSON, map)</h3>
<p>To add makers to your map, use this function and pass in your <strong>geoJSON</strong> so that it can get the coordinates and your <strong>map</strong> so that it places the markers there.</p>
<pre><code data-language="javascript">var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map)</code></pre>
<h3 class="functionH">Sheetsee.addMarkerLayer(geoJSON, map, zoomLevel)</h3>
<p>To add makers to your map, use this function and pass in your <strong>geoJSON</strong> so that it can get the coordinates, your <strong>map</strong> so that it places the markers there and a <strong>zoom level</strong>.</p>
<pre><code data-language="javascript">var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 11)</code></pre>

<h3 class="functionH">Sheetsee.addPopups(map, markerLayer)</h3>
<p>To customize the marker popup content in your map use this function and pass in your <strong>map</strong> and <strong>markerLayer</strong>.</p>
Expand All @@ -287,7 +287,7 @@ <h3>Example - Local Pet Friends</h3>
<span class="noMatches">no matches</span>
<div id="basicTable" class="container"></div>
</div>


<p>Sheetsee.js supports making multiple tables or templates with IcanHas.js. The tables can have multiple inputs for searches and table headers can be used to sort the data in that column. For each of these you&#39;ll need a <code data-language="javascript">&lt;div&gt;</code> in your html, a <code data-language="javascript">&lt;script&gt;</code> template and a <code data-language="javascript">&lt;script&gt;</code> that calls table functions.</p>
<h4>Your HTML Placeholder <code data-language="javascript">&lt;div&gt;</code></h4>
Expand Down Expand Up @@ -448,15 +448,15 @@ <h3>Winner, Most Cuddlable</h3>
document.addEventListener('DOMContentLoaded', function() {
var gData
var URL = "0AvFUWxii39gXdFhqZzdTeU5DTWtOdENkQ1Y5bHdqT0E"
Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
})
Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
})

function showInfo(data) {
// window.tabletopData = tabletop
// window.tabletopData = tabletop
gData = data
console.log("here is gData", gData)

// make the map
// make the map
var optionsJSON = ["picurl", "name", "cuddlability"]
var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON)
var map = Sheetsee.loadMap("map")
Expand Down
Loading

0 comments on commit 844ac3d

Please sign in to comment.