-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
181 lines (167 loc) · 11.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html class="full" lang="en">
<!-- Make sure the <html> tag is set to the .full CSS class. Change the background image in the full.css file. -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A landing page for the d3-mapping repo">
<meta name="author" content="maptimeLEX">
<title>maptimeLEX - Spreadsheet Sorcery</title>
<!-- Bootstrap Core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="assets/css/the-big-picture.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://maptime.io/lexington">maptimeLEX</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="https://github.com/maptimelex/spreadsheet-sorcery">GitHub Repo</a>
</li>
<!-- <li>
<a href="#">Contact</a>
</li> -->
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<h1>Spreadsheet Sorcery: Making a map with SheetseeJS & Google Spreadsheets</h1>
<p>For the November 2015 meetup we learned how to make map pulling feature data from a Google Spreadsheet. This page is meant to help you walk through the process of making a map of Lexington-area beer establishments as compiled in <a href="http://www.lexbeerscene.com/localestablishments">this list</a> by <a href="http://www.lexbeerscene.com/">LexBeerScene.com</a></p>
<h3>What we'll make</h3>
<hr>
<div class="container">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<img src="assets/img/beer-map-demo.gif" alt="beer map demo" width="600">
<a href="http://maptimelex.github.io/spreadsheet-sorcery/beer-map">Live Demo</a>
</div>
<div class="col-sm-3"></div>
</div>
<h3>What we'll be using</h3>
<hr>
<div class="list-group">
<h4 class="list-group-item-heading">Backend</h4>
<ul class="list-group setup-list">
<li class="list-group-item"><a href="https://www.google.com/sheets/about/">Google Spreadsheets</a></li>
<li class="list-group-item"><a href="https://docs.google.com/spreadsheets/d/13Xd93PIiGvGh2JQ6uygnsUTTLAlJu7F7TE-doTy-5OY/edit?usp=sharing">LexBeerScene Spreadsheet</a></li>
<li class="list-group-item"><a href="https://docs.google.com/spreadsheets/d/13Xd93PIiGvGh2JQ6uygnsUTTLAlJu7F7TE-doTy-5OY/edit?usp=sharing"><a href="http://www.digital-geography.com/geocoding-google-spreadsheets/#.Vk0YKfmrTDc">Geocoder for Google Spreadsheets</a> - <i>We don't go into detail about this yet, but check out the linked post from <a href="http://www.digital-geography.com/"><b>Digital-Geography.com</b></a> on how to geocode addresses within your Google Spreadsheet</i></a></li>
</ul>
<h4 class="list-group-item-heading">Frontend</h4>
<ul class="list-group setup-list">
<li class="list-group-item"><a href="https://www.mapbox.com/mapbox.js/api/">mapboxJS</a>/<a href="http://leafletjs.com/">LeafletJS</a> - Setting up map and map interaction</li>
<li class="list-group-item"><a href="http://jlord.us/sheetsee.js/">SheetseeJS</a> - Pulling data from Google Spreadsheets, transforming data to GeoJSON, data driven templates
<ul class="list-group setup-list">
<li class="list-group-item"><a href="https://github.com/jsoma/tabletop">TabletopJS</a> - Pull the data from the Google Spreadsheet</li>
<li class="list-group-item"><a href="http://handlebarsjs.com/">HandlebarsJS</a> - Templates for our table and info pane</li>
<li class="list-group-item"><a href="http://icanhazjs.com/">ICanHazJS</a> - Mediates moving the data pulled from Google Spreadsheets into a Handlebars template</li>
</ul>
</li>
<li class="list-group-item"><a href="http://jquery.com/">jQuery</a> - Interaction</li>
</ul>
</div>
<div class="container">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<img src="assets/img/anatomy4.jpg" alt="our map's architecture" width="600">
Adapted from <a href="http://maptime.io/anatomy-of-a-web-map/#84" target="_blank">"Anatomy of Webmap"</a>
</div>
<div class="col-sm-3"></div>
</div>
<h3>Setting up</h3>
<hr>
<div class="list-group">
<h4 class="list-group-item-heading">Download project files</h4>
<ul class="list-group setup-list">
<li class="list-group-item">Either clone the project <a href="https://github.com/maptimelex/spreadsheet-sorcery"><b>spreadsheet-sorcery</b></a> repo or download it as a ZIP. If you do the latter, you'll need to unzip the project file.</li>
</ul>
<h4 class="list-group-item-heading">Start up a local server</h4>
<ol class="list-group setup-list">
<li class="list-group-item">If you don't have it, download <a href="https://www.python.org/downloads/">Python 2.7.x</a></li>
<li class="list-group-item">Open up Command Prompt (Windows) or Terminal (OSX, Linux)</li>
<li class="list-group-item">Navigate to the directory where you saved the project files</li>
<li class="list-group-item">Start local server: <pre>python -m SimpleHTTPServer</pre></li>
<li class="list-group-item">In your browser, navigate to: <pre>localhost:8000</pre> You'll use this to navigate around the various stages of the project we're working with.</li>
</ol>
<p><b>Note: </b>We recommend using the versions of the various JavaScript libraries included in the project repo. We've had some trouble getting everything to work with the most up-to-date versions of these libaries.</p>
</div>
<h3>Steps</h3>
<hr>
<div class="list-group">
<h4 class="list-group-item-heading">00 - Starter</h4>
<div class="list-group">
<a href="https://github.com/maptimelex/spreadsheet-sorcery/tree/gh-pages/00_starter" class="list-group-item">Explore all the pieces</a>
<a href="https://github.com/maptimelex/spreadsheet-sorcery/blob/gh-pages/00_starter/index.html" class="list-group-item">index.html</a>
<a href="https://github.com/maptimelex/spreadsheet-sorcery/blob/gh-pages/00_starter/js/app.js" class="list-group-item">app.js</a>
<a href="00_starter" class="list-group-item">Live Demo</a>
</div>
<h4 class="list-group-item-heading">01 - Basic Map</h4>
<div class="list-group">
<a href="https://github.com/maptimelex/spreadsheet-sorcery/blob/gh-pages/01_map-basic/js/app.js" class="list-group-item">app.js</a>
<a href="01_map-basic" class="list-group-item">Live Demo</a>
</div>
<h4 class="list-group-item-heading">02 - Custom Marker for Points</h4>
<div class="list-group">
<a href="https://github.com/maptimelex/spreadsheet-sorcery/blob/gh-pages/02_map-custom-marker/js/app.js" class="list-group-item">app.js</a>
<a href="02_map-custom-marker" class="list-group-item">Live Demo</a>
</div>
<h4 class="list-group-item-heading">03 - Add Table</h4>
<div class="list-group">
<a href="https://github.com/maptimelex/spreadsheet-sorcery/blob/gh-pages/03_table-basic/js/index.html" class="list-group-item">index.html</a>
<a href="https://github.com/maptimelex/spreadsheet-sorcery/blob/gh-pages/03_table-basic/js/app.js" class="list-group-item">app.js</a>
<a href="03_table-basic" class="list-group-item">Live Demo</a>
</div>
<h4 class="list-group-item-heading">04 - Wire the Map & Table Together</h4>
<div class="list-group">
<a href="https://github.com/maptimelex/spreadsheet-sorcery/blob/gh-pages/04_table-map-wire/js/app.js" class="list-group-item">app.js</a>
<a href="04_table-map-wire" class="list-group-item">Live Demo</a>
</div>
<h4 class="list-group-item-heading">05 - Add Infopane</h4>
<div class="list-group">
<a href="https://github.com/maptimelex/spreadsheet-sorcery/blob/gh-pages/05_info-pane/js/index.html" class="list-group-item">index.html</a>
<a href="https://github.com/maptimelex/spreadsheet-sorcery/blob/gh-pages/05_info-pane/js/app.js" class="list-group-item">app.js</a>
<a href="05_info-pane" class="list-group-item">Live Demo</a>
</div>
<h4 class="list-group-item-heading">06 - Add Option to Reset Map</h4>
<div class="list-group">
<a href="https://github.com/maptimelex/spreadsheet-sorcery/blob/gh-pages/06_reset/js/app.js" class="list-group-item">app.js</a>
<a href="06_reset" class="list-group-item">Live Demo</a>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="assets/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>