diff --git a/docs/building.md b/docs/building.md index 690a8cac..52eff9b1 100644 --- a/docs/building.md +++ b/docs/building.md @@ -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`. @@ -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. \ No newline at end of file +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. diff --git a/docs/sheetsee-maps.md b/docs/sheetsee-maps.md index d6d3aa47..cf146bb8 100644 --- a/docs/sheetsee-maps.md +++ b/docs/sheetsee-maps.md @@ -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 `
` in your HTML and fire up a map from within ` +```HTML + +``` #### Your ` +```javascript + +``` To create another table, simply repeat the steps except for `initiateTableFilter()` -
- - +```HTML +
+ + +``` - 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 + +``` ## 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: - - Clear - no matches +```javascript + +``` ### 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 +Clear +no matches +```