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.
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
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?
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.
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 ?
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?
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.
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)
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.
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.
