Skip to content

Commit

Permalink
working on readmes
Browse files Browse the repository at this point in the history
  • Loading branch information
jlord committed Dec 9, 2013
1 parent 14791d7 commit 8cbca9c
Show file tree
Hide file tree
Showing 3 changed files with 105 additions and 68 deletions.
4 changes: 2 additions & 2 deletions docs/building.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
You can customize your sheetsee build with just the parts you want to use. If you want to just use the full version, you can grab it here in [js/sheetsee.js]().

**To build your sheetsee you'll need [Node.js]() on your computer and a commandline**
**To build your sheetsee you'll need [Node.js]() on your computer and a command line**

## Install sheetsee from NPM
The sheetsee module contains the basic sorting, organizing data functions and the script for building on the other modules. Create a folder for you new project and `cd` into it. Then install `sheetsee`.
Expand All @@ -17,4 +17,4 @@ Once you've decided which modules you want run this command `sheetsee ` adding:

* _defaults to standardout on your console which you can `| pbcopy`

So for instance, `sheetsee -m -t --save` will build you a sheetsee with the map and tables sections built in and save it as a file named sheetsee.js.
So for instance, `sheetsee -m -t --save` will build you a sheetsee with the map and tables sections built in and save it as a file named sheetsee.js.
65 changes: 37 additions & 28 deletions docs/sheetsee-maps.md
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,71 @@
# sheetsee-maps

