Deleting a marker from the InfoWindow - FINALLY

Whew. That took some time.


deleting a particular marker

Clicking on the map places a marker and clicking on that marker opens up an Info Window (to capture information about the road that we added). The info window also has 2 buttons - one for saving the marker info and another for deleting the marker.

The deletion bit too ages. Finally got it working with some hacky code (yuck !).

The Bite !

The lack of tests bit me today :-(

All these days, I was not able to save my routes on the server and I had no idea why this was happening.

Today with a LOT of help from Pratik (the guys who is providing this awesome service called FreeOnRails, on which this app is hosted for now) I was able to FINALLY figure out what was happening, and nail the bug. Something that a simple test would have nailed right on, instead of us wading thru server logs and messing around with file permissions.

Whew. But on the bright side, got to have a chat with Pratik and get to know him. Hats off to this guy. If only more people would be like this. I mean, he spent like 2-3 hours just looking at the issues that I was having. Awesome, awesome. I was totally blown away by this. I didnt know him, and he didnt have to do this as he was not gaining any thing by helping me out. Hats of to you dude !

Finally !

a row in the database

Might not look like much. But to get that one row into the database, Rajesh and me had to manually muck around with the app for almost 2+ hours to figure out what was happening and why the application was not saving to the database (we were not able to get the loggin to work, so had to work on some error logs)

I guess this is where not having tests and not deploying fast enough leads to problems. I dont have any tests that check the sanity of the system (I felt that they would slow me down) and once I got the application working locally I didnt bother deploying the application onto the FreeOnRails server incrementally to see if it works. Just did a big bang deployment a few days back and was just not able to save the routes. (I cant imagine how huge products are actually coded up this way, without writing tests and not releasing fast enough)

Anyways. Into the early hours of the morning, we finally figured that it was some relationship issue.

Thanks Rajesh.

WOW

wow.

Was still looking at tiddly wiki today. Stumbled upon ServerSideWiki. And it simply rocks !!
Having a wiki is so much better than jotting things down on the paper when your on the comp.

So got an account and am using it to keep track of things that we have to do.

Firefox

Firefox launches in Bangalore. A small article in The Hindu. (this was the press conference we missed)

Thanx Yodha for pointing out this link. Was surprised that Times of India didnt have any news about the unleashing of these bikes onto the public. But then I guess the release didnt have any scantily clad women or happening page 1-2-3 people, hence didnt fit the 'culture' of the paper :-)

wiki

Needed a place where we can jot down points (like bugs on the site)
A wiki looked like the best option.

Tried Tiddly Wiki. Somehow this didnt seem to work too well. Was not able to save documents and firefox seems to be behaving in a very odd fashion with tiddly wiki.

So sticking with Seed Wiki for the time being. But need to figure out how to get Tiddly Wiki up and running.

Saving a Route

When a user finishes creating a route and wants to save it, we wanted to capture some info about the route as well as the user (we wanted to keep this at a minimum, as we know what a pain in the ass it is to keep typing in information on the web).

I wanted to use LightBox for this part of the application. This basically provides a neat effect of a modal window. So the users is completely focessed on this box !! very impressive. Had noticed this some time back. There have been multiple improvements on what Lokesh Dhakar had initially written.

1. Particle Tree - Lightbox gone wild !
2. Leightbox

Decided to go with the Leightbox version as it seemed a tad faster.


I create a route on the map



and on clicking 'save' I get this modal box (a lightbox) asking for for some info. And I have an option of saving the map or continuing what I was doing

Whew. This took some time, as I was unable to figure out what was happening with the Javascript.

update on Source Control

Got an account on RubyForge. So have source control up and running.

Initially had played around with darcs. Darcs is pretty awesome. But for some reason darcs on my machine was not able to connect to my project repository on the freeOnRails server. So after a day or two of tyring different options I just gave up on this idea.

Besides having used subversion for projects in ThoughtWorks, there is some comfort factor !

Code Snippets

Hot off the presses : BikeToWork.info on CodeSnippets

CodeSnippets is the del.icio.us for code.

If you havenot heard about del.icio.us then I suggest you go over there right now and create an account.

Created a section for BikeToWork on CodeSnippets. My idea was to post all the incremental code snippets (the nicer ones) here, as a backup (cause right now we dont have any kind of source control) and others might also benefit from this (I hope)

Hey, I heard a gasp when I said this project does not have any source control. Well we dont have tests either :-P So there !!! :-)

Contact Us Popdown

Whew. This took some time

On clicking Contact Us, I wanted this small translucent drawer to drop down, which had the contact info. Taking the user to another page, just to give contact info, is a waste of time and clicks.

So that was the idea.

Basically used Script.aculo.us and CSS to get this working. This took some time, but then that was because I was doing it for the first time. Its actually pretty simple.

Used Script.aculo.us Effect library and performed the BlindDown and BlindUp Effects and
used CSS to give the translucent effect for the drawer.

