forked from firebase/geofire-js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
156 lines (124 loc) · 7.18 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
<!DOCTYPE html>
<html>
<head>
<title>GeoFire Examples</title>
</head>
<body style="width: 800px; margin: auto;">
<h1 style="text-align: center;">GeoFire Examples</h1>
<p>
<a href="https://www.github.com/firebase/geofire/">GeoFire</a> is a set of open-source libraries
for JavaScript, Objective-C, and Java that allow you to store and query a set of keys based on
their geographic location. At its heart, GeoFire simply stores locations with string keys. Its
main benefit, however, is the possibility of retrieving only those keys within a given geographic
area - all in realtime.
</p>
<p>
GeoFire uses <a href="https://www.firebase.com/?utm_source=geofire">Firebase</a> for data storage,
allowing query results to be updated in realtime as they change. GeoFire <strong>selectively loads
only the data near certain locations, keeping your applications light and responsive</strong>, even
with extremely large datasets.
</p>
<p>
There are compatible GeoFire clients available for <a href="https://github.com/firebase/geofire-js">JavaScript</a>,
<a href="https://github.com/firebase/geofire-objc">Objective-C</a>, and
<a href="https://github.com/firebase/geofire-java">Java</a>.
</p>
<p>
Note that the demos below are all written in JavaScript. You can find Objective-C and
Java examples in their respective GitHub repositories.
</p>
<h2><a href="./fish1/index.html">fish1 - Writing To and Reading From GeoFire</a></h2>
<p>
This is a very basic example which shows you how to read from and write to GeoFire
and how to handle the promises returned by the set(), get(), and remove()
methods.
</p>
<p>You can check out a live demo of this example <a href="./fish1/index.html">here</a>.</p>
<h2><a href="./fish2/index.html">fish2 - Using a GeoQuery</a></h2>
<p>
This is a more complex example which shows you how to create a GeoQuery and
respond to keys moving into, out of, and within the query. It also shows how
to cancel event callback registrations.
</p>
<p>You can check out a live demo of this example <a href="./fish2/index.html">here</a>.</p>
<h2><a href="./fish3/index.html">fish3 - Loading Initial Data</a></h2>
<p>
This example shows you how to achieve a common use case: loading only initial
data. This is accomplished in GeoFire by canceling a GeoQuery once its "ready"
event has fired.
</p>
<p>You can check out a live demo of this example <a href="./fish3/index.html">here</a>.</p>
<h2><a href="./html5Geolocation/index.html">html5Geolocation - HTML5 Geolocation API</a></h2>
<p>
The <a href="http://diveintohtml5.info/geolocation.html">HTML5 Geolocation API</a> allows you
to get the current location of the person who is viewing your site. This demo shows
how to use it to add their location to GeoFire. In addition, the examples uses
Firebase's onDisconnect() method to remove their location from GeoFire when they
leave the page (or close the app).
</p>
<p>You can check out a live demo of this example <a href="./html5Geolocation/index.html">here</a>.</p>
<h2><a href="./queryBuilder/index.html">queryBuilder - Build a Custom GeoQuery</a></h2>
<p>
This demo allows you to build custom <pre>GeoQuery</pre> objects and see when fish enter and
leave the query as it gets updated. Thanks to <a href="https://github.com/stefek99">@stefek99</a>
for the contribution!
</p>
<p>You can check out a live demo of this example <a href="./queryBuilder/index.html">here</a>.</p>
<h2><a href="./securityRules/rules.json">securityRules - Security Rules</a></h2>
<p>
It is important to protect your data with
<a href="https://www.firebase.com/docs/security/">Firebase and Security Rules</a>. This
example contains several different versions of rules for your GeoFire index. All of the
following rules enforce the schema of your index, but allow varying types of updates to it.
</p>
<ul>
<li>
<b><a href="https://geofire.firebaseapp.com/securityRules/rules.json">Default rules</a></b> -
These rules allow any client to add, update, or remove items from your index. This does not
prevent a malicious user from overwriting your index.
</li>
<li>
<b><a href="https://geofire.firebaseapp.com/securityRules/authenticated.rules.json">Authenticated rules</a></b> -
These rules require that only authenticated clients can update your index. Note that these
rules will intentionally cause all <pre>GeoFire.add()</pre> and <pre>GeoFire.remove()</pre>
calls to fail for unauthenticated clients.
</li>
<li>
<b><a href="https://geofire.firebaseapp.com/securityRules/noDeletes.json">No deletes rules</a></b> -
These rules prevent clients from being able to delete any existing keys in your index. Note
that these rules will intentionally cause all <pre>GeoFire.remove()</pre> calls to fail.
</li>
<li>
<b><a href="https://geofire.firebaseapp.com/securityRules/noUpdates.json">No updates rules</a></b> -
These rules prevent clients from being able to update or delete any existing keys in your
index. Note that these rules will intentionally fail all <pre>GeoFire.remove()</pre> calls
as well as any <pre>GeoFire.add()</pre> calls for existing keys in the index.
</li>
</ul>
<p>
You can further replace the <pre>".write"</pre> rule in the example rules files with some custom logic to restrict who and how users can write to your GeoFire index.
</p>
<p>
All of the example rules ensure that one client cannot overwrite your entire GeoFire index
node with a single call. However, none of them prevent a malicious user from scraping your
entire index. You can replace the <pre>".read"</pre> rule in the example rules files with some
custom logic to do this.
</p>
<h2><a href="./sfVehicles/index.html">sfVehicles - Fully-featured Example</a></h2>
<p>
This is a fully-featured, complex example which combines GeoFire, Google Maps,
and the <a href="https://www.firebase.com/docs/open-data/transit.html?utm_source=geofire">Firebase Transit Open Data Set</a>.
Firebase provides a public Firebase which contains the realtime locations of public
transit vehicles in several major US cities, including San Francisco MUNI. The data
set also contains GeoFire data for each vehicle which we used to create this demo.
</p>
<p>
Drag around the purple circle to the left to see the vehicles which are currently within its radius. The
results update in realtime as you move the circle and as vehicles travel around the city. GeoFire handles all
of the hard work, telling you exactly when vehicles enter and exit the circle. It also selectively loads
only the data geographically close to the circle, meaning GeoFire data for buses in New York or Chicago are not
loaded into memory unnecessarily.
</p>
<p>You can check out a live demo of this example <a href="./sfVehicles/index.html">here</a></p>
</body>
</html>