You just made my day, I've been waiting for this for a long time, I had to use a workaround in my app with firebase realtime database in order to make this feature work, now I can rewrite that code and keep working only with firestore, again thanks for making our developer life easier, keep sharing your knoledge
Great work. Absolutely brilliant I gotta say. I almost made the simular stuff for my last project, but had to give up (not by geo queries though, but filtering) But still it's not as powerful as MongoDB. I mean with firebase it always looks like you fighting against the system limitations rather then developing. You'd probably either very dedicated person or have a nerve for it. Good job anyway. Appreciate it a lot.
00:08 Building real-time geolocation features using Firestore and Angular Google Maps. 01:07 Geo queries in Firestore are different from normal queries 02:10 Utilizing geohashes for precise geo queries 03:08 Initialize Firebase app and Angular Google Maps in Angular or Ionic. 04:08 Geoqueries allow multiple geo points on a single document. 05:14 Firestore Geoquery enables querying against multiple geo points within a single document. 06:20 Using switch map allows for reactive changes in radius and queries. 07:27 Firestore Geoquery allows real-time updates based on user position.
Amazing, thanks Jeff!! I've recently been working on a location based app and I've decided to go the easy route and differentiate users by city, but the app might just get a level up, thanks to this video.
I have a bunch of additional features on another branch for this lib, like a query inside bounding boxes and stuff like that. Please let me know how it goes if you use it :)
Rad! I hadn't heard of geohashes before. I've never had a use case for them... so I don't feel too bad about it. But now I need to find a good reason to spend a few days building some maps :)
Awesome tutorial Jeff. I have a question, although not totally related to Geo problems: I see you have to initialize AGM with Google Maps API key. What about security? Hard coding the API key directly in the spa makes it visible to whoever wants to look for it. Is there another pattern I can use? Eventually storing the API key in Firestore itself (despite rules shouldn't prevent any user to read the data, thus same problem). Storing in firebase functions config and return on Https trigger? What else to ensure security of the API key? Many thanks!
How to link the radius with the zoom? I want to display everything that is currently visible in the map? The goal being that the user isn't aware that I don't show everything? Also, how would you do to not only react on a radius change but also on Latitude/Longitude change? Since you can pipe only on one of the 3 elements?
Hey there! I'm trying to implement something exactly like this in my Flutter app, where I want to create a kind of density hotspot/heatmap wherever there are multiple users in a certain area. Do you have any solutions? Google Maps Flutter package currently does not support displaying heatmaps, so I'm kind of stuck.
Thanks for this great info amd tutorial, Sorry, a noob question, is this geoquery api can be used in ios or android app as long as it is using firebase as backend ? Thanks
😱Oh! Awesome! I've been waiting for this for a long time. Can I do things like layout, routing, symbology plus you got my star 🌟 all ready thanks. I'll have to go through the your docs to see how far I can actually use this. I ❤️ you and your content.
nice video,, As a pro member I adore your tutorials,,for Geo Search I wanted to user Algolia Geo Search,, what do you think about that??? since I am heavily using algolia with my firebase web app.. do u recommend your library over Algolia GEO Search?? Regards
Thank you for this video, you have excellent presentation skill. Does it filter points from client side or server side ? As I need to deal with thousands points on mobile device, I am wondering performance.
It actually does a little of both. It calculates the minimum geohash squares guaranteed to cover the radius and filters those server side. This can return extra results that are then filtered client-side, but that depends on the size of the radius and distribution of points.
typescript compile the code, you may load html, but add functionalities into it would not be easy stackoverflow.com/questions/46659860/angular4-load-external-html-page-in-a-div
Who can help me with geoquering nearby documents in Firebase Firestore in Android Studio (Java)? I've been searching this topic and the results I get are only either it is impossible or there is some solution but no clear example in Android Studio or Java. I know I am a newbie, that's why I am asking for help. Can someone please reply?
That is a very well done port of Geofire and could be a good choice depending on your needs. In our case, we had big collections that needed to be limited by a query first and also needed multiple geopoints on a document, as well as some other specialized internal stuff.
I've worked with Mongo's GeoSpatial stuff in the past and this was loosely inspired by it. Firestore has hinted at native geolocation support, so hoping that lands as a feature in the future.
i understand but even that basic is too complicated using firebase, all that just to query data that falls within a certain buffer distance, the ideal player for such operations here is Postgresql with Postgis extension. i think mongodb have nearly competitive spatial operations now but can't really judge since i haven't used it yet and also it depends really on what purpose your mapping needs, you can use file database like sqlite if your data don't change a lot, but as i said the big player for me here is postgis
Thanks for the info. I have used Mongo and it is superior in this area, but Firebase has hinted at native support for Firestore geo in future. Postgis seems like the gold standard for most, but I imagine it's harder to get setup with realtime listeners.
You just made my day, I've been waiting for this for a long time, I had to use a workaround in my app with firebase realtime database in order to make this feature work, now I can rewrite that code and keep working only with firestore, again thanks for making our developer life easier, keep sharing your knoledge
I had a project for a client that simply was not feasible in the RTDB, so that compelled me to package this into a library.
Thats awesome, I hope soon I can become pro member, and keep learning from you!!,
And mine!!!, I m gonna try it on ionic but should be exactly the same
Compatible with both flat earth and round earth theories lol hahah
I'm pretty sure the math works the same for both theories :)
Compatible with those who are intelligent and those who ignore proven science!
Your comment made my day. Hahaha.
I heard Flutter instead of Flat-Earth, happy for no reason.
lmao
Great work. Absolutely brilliant I gotta say. I almost made the simular stuff for my last project, but had to give up (not by geo queries though, but filtering) But still it's not as powerful as MongoDB. I mean with firebase it always looks like you fighting against the system limitations rather then developing. You'd probably either very dedicated person or have a nerve for it. Good job anyway. Appreciate it a lot.
Thank you. Mongo has better geospatial support but I hope we see Firestore improve in this area in the future.
00:08 Building real-time geolocation features using Firestore and Angular Google Maps.
01:07 Geo queries in Firestore are different from normal queries
02:10 Utilizing geohashes for precise geo queries
03:08 Initialize Firebase app and Angular Google Maps in Angular or Ionic.
04:08 Geoqueries allow multiple geo points on a single document.
05:14 Firestore Geoquery enables querying against multiple geo points within a single document.
06:20 Using switch map allows for reactive changes in radius and queries.
07:27 Firestore Geoquery allows real-time updates based on user position.
Amazing, thanks Jeff!! I've recently been working on a location based app and I've decided to go the easy route and differentiate users by city, but the app might just get a level up, thanks to this video.
I have a bunch of additional features on another branch for this lib, like a query inside bounding boxes and stuff like that. Please let me know how it goes if you use it :)
Angular Firebase Gladly :)
Same here!
wow!!! you just made me replace my entire ng5 project with ths lol thanks jeff you the best
Cool! Let me know if you run into any issues on Github :)
Rad! I hadn't heard of geohashes before. I've never had a use case for them... so I don't feel too bad about it. But now I need to find a good reason to spend a few days building some maps :)
I went down a rabbit hole with geohashes recently. You can also use them to build AR features, like Pokemon GO.
Cool!! Was busting my head trying to figure this out. Thanks for the solution. We are pro members as well.
Nice! Message me on slack if you need support with it :)
Amazing contribution again, Jeff.
i am getting this error - Property 'collection' does not exist on type 'GeoFireClient'
me too
well well well, you are simply perfect !!!!
Awesome tutorial Jeff. I have a question, although not totally related to Geo problems: I see you have to initialize AGM with Google Maps API key. What about security? Hard coding the API key directly in the spa makes it visible to whoever wants to look for it. Is there another pattern I can use? Eventually storing the API key in Firestore itself (despite rules shouldn't prevent any user to read the data, thus same problem). Storing in firebase functions config and return on Https trigger? What else to ensure security of the API key? Many thanks!
storing it in an environment variable would be better.
@@amacodes7347 I don't understand what environment variable in a client spa app? Like angular app?
Thank you for this awesome video
How to link the radius with the zoom? I want to display everything that is currently visible in the map? The goal being that the user isn't aware that I don't show everything? Also, how would you do to not only react on a radius change but also on Latitude/Longitude change? Since you can pipe only on one of the 3 elements?
Hello, could you do with the example of if it leaves the geofence, present an alert with angle and firebase
Fantastic! Exactly what I need to implement right now.
Hey there! I'm trying to implement something exactly like this in my Flutter app, where I want to create a kind of density hotspot/heatmap wherever there are multiple users in a certain area. Do you have any solutions? Google Maps Flutter package currently does not support displaying heatmaps, so I'm kind of stuck.
Thank you for sharing this informative video! 🐰🖐🏻
Amazing! Can you please do the same video for flutter?
Thanks for this great info amd tutorial, Sorry, a noob question, is this geoquery api can be used in ios or android app as long as it is using firebase as backend ? Thanks
trying to get around this in Android n m stuck ... any leads?
😱Oh! Awesome! I've been waiting for this for a long time. Can I do things like layout, routing, symbology plus you got my star 🌟 all ready thanks. I'll have to go through the your docs to see how far I can actually use this. I ❤️ you and your content.
Awesome :) Let me know if there's a feature you want to see, my goal is to make realtime maps as easy as possible.
@@Fireship data pagination and limits would be great! I'm thinking about working on a fork, so recommendations would be appreciated. Thanks!
nice video,, As a pro member I adore your tutorials,,for Geo Search I wanted to user Algolia Geo Search,, what do you think about that??? since I am heavily using algolia with my firebase web app.. do u recommend your library over Algolia GEO Search??
Regards
Algolia geo search is excellent. If you already have your data indexed there I would definitely consider that the best option.
@@Fireship Great,, thanks for feedback
Great Tutorial, by the way, what program did you use for video editing? The intro was too sick I had to watch it twice lol
Thanks! I use adobe aftereffects with the help of some pre-built animation elements
This video is AMEZING!, thank you soo much!!
Is there a way to do pagination with that?
Thank you for this video, you have excellent presentation skill. Does it filter points from client side or server side ? As I need to deal with thousands points on mobile device, I am wondering performance.
It actually does a little of both. It calculates the minimum geohash squares guaranteed to cover the radius and filters those server side. This can return extra results that are then filtered client-side, but that depends on the size of the radius and distribution of points.
thank you so much for this! is there a way to query nested collections? thank you!
Will I also be able to use the GeoFireX library with native IOS(Swift) and android(Kotlin) apps?
Sir, How I can load external Html on a single component. I want to build a blog by using MEAN. Please suggest. Happy Coding:)
typescript compile the code, you may load html, but add functionalities into it would not be easy
stackoverflow.com/questions/46659860/angular4-load-external-html-page-in-a-div
Thank you for this! 😭
Aye sir! thanks for this awesome material
Thank you, it's a fun area
Is it possible to get a code of this example please!?
Amazing! Thank you!
It is possible to use it in NodeJS? (Cloud Function)
Error: Argument "onNext" is not a valid function.
Marc Pujol Gualdo hey Marc, any update bro?
is it possibe to implement this to Laravel?
Anyone know if there is a way to unsubscribe from a real time data stream?
Is there one for React Native ?
Who can help me with geoquering nearby documents in Firebase Firestore in Android Studio (Java)?
I've been searching this topic and the results I get are only either it is impossible or there is some solution but no clear example in Android Studio or Java.
I know I am a newbie, that's why I am asking for help.
Can someone please reply?
2:39 lol
Awesome!
Thank you Pedro :)
iTs CoMpaTibLe wiTh fLat eARTh tHeORiEs.
does not work with firebase 8+
There's also a port of Geofire for Firestore called Geofirestore. github.com/MichaelSolati/geofirestore
That is a very well done port of Geofire and could be a good choice depending on your needs. In our case, we had big collections that needed to be limited by a query first and also needed multiple geopoints on a document, as well as some other specialized internal stuff.
Awesomeness
Nice video. But it is not that hard to build from scratch thanks to MongoDB's Geospatial Query Operators.
I've worked with Mongo's GeoSpatial stuff in the past and this was loosely inspired by it. Firestore has hinted at native geolocation support, so hoping that lands as a feature in the future.
U could make a multi million dollar app with this one tutorial Haha 😂
who else thought he or she saw donald glover
this is not ideal at all for any GIS web development or apps that just has any spatial data
It's not a fully featured geospatial db, but does provide a basic pathway for features like this. What is ideal for GIS web development?
i understand but even that basic is too complicated using firebase, all that just to query data that falls within a certain buffer distance, the ideal player for such operations here is Postgresql with Postgis extension.
i think mongodb have nearly competitive spatial operations now but can't really judge since i haven't used it yet and also it depends really on what purpose your mapping needs, you can use file database like sqlite if your data don't change a lot, but as i said the big player for me here is postgis
Thanks for the info. I have used Mongo and it is superior in this area, but Firebase has hinted at native support for Firestore geo in future. Postgis seems like the gold standard for most, but I imagine it's harder to get setup with realtime listeners.
Sir,
Nobody uses Angular how to do this in React Hooks?