When a DIV is made translucent, all the containing DIVs also inherit that property. Hence the contact information inside the drawer used to become translucent too. Used this documentation to get around the issue.

Now all thats remaining is to figure out why I cant click on the links inside the drawer, and to position the contact information nicely. And add rounded corners to the drawer ;-)




'#contactUs': function(e) {
  e.onclick = function() {
      if(Element.hasClassName('container-popdown', 'up')) {
      new Effect.BlindDown('container-popdown', {queue: 'end', duration: .3})
      Element.removeClassName('container-popdown', 'up')
    } else {
      new Effect.BlindUp('container-popdown', {queue: 'end', duration: .3})
      Element.addClassName('container-popdown', 'up')
    }
  }
}

The above javascript uses Behaviour (another awesome library, that makes writing javascript a pleasure) and Prototype to peform the up and down action of the drawer.

The complete code snippet on CodeSnippets.

Designing bikes for toddlers !

Neat one.

The amount of research and design that is going into bikes(whenever I say bikes here I mean a Bicycle) these days is amazing.

in the database

whew !

with the hack that I had mentioned before, was able to debug the development and was able to find out exactly what was going wrong. Was trying to get the path information that I created on the map into a database so that I can store routes.

The result.


The path I created on the map, in my Database :-)

Yaaaa

Unbelievable (whatever the spelling maybe)


if you look at the image very carefully you will realize why !

But yeah. With this hack a MAJOR development-deployment-testing cycle headache has gone out of the way. Finally, coding is a pleasure again ! :-)

Not going to make it

I dont think we will have anything substantial up and running by day after :-( (for the press release of Firefox)

We wanted to get some basic screens on the Available Routes Section and get a nice 'business' card so that we can raise awareness about this site.

But really difficult to work on this after work.

creating the first map

There is hardly any functionality in the application. Just have a basic Map on which we can click and add markers and chalk out a path.

Just created the first path by marking out the route I take to cycle from home to work.


whew. Finally marked the route till the office. Humm .. it was not that simple trying to mark a route from home till Domlur !


The bigger picture of the route I took. The Markers (the baloony things) look ugly. Have to change them soon.

But yeah. There we go. The first map from BikeToWork :-). Have to now add it to my directions page . Tomorrow, damn sleepy now.

Javascript development

Stumbled upon an interesting Plugin for Eclipse today. JSEclipse. Very useful when you dabble a bit in Javascript at work and during play

Wooohooo !! Logging in GMap Api

Just stumbled upon this now.

Was wading thru the V2 Api of Google Maps and came across this Gem.
While developing an application using Google Maps API you actually have a logger which outputs log statements into a small window on the page.


The logger at the bottom, in our app.

Is that awesome or what. No more using Venkmans JS debugger to figure out what the hell is happening in your javascript I guess. Atleast for the basic stuff.

As I dig deeper into this API the more I appreciate it. Awesome work guys.

... and we have our first screen !!!

There we go. Apart from a few frustrating css moments this was a piece of cake.
Need to work a little bit on the background (need to airbrush the sides so that we dont have distinct edges).

But yeah. The site is up and running.

Bare necessities

This entry has been long overdue and after a lot of prodding from Rohan, I finally decided to post it. Reason for delay – mostly because of the nature of our conversation on this topic and paaartly because of my laziness ;-)

We were discussing on how to go about the UI design and both of us zeroed-in on the philosophy of "SIMPLE", that’s when it turns out nice (think bikini :-)

- Just what you need not more not less
- No paper clips

Simple, clean, spot-on.

up n running

While we are building the app, we decided to keep the costs down and use FreeOnRails (a free Rails hosting, offered by Pratik) as a test bed.

So today decided to figure out how to get any rails application running on th
e hosting offered by FreeOnRails.

Took a lil time, but with these awesome instructions the test_site was up and running in no time :-). Yaaa !!!

Busy week.

Past week has been kinda busy, so that has translated into me doing nothing on this project of ours.

Nikhil has been churning out some UI for the site though.














This is one of the designs that he came up with, and I think we are going to start out with this one.














This is the other one














logo/design for our card. We wanted to have some small cards printed out so that when we cycle to work, we could hand then out to other fellow enthusiasts.

I love the term 'sustainable transport' :-)

Source Control

Using Darcs for source control

Rajesh had recommended this some time back, but never checked it out. Until now.
Must say the whole distributed funda is very cool.

Damn easy to install (just copy a file). And very simple to setup the code repository.

Two week deadline

Last evening we paid a visit to the firefox showroom on CMH road, Bangalore. (they FINALLY opened shop !!)

While we were checking out the bikes the M.D of the company gave us a call and invited us to the press conference on the 24th of this month, where they were planning to release Firefox in Bangalore with a big bang.

That was not the exciting part. The exciting part was when we came out, Nikhil suddenly mentioned that we should do as much as we can and try and get this app out by the 24th, so that we can maybe tell the press about it and what our plans were for Sustainable transport with respect to bikes. Thats like less than 2 weeks.

