Barcalys Bike Hire demo web app

Hi All,

A quick and dirty demo for a Barclays bike hire / boris bikes web app, using sencha touch 2.0.1.1.

http://www.zawaung.co.uk/mobile/senc...workspace/bbh/


Really designed for usage in London (if you live outside London will have to simulate location in London, with the iphone / android simulators for geolocation).

• Displays list of docking stations, upon tapping item shows location on map and clicking on marker shows infowindow with number of available bikes, docking stations etc etc.
• Gets location of user and displays nearby docking stations (again if outside London, please simulate as above).
• A map showing all the docking station locations in London.

Not very well designed, but more a learning exercise with navigation views, google maps and sencha touch 2.

Cheers,

Nice, works well :-)

I'm implementing something similar soon with a list that when tapped activates a drop pin but I'm trying to do it in a split view for iPad.

Only thing I noticed is the drop pin appears it seems before the map is fully rendered. Do you think it will be possible to have the drop pin appear after the map render somehow?

Thanks for posting

Hi digeridoopoo,

Thanks for the reply. Not big fan of google maps api, but the most popular one out there.

Yes I've noticed that the maker is being added before the map is fully rendered. I guess the marker image is loaded first, while the rest of the map tiles are loaded.

Well initially, could try a few things: -

• Wait for the map to fully render (use a setTimeout and then display the marker with 0.5 - 1.5 second delay for example)?
• Implement callback functions for events from the google maps api (centre_changed, idle, projection_changed) or sencha touch map component (i.e. maprender, initiated, painted etc), where u then add the marker?

Hmm, will have to investigate further.

Ah yeah painted was what I was thinking of....will try something similar in my app I think.

Thanks again for posting

@digeridoopoo, no probs. I've just been lazy and used a setTimeout with 1 second delay to display the marker and infowindow.

quick updates :-

• changed layout, removed the map showing all the locations of docking stations. (Displaying 567 markers on a google map was not the best choice, especially on mobiles!)

• Added actionsheet and disclosures items on lists, so you can add location to favorites (localstorage).

• Basic formatting updated and nice confirmation boxes etc.

Need to implement user location somehow and I'll call it a day at that...

Cheers,