![sheetsee](https://raw.github.com/jllord/sheetsee-cache/master/img/sheetsee-03.png)
Sheetsee.js uses [Mapbox.js](http://mapbox.com/mapbox.js), a [Leaflet.js](http://leafletjs.com/) plugin, to make maps of your points, polygons, lines or multipolygons (all coordinate based).

Module for creating maps with [sheetsee.js](http://jlord.github.io/sheetsee.js). It turns your spreadsheet data into geoJSON to use with mapbox.js. Below is the portion of the sheetsee.js documentation relevant to mapping. For all the documentation, go [here](http://jlord.github.io/sheetsee.js)!
You'll create a placeholder `<div>` in your HTML and fire up a map from within `<script>` tags.

---
#### Your HTML Placeholder `<div>`

## Make a Map
Create an empty `<div>` in your HTML, with an id (name).

Sheetsee.js uses [Mapbox.js](http://mapbox.com/mapbox.js), a [Leaflet.js](http://leafletjs.com/) plugin, to make maps.
```HTML
<div id="map"></div>
```

Create an empty `<div>` in your HTML, with an id.

<div id="map"></div>
#### Your `<script>` Functions

Next you'll need to create geoJSON out of your data so that it can be mapped.

### Sheetsee.createGeoJSON(data, optionsJSON)

This takes in your **data** and the parts of your data, **optionsJSON**, that you plan in your map's popups. If you're not going to have popups on your markers, don't worry about it then and just pass in your data.
This takes in your **data** and the parts of your data, **optionsJSON**, that you plan on including in your map's popups. If you're not going to have popups on your markers, don't worry about it then and just pass in your data (by default it will use all the row's information).

var optionsJSON = ["name", "breed", "cuddlability"]
var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON)
```javascript
var optionsJSON = ["name", "breed", "cuddlability"]
var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON)
```

It will return an _array_ in the special geoJSON format that map making things love.

[{
"geometry": {"type": "Point", "coordinates": [long, lat]},
"properties": {
"marker-size": "small",
"marker-color": lineItem.hexcolor
},
"opts": {the options you pass in},
}}

```javascript
[{
"geometry": {"type": "Point", "coordinates": [long, lat]},
"properties": {
"marker-size": "small",
"marker-color": lineItem.hexcolor
},
"opts": {the options you pass in},
}}
```

### Sheetsee.loadMap(mapDiv)

To create a simple map, with no data, you simply call `.loadMap() and pass in a _string_ of the **mapDiv** (with no #) from your HTML.

var map = Sheetsee.loadMap("map")
```javascript
var map = Sheetsee.loadMap("map")
```

### Sheetsee.addTileLayer(map, tileLayer)

To add a tile layer, aka a custom map scheme/design/background, you'll use this function which takes in your **map** and the source of the **tileLayer**. This source can be a Mapbox id, a URL to a TileJSON or your own generated TileJSON. See [Mapbox's Documentation](http://mapbox.com/mapbox.js/api/v1.0.2/#L.mapbox.tileLayer) for more information.

Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
```javascript
Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
```

You can add tiles from awesome mapmakers like [Stamen](examples.map-20v6611k) or create your own in Mapbox's [Tilemill](http://www.mapbox.com/tilemill) or [online](https://tiles.mapbox.com/newmap#3.00/0.00/0.00).

### Sheetsee.addMarkerLayer(geoJSON, map)

To add makers to your map, use this function and pass in your **geoJSON** so that it can get the coordinates and your **map** so that it places the markers there.

var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map)
To add makers, lines or shapes to your map, use this function and pass in your **geoJSON** so that it can get the coordinates and your **map** so that it places the markers there. You can customize what the content in your marker's popup looks like with a **popupTemplate**, which is HTML and can reference the column headers you included in your optionsJSON.

### Sheetsee.addPopups(map, markerLayer)
```javascript
var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, popupTemplate)
```

To customize the marker popup content in your map use this function and pass in your **map** and **markerLayer**.
Example template:

Sheetsee.addPopups(map, markerLayer)
```javascript
var template = "<h4>Hello {{world}}</h4>"
```
104 changes: 66 additions & 38 deletions docs/sheetsee-tables.md
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,99 @@
# sheetsee-tables

![sheetsee](https://raw.github.com/jllord/sheetsee-cache/master/img/sheetsee-03.png)
With this module you can create tables of your data that are sortable, searchable and paginate-able.

Module for creating tables with sheetsee.js. You should also (for now) require the [sheetsee-core](http://www.npmjs.org/sheetsee-core) module since it includes the templating library that this module uses.
You'll need a `<div>` in your html, a `<script>` mustache template and a `<script>` that intitiates the table.

Below is the portion of the full sheetsee documentation that is relevant to making tables. See the full [documentation](http://jlord.github.io/sheetsee.js) here.

---
#### Your HTML Placeholder `<div>`

## Make a Table
This is as simple as an empty `<div>` with an id. This id should match the script template id in the next section.

Sheetsee.js supports making multiple tables or templates with IcanHas.js. It currently supports sorting, filtering and pagination. For each of these you'll need a `<div>` in your html, a `<script>` template and a `<script>` that calls table making functions.
```HTML
<div id="siteTable"></div>
```

#### Your HTML Placeholder `<div>`
#### Your `<script>` Template

This is as simple as an empty `<div>` with an id. This id should match the script tempate id in the next section.
Your template is the mockup of what you'd like your table to look like and what content it should show. The style is up to you!

<div id="siteTable"></div>
##### Sorting

#### Your `<script>` Template
If you want users to be able to click on headers and sort that column, your template must include table headers with the class _tHeader_.

Your template is the mockup of what you'd like your table to look like and what content it should show. Most of this is up to you but if you want users to be able to click on headers and sort that column you must make a table row with table headers with the class _tHeader_.
*Example*

The variables inside the {{}} must match the column headers in your spreadsheet. Lowercase and remember spaces are ommited, so "Place Name" will become "placename".
_The variables inside the {{}} must match the column headers in your spreadsheet. Lowercase and remember spaces are omitted, so "Place Name" will become "placename"._

<script id="siteTable" type="text/html">
<table>
<tr><th class="tHeader">City</th><th class="tHeader">Place Name</th><th class="tHeader">Year</th><th class="tHeader">Image</th></tr>
{{#rows}}
<tr><td>{{city}}</td><td>{{placename}}</td><td>{{year}}</td><td>{{image}}</td></tr>
{{/rows}}
</table>
</script>
```HTML
<script id="siteTable" type="text/html">
<table>
<tr><th class="tHeader">City</th><th class="tHeader">Place Name</th><th class="tHeader">Year</th><th class="tHeader">Image</th></tr>
{{#rows}}
<tr><td>{{city}}</td><td>{{placename}}</td><td>{{year}}</td><td>{{image}}</td></tr>
{{/rows}}
</table>
</script>
```

#### Your `<script>` Execution

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() { // IE6 doesn't do DOMContentLoaded
Sheetsee.makeTable(gData, "#siteTable", 10)
Sheetsee.initiateTableFilter(gData, "#tableFilter", "#siteTable")
})
</script>
```javascript
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() { // IE6 doesn't do DOMContentLoaded
Sheetsee.makeTable(gData, "#siteTable", 10)
Sheetsee.initiateTableFilter(gData, "#tableFilter", "#siteTable")
})
</script>
```

To create another table, simply repeat the steps except for `initiateTableFilter()`

<div id="secondTable"></div>
<script id="secondTable"> // your table template here </script>
<script>Sheetsee.makeTable(otherData, "#secondTable", 10)</script>
```HTML
<div id="secondTable"></div>
<script id="secondTable"> // your table template here </script>
<script>Sheetsee.makeTable(otherData, "#secondTable", 10)</script>
```

Learn more about the things you can do with [mustache.js](http://mustache.github.io/).
Learn more about the things you can do with [mustache.js](http://mustache.github.io/).

### Sheetsee.makeTable(data, targetDiv)
### Sheetsee.makeTable(data, targetDiv, pagination)

You'll call this to make a table out of a **data** and tell it what **targetDiv** in the html to render it in (this should also be the same id as your script template id) and how many **rows** you want it to show per "page" of the table. If you don't include the pagination number, it will default to showing all rows on one page.

Sheetsee.makeTable(gData, "#siteTable", 10)
```javascript
Sheetsee.makeTable(gData, "#siteTable", 10)
```

#### Pagination

If you do not put in a number for pagination, by default it will show all of the data at once. With pagination, at the bottom of your table it will add this for naviagtion, which you can style in your CSS:

```HTML
<div id='Pagination' currentPage class='table-pagination'>
Showing page currentPage of totalPages
<a class='pagination-pre'>Previous</a><a class='pagination-next'>Next</a>
</div>
```

## Table Filter/Search

If you want to have an input to allow users to search/filter the data in the table, you'll add this to your html:
If you want to have an input to allow users to search/filter the data in the table, you'll add an input to your HTML. Give it an ide and if you want, placeholder text:

<input id="tableFilter" type="text" placeholder="filter by.."></input>
<span class="clear button">Clear</span>
<span class="noMatches">no matches</span>
```javascript
<input id="tableFilter" type="text" placeholder="filter by.."></input>
```

### Sheetsee.initiateTableFilter(data, filterDiv, tableDiv)

You will then call this function to make that input live:

Sheetsee.initiateTableFilter(gData, "#TableFilter", "#siteTable")
```javascript
Sheetsee.initiateTableFilter(gData, "#TableFilter", "#siteTable")
```

It will connect that input to your data as well as inject this HTML for a button, which you can style yourself in your CSS:

```HTML
<span class="clear button">Clear</span>
<span class="noMatches">no matches</span>
```

0 comments on commit 8cbca9c

Please sign in to comment.