Sigh. There is a ton of stuff to be done, and somehow it seems like we get time only during the weekend to do it. Still in the spiking stage. Nikhil is working on the UI and Im still trying to figure out how to use GoogleMaps for this app.

Looong way to go. But atleast there is some kind of goal now.

GoogleMaps !!

Wow. The API Absolutely rocks.

I think we are gonna go head with Google Maps. Just have to stick around in Satellite View so that we can get some detail.

var map = new GMap(document.getElementById("map"));
map.setMapType(G_SATELLITE_TYPE);
var bangalore = new GPoint(-77.585722, 12.916490);
map.centerAndZoom(bangalore, -1);
map.addOverlay(new GMarker(bangalore))

The above script will show you a GMarker Overlay in Satellite Mode on Google Maps of where I stay !!

Neat, and Im now excited like hell :-)


There are some awesome links on the net on Google Maps and how to use the API, Will post some of the ones that I liked here sometime. Till then am dumping all the ones that seem to have some kidna decent info onto my del.icio.us/GoogleMap

Could not resist

Dont want to disclose what we're building until its ready. Not sure why, but I guess there is no point in telling others about it until there is something (however small) to show for it. I hate these new Web 2.0 sites which look soo funky (the home page), which take your email id and then tell you that they will inform you when they are up and running. Aaarrgghh !!

But could not resist adding an inconspicuous lil link to this blog on my LJ Blog. :-)

Mapping a route

I guess Nikhil should be writing this rather than me, cause he has done more work on this.

After having scrapped our initial idea of putting up a home page, we decided to figure out what was the epicentre of our application and do that instead. So we discussed this over a jog, and came up with the Route map itself as the epicentre of the application (yeah, it was obvious wasent it :-) ).

Anyways. India has not been mapped as well as some parts of the world. Rather let me put it this way. It has been mapped really well, but this information has not been made available to the aam-public due to various issue. Some people are trying to change all this. But looks like its going to take time, and were looking at getting this application up today (yeah, just a saying I guess. Dunno how long this will actually take)

We belted out out choices to display a route that a cyclist would take and came up with the following options
- Draw a map ourselves - Ugh.
- Use Google Maps (that too the satellite view, cause we dont have enough detail at the roads level)
- use the maps provided by eGovernments Foundation - These guys seem to be good and say that they will have an API soon.
- Buy a map of Bangalore and and mark a route on it and use it on the web page (either scan it or take a snap of the area) Some awesome detailed maps are available in book form, but then this will be infringement of copyright, and we really should not be doing this.
- Use photos at all landmarks and at every turning all along the route to show the route. But then this can be extremely user-unfriendly and a sure shot way of making sure that out application will have only 2 routes (the ones that Nikhil and I take to get to work :-) )
- Just describe the route for the time being.

well. There are a ton of options. And none of them look too promising at this point in time.

When we spoke about this last we had thought we would try taking a Bangalore map from the GIS department, just to get the site up and running.

But then there is still hope, was digging into the Google Maps API and it looks promising. Looking like with some Javascript and Google Map API and with the Satellite view we should be able to get something up and running.

Searching for the mojo lead me to a few interesting sites

eGovernments Transport - Bangalore Based company looking to give google some competition
OpenStreetMap - An Opensource initiative in the Mapping World
Mapki - Good Info on Google Maps
Google Maps V2 API
NASA World Wind Project - Have to check out more on this

hosting and technology choices

Since I am already working on a proper Rails application during the day at ThoughtWorks Rails seems to be the best bet for this app.

Temporarily hosting the site on FreeOnRails. This place is driven by this dude called Pratik and he is proving 100Mb of space on his server free of charge!! Thanks a ton dude. Its for rails applications and has a ton of decent features.

Going with MySQL, as this is provided by default on FreeOnRails. But then, with Rails the Database is really not that big an issue. Can easily switch between Databases as an when required.

Apart from that the actual maps to show routes seems to be a pain in the ass rather than the technology choices. Guess that goes to say how much Rails rocks as a web framework (if you can confidently state that technology choices is not that big an issue, especially when this is one of your first web apps).

www.biketowork.info

*under construction as of now*

Just could not wait any longer. So just went ahead and picked up a domain name from Yahoo last nite hopefully www.biketowork.info should be up and running soon :-)

Designing the site

Had recently read a nice post on the Signal Vs Noise blog about epicenter design. Awesome read. So we decided to develop our webapp with this in mind and kinda sketched out what we thought the pages should look like


This was the first revision that we came up with


and this is the second

When we went thru the sketches it all looked ok. But just now when putting together this post, re-read the Epicenter Design concept and suddenly looks like we have gotten it all wrong. Looks like we have overlooked the basic Epicenter of the app and are building the other things around it first !! A big no no according to the 37Signal folks. I think its back to the drawing board. Have to have a chat with Nikhil about this.

here and here are two more interesting reads posted by JamisBuck