I'm working on a google maps app for some time now. The app is using Backbone & Backbone.Marionette. A screenshot of what it looks like can be found here: https://www.facebook.com/photo.php?fbid=566101353505241&set=a.516037321844978.1073741832.145077908940923&type=3&theater
For the last couple of hours I've trying to find advanced examples of using Backbone Router to keep the app state, but I couldn't find anything more advanced than examples with single route parameters: #about #notes etc...
Here is what I'm trying to do.
When the user moves around on the map, I change the url to reflect this: /:lat/:lng/:zoom
When the user selects any marker from the list on the right, then I change the url to: /:lat/:lng/:zoom/hotspot/:id
The list on the right is using Backbone.Paginator. So when the user clicks on any page the url will change to: /:lat/:lng/:zoom/page/:id
now if the user clicks on a hotspot I want to change the url to: /:lat/:lng/:zoom/page/:id/hotspot/:id
If for example the user used the directions functionality in the app I want the url to reflect this:
/:lat/:lng/:zoom/direction/:start/:end
If he uses the list with hotspots before or after he used the directions app I want to change the url to: /:lat/:lng/:zoom/direction/:start/:end/page/:id/hotspot/:id
You get the idea. I want to make it possible for the user to use any part of the app and share the link with anyone after that.
As I said I'm using Backbone.Marionette - so my application has a lot of sub apps responsible for the map view, list view, directions view etc.
My problems are as follow:
How to use backbone.navigate properly? When the user moves around on the map - I can easily change the /:lat/:lng/:zoom . But now if the user clicks on any hotspot and I just pass backbone.navigate('hotspot/200') -> the url will change to just #hotspot/200 and the part with the lat/lng/zoom will be lost. Same goes for any other url I listed above. If I just pass the part that needs to be added to the url, backbone will clear the whole hash and add my new part. How do you deal with that? Do you have a global function that keeps track of all possible url combinations and just adds or replace depending on the current situation?
If we take this url for example:
/:lat/:lng/:zoom/direction/:start/:end/page/:id/hotspot/:id
/:lat/:lng/:zoom - this part is needed by the map app direction/:start/:end - this part is needed by the directions app
page/:id - this part is needed by the hotspots app
hotspot/:id - this part is needed by the hotspot app
How do you manage such urls? I would basically need to call the above apps one after the other in order to recreate the app state.
Is there any way to do all this without going mad? Any examples of advanced Backbone Router (or even just HTML5-history) usage or tips are welcome!
