forked from jlord/mappy
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
148 lines (118 loc) · 6.93 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link type='text/css' rel='stylesheet' href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css'>
<!-- Add a Title -->
<title>Mapping Kampala Wifi Hotspots</title>
<meta name="description" content="Crowdsourced Map of Wifi Hotspots in Kampala">
<meta name="author" content="Sparkplug">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/custom.css">
<!-- Scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="js/ICanHaz.js"></script>
<script src="js/site.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="js/tabletop1.3.4.js"></script>
<script type="text/javascript" src="js/sheetsee.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<link rel="stylesheet" href="css/github.css">
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<section class="header">
<h2 class="title">Map Kampala's Wifi Hotspots</h2>
<div class="docs-section" id="intro">
<h6 class="docs-header">Why?</h6>
<p>An easily searchable list of the best wifi hotspots in Kampala. Especially for first time visitors</p>
<p>Love the idea? Tweet it! We appreciate the ♥</p>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://raybesiga.com/wifihotspots" data-text="Map Kampala's Wifi Hotspots" data-via="sparkplugea" data-related="sparkplugea">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
</section>
</div>
<div class="navbar-spacer"></div>
<nav class="navbar">
<div class="container">
<ul class="navbar-list">
<li class="navbar-item"><a class="navbar-link" href="#map">Wifi Hotspot Map</a></li>
<li class="navbar-item"><a class="navbar-link" href="#hotspot">Adding A Hotspot</a></li>
</ul>
</div>
</nav>
<div class="section general" id="map"></div>
<div class="section education" id="hotspot">
<div class="container">
<h3 class="section-heading">Adding a Hotspot</h3>
<div class="row">
<p>To add a hostpot, access the Google Spreadsheet <a href="https://docs.google.com/spreadsheets/d/1sQaj4pt6Bn5Y6MoNin4NDs0WfJ200Fn4EFuccd0_Wvo/edit?usp=sharing" target="_blank">here</a>. Add the wifi hotspot details. Or copy, paste, edit. Smile, for a job well done, and refresh the page to look up your added hotspot. That's it.</p>
</div>
<div class="row">
<input id="hotSpotsTableFilter" type="text" placeholder="filter by.."></input>
<div id="hotSpotsTable"></div>
</div>
</div>
</div>
<div class="section">
<div class="container">
<footer>
<p class="small text-muted">Built with ♥ by <a href="http://sparkpl.ug" target="_blank">Sparkplug</a>. Great job on <a href="http://jlord.us/sheetsee.js/" target="_blank">Sheetsee</a> by <a href="https://twitter.com/jllord" target="blank">Jessica Lord</p>
</footer>
</div>
</div>
<script id="hotSpotsTable_template" type="text/html">
<table>
<tr><th class="tHeader">Name</th><th class="tHeader">Address</th><th class="tHeader">Date Added</th><th class="tHeader">Download Speed</th><th class="tHeader">Upload Speed</th><th class="">Elsewhere</th></tr>
{{#rows}}
<tr id="{{rowNumber}}" class="spotRow"><td>{{placename}}</td><td>{{address}}</td><td>{{dateadded}}</td><td>{{downloadspeedmbps}}</td><td>{{uploadspeedmbps}}</td><td><a class="button" href="https://maps.google.com/maps?q={{address}},{{city}},{{country}}" target="_blank">G Map</a> <a class="button" href="https://www.hellofood.ug/restaurants?user_search={{name}}" target="_blank">Hellofood</a></td></tr>
<tr class="hideRow"><td>wifi: {{wifipassword}}</td></tr>
{{/rows}}
</table>
</script>
<script type="text/javascript">
var map;
document.addEventListener('DOMContentLoaded', function() {
var URL = "https://docs.google.com/spreadsheets/d/1sQaj4pt6Bn5Y6MoNin4NDs0WfJ200Fn4EFuccd0_Wvo/pubhtml"
Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
})
function showInfo(data) {
// the column headers of the info you want in your popup
var optionsJSON = ["placename", "address", "outdoorseating", "powersocket", "couch", "brew", "contributortwitter", "dateadded", "downloadspeedmbps", "uploadspeedmbps"]
// an html template for your popup
var template = "<ul><li><h4>{{placename}}</h4></li>"
+ "<li>Located at {{address}}</li>"
+ "<li><b>Outdoor Seating:</b> {{outdoorseating}}</li>"
+ "<li><b>Power Sockets:</b> {{powersocket}}</li>"
+ "<li><b>Have Couch:</b> {{couch}}</li>"
+ "<li><b>Special Brew:</b> {{brew}}</li>"
+ "<li><i>Added by <a href='http://twitter.com/{{contributortwitter}}' target='_blank'>{{contributortwitter}}</i></li></ul>"
var geoJSON = Sheetsee.createGeoJSON(data, optionsJSON)
map = Sheetsee.loadMap("map")
Sheetsee.addTileLayer(map, 'raybesiga.lbooidnh')
Sheetsee.addMarkerLayer(geoJSON, map, template)
map._resetView([0.328, 32.578], 14)
var tData = optionsJSON
var tableOptions = {
"data": tData,
"pagination": 10,
"tableDiv": "#hotSpotsTable",
"filterDiv": "#hotSpotsTableFilter"
}
Sheetsee.makeTable(tableOptions)
Sheetsee.initiateTableFilter(tableOptions)
}
</script>
</body>
</html>