Soccer World Map

It has been a while since I got my hands into Google Maps and JavaScript front – end development, because in my actual company ( Taleo – Oracle ) the applications we develop are very different from those I develop in Korem, and I don't touch anything related with front-end coding. Also, I wanted to test the one nice discovery I made: the Bootstraps framework. The main objective was to code something using a mix of Bootstraps, GoogleMaps and JQuery, so I have the idea to show the location of the professional soccer teams from all over the world. So here is the result:


Click to go to read the full article
Click on the image to go to the application


Boostraps
I read frequently the Joomla magazine and there I discovered the new 3.0 version will be packed with the twitter Bootstrap framerwork. Briefly, is a well defined and designed CSS framework that will let you build adaptable - responsive web pages layouts quickly.

If you are a developer who doesn’t want to lose time creating all the css to arrange the elements in the screen, this is the framework you have to use. Is based on a simple but powerful css grid system. It includes also a nice set of html and JavaScript components that are easy to add in: menus, bars, button, navigation components, etc.

One thing I was disappointed for was I thought that the look and feel will be the same in all browsers: Bootstraps made use of HTML 5 features like css div rounded corners or form input field place holders, so I got a not so nice surprise when I loaded the page in IE8.
Talking about IE, another bad disappointing thing was figuring out that IE9 didn’t implemented the HTML 5 place holder feature at all! So I had to add an IE JavaScript hack to do it. ( expect a couple of years for IE8 to become the new IE6 of web development ).


Google Maps and Clustering
The map was developed with the Google Maps 3.0 API and using a clustering library for all the markers ( soccer teams )that are shown in the map. The clustering technique consist of grouping the points that are close enough in an area on the map, and put only a marker that represents the group of those points.

We used this technique in RSS Mapper, and let you to increase the performance when you have several markers in the map. You will see the cluster depending of the level of zoom, because your markers will be shown more closer or farther when you increase or decrease it.

Without clustering With clustering


Image processing and uploading
I always wanted to develop / use a component that let me to upload images without the hassle of posting and reloading the full page. This time, I didn't have time for reinventing the wheel so I use a nice component, JQuery File Upload. It uses a hidden iframe technique to do the post so it simulates a file ajax upload.

One mistake I do with this component was to put a hidden input file upload and to trigger it from another html button. I thought all was fine because it worked perfectly in FireFox. But when I tried it in IE8 I got a JS error. This is because you can't have a hidden file input element for security reasons, but it seems that the only browser to let you do like this is FireFox.
To fix the problem I had to apply one css style ( included in the component ) to hide the text file input element of the file uploader item and use one different file element for each photo/image I want to upload.

Finally, WideImage help me a lot with the image processing. It has a nice and yet simple api that will let you to re-size, add or reduce quality, change file format, etc of all the images you work on. This library help me to reduce and compress the size of the uploaded files and to create the team's marker icon shown on the map.



And finally
Thanks to http://flags.redpixart.com for the country flag's icons. I plan to fill up the entire world with all the professional soccer teams, and in short term add some features like FIFA world zone categories or add results from the latest tournaments. If you want to give a hand to add some of your favorite teams, you are very welcome. :D