forked from bertomartin/jquery-birdseye
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (113 loc) · 4.71 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
<!doctype html>
<head>
<title>jQuery Birdseye Demo - a plugin for moving map search</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/leaflet.css">
<link rel="stylesheet" href="css/leaflet_numbered_markers.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<a href="https://github.com/adamjacobbecker/jquery-birdseye">
<img class="ribbon" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub">
</a>
<div class="container">
<h3>jQuery Birdseye Demo
<small>a plugin for moving map search by <a href="http://www.twitter.com/AdamJacobBecker">@AdamJacobBecker</a></small></h3>
<hr />
<p style="font-size: 11px;">Psst... check out my current White House fellowship, <a href="http://twitter.com/ProjectRFPEZ">@ProjectRFPEZ</a>. We're looking for developers like you to help build the next generation of federal government websites.</p>
<div class="sixteen columns filters">
<form>
<input name="location" type="text" placeholder="Location" />
<select name="yrest">
<option value="">Reg Year</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
</select>
<label>
Women-owned
<input type="checkbox" name="women" />
</label>
<label>
Accepts Gov Credit Cards
<input type="checkbox" name="gcc" />
</label>
<button>Filter Results</button>
</form>
</div>
<div class="ten columns">
<div class="birdseye-pagination"></div>
<div class="birdseye-results"></div>
<div class="birdseye-pagination"></div>
</div>
<div class="six columns map-container">
<div class="birdseye-map"></div>
</div>
</div>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/leaflet.js"></script>
<script src="js/leaflet.numbered_markers.js"></script>
<script src="js/jquery.birdseye.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
$(function(){
$(".birdseye-map").birdseye({
request_uri: 'http://sbadb.herokuapp.com/v1/bizs',
response_params_latlng: function(result){
return [result.latlon[1], result.latlon[0]]
},
results_template: function(key, result) {
return '<div>'
+ '<div class="number">#'+key+'</div>'
+ '<div class="content clearfix">'
+ '<h5>'+result.name+'</h5>'
+ '<div class="four columns alpha">'
+ result.address+'<br />'+result.city+', '+result.state+' '+result.zip
+ '<br />'
+ 'Reg Year: ' + result.yrest
+ '</div>'
+ '<div class="four columns omega">'
+ 'Women Owned: '+result.women+'<br />'
+ 'Accepts Gov Credit Cards: '+result.gcc
+ '</div>'
+ '</div>'
+ '</div>';
}
});
$(".birdseye-map").birdseye.update();
});
$(document).on("submit", "form", function(e){
e.preventDefault();
var location = $("input[name=location]").val(),
params = {};
if ($("select[name=yrest]").val() !== "") params["yrest"] = $("select[name=yrest]").val();
if ($("input[name=women]").is(":checked")) params["women"] = true;
if ($("input[name=gcc]").is(":checked")) params["gcc"] = true;
if (location && location !== "") {
var geocoder = new google.maps.Geocoder();
geocoder.geocode( {'address': location }, function(data, status){
$(".birdseye-map").birdseye.set_view([data[0].geometry.location.lat(), data[0].geometry.location.lng()], 10, false);
$(".birdseye-map").birdseye.update(params);
});
} else {
$(".birdseye-map").birdseye.update(params);
}
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-24940707-12']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>