├── CNAME
├── .gitignore
├── favicon.ico
├── apple-touch-icon.png
├── source
├── images
│ ├── ajax-loader.gif
│ ├── icons-18-black.png
│ ├── icons-18-white.png
│ ├── icons-36-black.png
│ ├── icons-36-white.png
│ ├── icons-18-black-location.png
│ ├── icons-18-white-location.png
│ ├── icons-36-black-location.png
│ └── icons-36-white-location.png
├── picker.default_plus_date.min.css
├── jquery.address.min.js
├── picker.plus_date.min.js
└── jquery.mobile-1.3.1.modified.min.css
├── LICENSE
├── README.md
├── index.html
├── samples
├── fusiontable_settings.SFLiquefaction.js
├── fusiontable_settings.SFBanks.js
├── fusiontable_settings.MyStreetSF.js
├── fusiontable_settings.SFInspections.js
└── fusiontable_settings.USHealthCenters.js
└── fusiontable_settings.js
/CNAME:
--------------------------------------------------------------------------------
1 | sfbrigade.github.io
2 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | source/images/.DS_Store
2 | source/.DS_Store
3 | .DS_Store
4 |
--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfbrigade/Mobile-Fusion-Tables/HEAD/favicon.ico
--------------------------------------------------------------------------------
/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfbrigade/Mobile-Fusion-Tables/HEAD/apple-touch-icon.png
--------------------------------------------------------------------------------
/source/images/ajax-loader.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfbrigade/Mobile-Fusion-Tables/HEAD/source/images/ajax-loader.gif
--------------------------------------------------------------------------------
/source/images/icons-18-black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfbrigade/Mobile-Fusion-Tables/HEAD/source/images/icons-18-black.png
--------------------------------------------------------------------------------
/source/images/icons-18-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfbrigade/Mobile-Fusion-Tables/HEAD/source/images/icons-18-white.png
--------------------------------------------------------------------------------
/source/images/icons-36-black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfbrigade/Mobile-Fusion-Tables/HEAD/source/images/icons-36-black.png
--------------------------------------------------------------------------------
/source/images/icons-36-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfbrigade/Mobile-Fusion-Tables/HEAD/source/images/icons-36-white.png
--------------------------------------------------------------------------------
/source/images/icons-18-black-location.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfbrigade/Mobile-Fusion-Tables/HEAD/source/images/icons-18-black-location.png
--------------------------------------------------------------------------------
/source/images/icons-18-white-location.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfbrigade/Mobile-Fusion-Tables/HEAD/source/images/icons-18-white-location.png
--------------------------------------------------------------------------------
/source/images/icons-36-black-location.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfbrigade/Mobile-Fusion-Tables/HEAD/source/images/icons-36-black-location.png
--------------------------------------------------------------------------------
/source/images/icons-36-white-location.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sfbrigade/Mobile-Fusion-Tables/HEAD/source/images/icons-36-white-location.png
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Mobile Fusion Tables: Copyright (c) 2013 SFBrigade
4 | FusionTable Map Template: Copyright (c) 2013 Derek Eder (http://derekeder.com)
5 |
6 | Permission is hereby granted, free of charge, to any person obtaining a copy of
7 | this software and associated documentation files (the "Software"), to deal in
8 | the Software without restriction, including without limitation the rights to
9 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
10 | the Software, and to permit persons to whom the Software is furnished to do so,
11 | subject to the following conditions:
12 |
13 | The above copyright notice and this permission notice shall be included in all
14 | copies or substantial portions of the Software.
15 |
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
18 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
19 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
20 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
21 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Mobile Fusion Tables
2 | ====================
3 |
4 | A mobile-ready template using Fusion Tables and jQuery Mobile, originally based on Derek Eder's [Fusion Table Searchable Map Template](https://github.com/derekeder/FusionTable-Map-Template).
5 |
6 | This is an SF Brigade project for Code for America. Started by Mark Brenig-Jones, completed by Rego Sen, with contributions from Sidney Zhang and Andrew Byrne.
7 |
8 | Demos
9 | -----
10 |
11 | - US Health Centers: http://www.mobilefusiontables.com/demo-USHealthCenters.html
12 | - SF Bank Locations: http://www.mobilefusiontables.com/demo-SFBanks.html
13 | - SF Restaurant Inspections: http://www.mobilefusiontables.com/demo-SFInspections.html
14 | - SF Liquefaction Data: http://www.mobilefusiontables.com/demo-SFLiquefaction.html
15 | - SFCTA Projects: http://www.mobilefusiontables.com/demo-MyStreetSF.html
16 |
17 | Here are some web apps that now use Mobile Fusion Tables:
18 |
19 | - Toynbee Tile Map
20 | - The Rider Scope (snowmobile trails in NY State)
21 | - UK Fabrication Companies
22 |
23 | Demo Using Your Own Fusion Table
24 | --------------------------------
25 | Go to http://www.mobilefusiontables.com and enter your Fusion Table URL (or ID) to see what your data will look like with Mobile Fusion Tables.
26 |
27 | (Note that you'll be seeing it with default settings- see below for customizing it to your own needs.)
28 |
29 |
30 | Setup
31 | -----
32 |
33 | **To create your own web app with Mobile Fusion Tables:**
34 |
35 | 1. Clone this repository.
36 | 2. Replace the FusionTable ID at the top of fusiontable_settings.js to point to your own table.
37 |
38 | That's it. You now have a working site that's equivalent to the above demo. It uses your own table's data, title, description, and infobox content, with a search field or range slider for each column. Once you open the webpage on your device and hit "Add to Home Screen", you should have something that looks and feels like a mobile app.
39 |
40 | If you want to make your app even sexier, explore the rest of the settings file to customize your content and behavior. See the "samples" folder to see how the above demos were customized.
41 |
42 |
43 | Turn It Into A Native App
44 | -------------------------
45 |
46 | You can combine Mobile Fusion Tables with a wrapper like Phonegap to build a pure mobile app.
47 |
48 | For example, here's the Android version of The Rider Scope app featured above.
49 |
50 |
51 | Walkthrough
52 | -----------
53 |
54 | Here's what the main (map) page looks like. You can customize the contents of the infobox using Handlebars.
55 |
56 | 
57 |
58 | There are four buttons for navigating:
59 | - **Search**: customizable search page for filtering and finding
60 | - **List**: shows results in a customizable list view
61 | - **Nearby**: takes you to your current location (you can opt-out of using current location in the settings file)
62 | - **About**: fill this with your custom description and links
63 |
64 | By default, the search page gives you a range slider for every number/date column in your table, and a text field for every string column (plus an address for centering your search).
65 |
66 | 
67 |
68 | You can customize your search page with drop-downs, overrides, and other options:
69 |
70 | 
71 |
72 | The address field lets you auto-complete an address:
73 |
74 | 
75 |
76 | The list view shows the data / search results by row (whose contents you can also customize). Clicking on a row will take you back to the map and highlight the pin with an infobox.
77 |
78 | 
79 |
80 |
81 | Get Involved
82 | ------------
83 |
84 | If you have a customization that you'd like to share here, we'd be happy to add it to the "samples" folder.
85 |
86 | Please raise any issues or suggestions for improvement!
87 |
--------------------------------------------------------------------------------
/source/picker.default_plus_date.min.css:
--------------------------------------------------------------------------------
1 | .picker{font-size:16px;text-align:left;line-height:1.2;color:#000;position:absolute;z-index:10000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.picker__input{cursor:default}.picker__input.picker__input--active{border-color:#0089ec}.picker__holder{width:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}/*!
2 | * Default mobile-first, responsive styling for pickadate.js
3 | * Demo: http://amsul.github.io/pickadate.js
4 | */.picker__frame,.picker__holder{bottom:0;left:0;right:0;top:100%}.picker__holder{position:fixed;-webkit-transition:background .15s ease-out,top 0s .15s;-moz-transition:background .15s ease-out,top 0s .15s;transition:background .15s ease-out,top 0s .15s}.picker__frame{position:absolute;margin:0 auto;min-width:256px;max-width:666px;width:100%;-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;opacity:0;-webkit-transition:all .15s ease-out;-moz-transition:all .15s ease-out;transition:all .15s ease-out}@media (min-height:33.875em){.picker__frame{overflow:visible;top:auto;bottom:-100%;max-height:80%}}@media (min-height:40.125em){.picker__frame{margin-bottom:7.5%}}.picker__wrap{display:table;width:100%;height:100%}@media (min-height:33.875em){.picker__wrap{display:block}}.picker__box{background:#fff;display:table-cell;vertical-align:middle}@media (min-height:26.5em){.picker__box{font-size:1.25em}}@media (min-height:33.875em){.picker__box{display:block;font-size:1.33em;border:1px solid #777;border-top-color:#898989;border-bottom-width:0;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;-webkit-box-shadow:0 12px 36px 16px rgba(0,0,0,.24);-moz-box-shadow:0 12px 36px 16px rgba(0,0,0,.24);box-shadow:0 12px 36px 16px rgba(0,0,0,.24)}}@media (min-height:40.125em){.picker__box{font-size:1.5em;border-bottom-width:1px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}}.picker--opened .picker__holder{top:0;zoom:1;background:rgba(0,0,0,.32);-webkit-transition:background .15s ease-out;-moz-transition:background .15s ease-out;transition:background .15s ease-out}.picker--opened .picker__frame{top:0;-ms-filter:"alpha(Opacity=100)";filter:alpha(opacity=100);-moz-opacity:1;opacity:1}@media (min-height:33.875em){.picker--opened .picker__frame{top:auto;bottom:0}}
5 | .picker__box{padding:0 1em}.picker__header{text-align:center;position:relative;margin-top:.75em}.picker__month,.picker__year{font-weight:500;display:inline-block;margin-left:.25em;margin-right:.25em}.picker__year{color:#999;font-size:.8em;font-style:italic}.picker__select--month,.picker__select--year{border:1px solid #b7b7b7;height:2.5em;padding:.5em .25em;margin-left:.25em;margin-right:.25em;font-size:.6em}@media (min-width:24.5em){.picker__select--month,.picker__select--year{font-size:.8em;margin-top:-.5em}}.picker__select--month{width:35%}.picker__select--year{width:22.5%}.picker__select--month:focus,.picker__select--year:focus{border-color:#0089ec}.picker__nav--next,.picker__nav--prev{position:absolute;padding:.5em 1.25em;width:1em;height:1em;top:-.25em}@media (min-width:24.5em){.picker__nav--next,.picker__nav--prev{top:-.33em}}.picker__nav--prev{left:-1em;padding-right:1.25em}@media (min-width:24.5em){.picker__nav--prev{padding-right:1.5em}}.picker__nav--next{right:-1em;padding-left:1.25em}@media (min-width:24.5em){.picker__nav--next{padding-left:1.5em}}.picker__nav--next:before,.picker__nav--prev:before{content:" ";border-top:.5em solid transparent;border-bottom:.5em solid transparent;border-right:.75em solid #000;width:0;height:0;display:block;margin:0 auto}.picker__nav--next:before{border-right:0;border-left:.75em solid #000}.picker__nav--next:hover,.picker__nav--prev:hover{cursor:pointer;color:#000;background:#b1dcfb}.picker__nav--disabled,.picker__nav--disabled:before,.picker__nav--disabled:before:hover,.picker__nav--disabled:hover{cursor:default;background:0 0;border-right-color:#f5f5f5;border-left-color:#f5f5f5}.picker__table{text-align:center;border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:inherit;width:100%;margin-top:.75em;margin-bottom:.5em}@media (min-height:33.875em){.picker__table{margin-bottom:.75em}}.picker__table td{margin:0;padding:0}.picker__weekday{width:14.285714286%;font-size:.75em;padding-bottom:.25em;color:#999;font-weight:500}@media (min-height:33.875em){.picker__weekday{padding-bottom:.5em}}.picker__day{padding:.3125em 0;font-weight:200;border:1px solid transparent}.picker__day--today{color:#0089ec;position:relative}.picker__day--today:before{content:" ";position:absolute;top:2px;right:2px;width:0;height:0;border-top:.5em solid #0059bc;border-left:.5em solid transparent}.picker__day--selected,.picker__day--selected:hover{border-color:#0089ec}.picker__day--highlighted{background:#b1dcfb}.picker__day--disabled:before{border-top-color:#aaa}.picker__day--outfocus{color:#ddd}.picker__day--infocus:hover,.picker__day--outfocus:hover{cursor:pointer;color:#000;background:#b1dcfb}.picker--focused .picker__day--highlighted,.picker__day--highlighted:hover{background:#0089ec;color:#fff}.picker__day--disabled,.picker__day--disabled:hover{background:#f5f5f5;border-color:#f5f5f5;color:#ddd;cursor:default}.picker__day--highlighted.picker__day--disabled,.picker__day--highlighted.picker__day--disabled:hover{background:#bbb}.picker__footer{text-align:center}.picker__button--clear,.picker__button--today{border:1px solid #fff;background:#fff;font-size:.8em;padding:.66em 0;font-weight:700;width:50%;display:inline-block;vertical-align:bottom}.picker__button--clear:hover,.picker__button--today:hover{cursor:pointer;color:#000;background:#b1dcfb;border-bottom-color:#b1dcfb}.picker__button--clear:focus,.picker__button--today:focus{background:#b1dcfb;border-color:#0089ec;outline:0}.picker__button--clear:before,.picker__button--today:before{position:relative;display:inline-block;height:0}.picker__button--today:before{content:" ";margin-right:.45em;top:-.05em;width:0;border-top:.66em solid #0059bc;border-left:.66em solid transparent}.picker__button--clear:before{content:"\D7";margin-right:.35em;top:-.1em;color:#e20;vertical-align:top;font-size:1.1em}
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | Mobile Fusion Table
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
71 |
72 |
73 |
74 |
75 |
76 |