Help with HTML5 geolocation and creating a digital flash mob

Thanks for reading.

I have the basics of how the HTML5 geolocation works, I can grab permission and get the gps coords, monitor them using watchPosition etc. display the accuracy, errors and so on, and to know if they are within 50ft of a specific set of coords that I specify and display different messages depending if they are inside or outside this radius.

What I need to do next is figure out a way to combine this with multiple users viewing the page at the same time from the same location to display a message.

For example, if I want x people to go to the same coordinates (within a specific radius eg. 50ft) at the exact same time and load the page on their phone, then once all x viewers have the page loaded it would recognize that fact and display a message to them all.

Should there not be enough people yet it would tell them how many out of x are there etc.

Eventually I would like to have this set up in such a way that I can have multiple different locations each with their own specific amount of people needed and message to display, saved in a database and editable by the creator etc. but for now I just need help figuring out how to go about knowing when multiple people viewing the page are all at the correct location at the same time and displaying a message to them.

If I could also display all viewers of the page simultaneously on a Google map embedded on that page then that would be cool too, but I’ll settle for figuring out the above.

Not sure where to begin to be honest.

Any help is very appreciated.

Update
I have successfully managed to use the script located here https://developers.google.com/maps/documentation/javascript/examples/map-geolocation to monitor the location of one viewer and display it on a map,then change the message that appears within the info window depending on if they are within a certain distance of a specific set of coords.

Now I just need to figure out a way to combine the monitoring of all current viewers and when X number of them are close enough to the location, display the specific message.

What are you using to keep the data “real time”?

As mentioned I am using the code in the example link with a few modifications to calculate some extra info from the person viewing.

That code uses the basic geolocation.watchPosition functionality to continuously update a persons location in real time.

I have successfully managed to get half of what I need, I have it displaying individual viewers and showing them if they are close enough to the desired location yet or not, but I have not figured out how to combine everyone so that it can know how many people are there and if enough people are there at the same time and display a message on the page only when enough people have arrived and are all there at the same time.

What about using this? https://github.com/googlemaps/android-maps-utils

Thanks for the info, it looks interesting although quite complex with lots of different features, I am sure I could use it in some way, I already have the basic map functionality able to show the current viewer their own position on the map and calculate how far away they are from the specified location.

How exactly were you thinking that I use it with regards to being able to check how many people are at a specific location a the same time and alert them once the right number of people are met? I can see some possible use for being able to display multiple markers on a map, if I could get everyone’s current location into a KLM file or something and use the code you suggested to read that info and add markers to a map etc.

But it still begs the question, how do I constantly save and update X number of people, possibly anywhere from 5-50, and be able to not only display them all on the map (updating constantly as they move), but count how many of them there are, check if they are within the right distance from the specified location and only display something on the page when all of them have arrive at the right spot.

I had thought about the possibility of somehow using a database in some way to be able to store all of the active viewers and constantly update them, until the right number of people are there and then somehow update the page to alert them with a message, but not sure how to go about doing this without overloading things as there could be a lot of people viewing the page at once, each updating their location informaton every few seconds, so I would need a way to limit how much strain it puts on the server whatever I end up doing.

What about sockets or firebase?

PS. I’ve not used these but I think they are designed for what you are doing.

Thanks I will look into them both and see if they can be of use.