Forum Documentation Showcase Pricing Learn more

Real time tracking with maps


#1

Hello,
I’ve just started programming with bubble and I’m really liking it.

I’m building an app that will keep track of a fleet of buses and show them all on a map.
Right now I was able to create an input area and display the various markers with the information I wanted.

But I’m having a really hard time keeping the positions updated in real time.
I want to show my users where the buses are so they can keep track if they’re arriving. I’ve tried run an script every 5 seconds but I got two problems.

First: it didn’t work. I tried updating the “thing” position and updating the markers on the map but neither worked.

Second: having an script every 5 seconds is just impractical. Since the bubble’s plans are limited by runs calls I would easily blow my limit if I were to do that.

My question is: is there a way of keeping my map’s information in real time?
Maybe there’s an API (even a paid one) that allows me to keep track but doesn’t need to run an workflow every 5 seconds. Or a Javascript code that I can add on the application.
If you have any suggestion or idea please let me know and I’ll try it as soon as possible.
That’s really the key to make this project happen.

I’ve searched on this forum for an answer my couldn’t find one that worked.

Anyway, thank you all very much for the help.
Luis Martins.


#2

Hi Luis! Where is the bus data coming from?


#3

Hi, thanks for helping.

There’s an input area where the user can choose the line and the time of departure. There’s a “thing” called bus that has 3 fields: line, time and position. I assign the current geographic position to this bus.

I also created a field for “user” called “current bus”.

So my map has a list of markers and does a search for “Bus” with no restriction. That’s where I’m pulling the information from.

I hope my explanation was clear, if anything’s yet to be better explained just ask :wink:


Distance syntax
Distance syntax
#4

Hi Luis,

Sounds like you’re after web sockets, which as far as I know isn’t supported on Bubble, so you could:

  • Setup a web server, with node or php for example, which publishes updates realtime to each client.
  • Add some javascript to the Bubble page to subscribe to the service.

I haven’t needed to do it myself yet, so I can’t recommend which particular library is most suitable.

Edit: web sockets aren’t compatible with older browser like IE 10…
http://caniuse.com/#search=websocket


#5

Thanks @mishav.

I have some Javascript coding skills, not enough to make a full app but I’m able to write some code, so I think I’ll first try to add javascript to my app.

Any idea or tips how I should get started? Any documentation that would help?


#6

How did you go with this @luisgfmartins?

Javascript can be added to a Bubble app in the page header (good for loading libraries), and in a HTML element. In the HTML element you can include dynamic values, when they change the HTML is “re-run” so that is a way to send data from Bubble to the javascript.

Getting data back to Bubble is a little trickier. The most straight forward at the moment is to have a text input element, have the javascript find it by its placeholder text, then alter its value and trigger its “change” event.

A simple example:

More complex example:


#7

Could you get the user to do the refresh ?

So set a timer so that the page “times out” after say … 10 seconds. Then the user presses a button and it refreshes ?

Although maps do update “on their own” when adding new markers. Wonder why they don’t when the address is updated ?. Maybe you could exploit this by deleting and recreating each time ? You could run some sort of CRON job to pull the markers and call a Bubble API ?

Interested to see this pans out.


#8

Just out of curiosity here, when you say you assign the current geographical position to a bus, that bus has some sort of mobile device with an internet/location connection that detects the location?


#9

Thanks very much for the help.

I haven’t yet got the time to site and try it out, but I’ll experiment with your approach.

I also found the Code-free startup course that might have what I need but haven’t purchased it yet.


#10

The idea is to have the driver start the gps tracking on a phone before starting driving.


#11

That’s an interesting approach, refreshing the page I don’t think would be ideal. But remaking the map it might be possible.

I’ll try to work on this way of doing too. I’m also interested if I can make it work with some Javascript/HTML code.

What about this CRON job you mention? I’m not familiar with it, could you give a brief explanation so I can search how to work with it?

I’ll sure post here on the forum when I make some progress, I haven’t worked much on the app these last days due to work and college. But after I figure it out I’m going to write how I did it so people can get to the solution easier in case they need it too.


#12

Are you certain that the map doesn’t already auto update?

I did a small experiment, using two edit fields auto-bound to a database thing’s fields, manually setting a new address as a position. The map auto updated, even when open on a different browser.

(I edited the time delay after recording this, it was more like a second or two between updates, due to manually editing the address)


Any way for an application to know precisely which people have it open?
#13

^ would be my guess too. It works for additions to the database, so don’t see why updates wouldn’t work but I didn’t have time to test it as well.


#14

Consider that updating a field with auto-binding doesn’t add to the workflow count, and neither does loading / auto-updating markers on a map.

Using javascript, can set the geographic position from Bubble into the Input field, and this auto-bound with a field in the database, updates the position. Wrap this in a Bubble timer event, this method is viable, and I just tested it, pretty fun walking down to the park and seeing my position update on a map.

You’d want to check that the position has changed before updating it, and have a generous interval so as not to spam the servers.

Also, it might be more efficient to update via lat/long, rather than address, if you can figure out how to get that into an auto-bound field.


#15

I wasn’t getting the auto update simply by setting the address as a dynamic value.

I’ll try your last tip then since it seemed to work. Thanks for the feedback


#16

did you tested it on a new app? Would you mind sharing it so I could take a look at the workflow?


#17

Sure thing … I added the check for location not changed, to reduce spamming.
editor
runtime


Autobinding a thing from a group to user
#18

Thanks. You’re awesome!


#19

Hey @mishav,

Do you know if it’s possible to track the route taken by the bus and save that data.

For example:

  • bus clicks start route
  • will bus is driving, app tracks the route
  • saves route data
  • able to view the route taken by each bus

Would you know how to do this.

Thank in advance,
Jonathon.


#20

Probably the nicest way to do it is integrate with Google maps “Direction Services” API. Maybe the Bubble Google Map API could be leveraged, or maybe it’d need a new implementation.