After spending lot of time with the KML documentation and C, It was time for me to go beyond the associated platform restrictions (C programs are compiled for a single platform) and start doing the computing and displaying maps on the web. This sparked my venture into the Google maps API and JavaScript.
The starting point of this entire exercise was my short internship with Report Bee (A tech start-up with the vision to revolutionize the education industry). My job there was to inquire into the ways in which geographic visualization can enrich the analysis of the data present in the results of public examinations in Tamil Nadu and device a frame work for its implementation. It was an amazing ride to for me to start from absolutely zero, with an oversimplified view of things and vague ideas and go on to find out that the whole thing is neither simple nor easy as I thought. Though the exercise proved to have an extremely large scope to be covered in such a short internship, I picked up a lot of knowledge while figuring out my way.
My first challenge, after getting lost in the quagmire of tools and platforms, was to finalize a platform to learn and work on. The main dilemma was between Google Maps and Open Street Maps. While I liked the freedom and openness of OSM with the base data for the maps, I also found Google Maps really compelling, with its relatively simple JavaScript API and extensive documentation. Though there was a lot of restrictions introduced in Google Maps recently, I chose it over OSM considering its simplicity and my previous experience with KML. Moreover almost all the maps API (Google maps, Map-Box, Bing Maps etc.) had JavaScript in the core so I thought may be it won’t be hard to learn to use others platforms if I get used to one of them.
So after almost three weeks of wrestling with Google Maps API and JavaScript. The end result was that I was able to produce a website with a custom styled map highlighting some of the features in the base map with some kind of user input to point location and has an implementation of Geo-coding API for finding and navigating to addresses. The whole process was extremely interesting and especially JavaScript surprised me with its simplicity and flexibility. I have attached a screenshot of the result below and the website can be viewedhere. (http://balaspa.50webs.com/mapv2/)
The map highlights all the parks in green colour. The instruction are as below
- Zoom and Pan can be done through the mouse as it is done in Google Maps.
- Clicking on the map creates a Placemark and adds it to the map.
- The ‘Eye’ button on the top right corner toggles the visibility of the Placemarks.
- Double clicking the eye clears all the Placemarks.
- The search box below navigates to the location typed on pressing the ‘return’ key.
Since I have covered a lot of basics in this exercise (Customized Base map, simple ways to input and output data, rudimentary ways to build a UI over the map), my next step would be learning to organize a data sets in a server side database and plotting it on the map and also to look into the Open Street Map API parallelly.
Update (21 August 2013): Was randomly reading about the Google speech recognition API for chrome and stumbled upon a simple way to integrate speech based input fields in websites. Updated the search box with speech recognition. In my trials it looks clean enough and works well enough. Wish there were more options in controlling the behaviour of the box but I think its just a matter of figuring out.
Update (21 August 2013): Updated the speech recognition again. Now press “ctrl+shift+.” and speak the place name the page directly takes you there. No more clicking and pressing enter.