The UI Dev

Posts

Showing posts with the label shreerang patwardhan

How I authored a technical book?

Here is the reason why I have not been writing over the last 6-8 months! I was busy writing my first technical book - Mastering jQuery Mobile with +Chip Lambert and what better subject to choose than jQuery Mobile. I have been extremely lucky to get the opportunity to author a book with Chip. This project started off about a year back, when I was approached by Packt Publishing to review this book that was being written by Chip. I instantly grabbed this opportunity, as I was getting a chance to review some work on a framework that I totally love. Chip had about 4 chapters complete at this time and I had provided my comments on the content of these chapters to the best of my knowledge. I was waiting for the further chapters, when I fine morning, I received a mail from the content editor of the book... I thought that it would be the next chapter for review. But nope! It was him asking me if I would like to author this book with Chip, to speed up the process as C...

India's digital environmental atlas...

The environment ministry has launched the first digital environmental atlas of India on the occasion of Earth Day. An interactive website of state of environment atlas of India depicts forest and biodiversity in green, water resources in blue and air pollution in brown colours. The atlas provides flexibility and versatility for users to visualise environment spatial data using geographic information system (GIS) options. The atlas which is the first of its kind with regular updates has been developed by an NGO Development Alternatives (DA) with the support from the Environment Ministry. The atlas is available on www.soeatlas.org and has features such as pressure-state-impact-response (PSIR) framework analysis, where all the maps are presented and displayed for the users' benefit. ...

Retriving co-ordinates...

We have seen 2 Google Maps API v3 examples wherein we have retrieved the latitude-longitude co-ordinates of the point of click on the map. In the first example we have displayed the co-ordinates in the information window and in the second , we have displayed the co-ordinates in a form in the information window. Today we will create a code to retrieve the latitude longitude co-ordinates in a text box while simultaneously a marker appears on the map as well. So, here goes the code. <html> <head> <title> Google Maps API v3 - Adding marker on Click and retrieving the co-ordinates in a text box </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map; //When using event as a parameter to a function declare map, strictly as a global variable fun...

Form info window

Today we will look at a Google Maps API v3 example to add a form in the information bubble! This is usually required when we wish to accept some data/information from the user! This data can be saved to a server in the form of an XML file or a database! The information can then be retrieved back at a later stage, when necessary! In this example we will only look at form in the information bubble! The connectivity part with the server will be discussed in another post! So, today's code snippet is as seen below! <html> <head> <title> Google Maps API v3 - Adding marker and info window on Click and creating a form in the infowindow with the lat-lng information in it. </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map; //When using ev...

Static Info window only...

In our last Google Maps API v3 example we saw how info windows appeared on user click. We saw why such a thing is necessary and the benefits of that! Today we will look at a very simple example, where in we will place a single marker on the map! Something like a simple marker example in this post! Our today's code is below! <html> <head> <title> Google Maps API v3 - Simple info window only example </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script type="text/javascript"> var map; function click_window() { map = new google.maps.Map(document.getElementById("map"), { ...

Jugnu: India's first Nano Satellite

IIT-Kanpur with its nano satellite 'Jugnu' has set new highs in the field of space research. A team of students, working under Dr NS Vyas (the visionary man behind the making of the nano-satellite) and other faculty members of the institute, have successfully made the country's first nano-satellite to be developed for the first time by any educational institute. The development of the Jugnu started in the year 2008 with a team of 3 students. With time, the team has grown to the size of more than 50 students ranging from 1st year undergraduates to final year postgraduates and 14 professors from different disciplines to complete this challenging mission. The satellite has been handed over to two ISRO scientists, DVA Raghav Murthy (Project Director, Small Satellite Projects) and Dr SK Shiv Kumar (Director, ISRO sat...

Playing with the markers and info window bubbles...

In the last few posts, we have seen some marker examples and some information window examples. Now, lets do something interesting combining these two things. Just writing that "This is an info window" in the information bubble is not very interesting! And I know this...Have gone through the same phase! So, today we will do something interesting! We will display the latitude- longitude co-ordinates of the point that the user clicks on the map! Doing this is not at all complex! Copy paste the following code and you will see for yourself a map coming to life! The output of the above code looks as seen in the result section above! If you have any queries regarding the above code please comment on the blog post or feel free to contact me at my mail ID .

Only information bubbles...

After displaying markers and markers with info windows, we will now display only info windows on the map. So our aim becomes, placing an info window on a google map when a user clicks on the map. Now, the first question that will pop up in your mind is why do we need such a thing? To answer this question let us consider a simple example. Consider that, when an user clicks on a map, a marker appears with an info window and you want the user to enter some data in a form in the info window and save that data. Now, if the user enters inconsistent data, there would be marker on the map, having no valid information! The marker would then be rendered useless, with no information! Something like a dangling pointer! Now, if you haven't understood a word of this; don't worry. You will soon understand the importance of this example! So, withou...

Code for fun..!

Just wrote a small 3 lines shell script which is capable of searching any random place on Google Map. Try it on your linux boxes! For those who prefer windows, I am sorry to say that this code will not run on your machines. I work on linux system and so I am using some linux specific commands in the script! So here goes the shell script! while [ $? == 0 ] do zenity --info --text="Do not use spaces between multiple words. Instead use the + sign. For example 'new+delhi and not new delhi'" search=`zenity --title "Google Maps Location Search" --entry --text "Search: "` if [ $search == ] then zenity --question --text="Do you wish to search another location?" else firefox http://maps.google.com/maps?q=$sea...

A marker with an information window

Following the sequence, I should be discussing a marker based example! Markers loading from an XML file. But, we will disrupt the sequence for the sole reason that I don't want to discuss comparatively tough examples as of now! So, we will jump on to a simple example to display an information window or the info window bubble as it is popularly known; along with a marker! Let's have a look at the following code. This is a simple code which will place a marker at "India" with an information window attached to it which appears only when the marker is clicked! The code goes as below: <html> <head> <title> Google Maps JavaScript API v3 Example: Simple Infowindow </title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script type="text/javascript"> function initialize() { ...

GIS India News Titbits

Treading on the foot steps of Gujarat for improvement in governance, the Himachal Pradesh government on Wednesday, 10th November 2010, announced to set up geo-informatics centre for planning with help of the latest digital techniques under supervision of department of science, technology and environment. Chief Minister Prem Kumar Dhumal said the centre would be set up on the lines of Bhaskaracharya Institute of Space Applications and Geo-Informatics (BIGSAC), Gandhinagar, Gujarat, and would be named as Aryabhatta Geo-Informatics and Space Applications Centre (AGiSAC). Departments that are directly linked with common man including Revenue, Forest, Education, Health, Agriculture, Horticulture, Panchayati Raj and Rural Development would be the first ones to be taken up for planning under the project by digitisation of their record. ...

Multiple markers...

It rarely happens that there is just one point of interest or just one location that you would like to mark! Generally there is a bunch of markers that appear on the map! Specifically, you want a list of latitude and longitude pairs representing the points of the markers you'll plot. To store the list of points, you can combine the power of Javascript's array and object constructs. An array stores a list of numbered entities. To access the elements of the array, you must use their numeric indices. So array[0] will point to the first element in the array while array[n] will point to the nth element in the array. I will use the following piece of Javascript code to demonstrate how multiple markers can be made to appear on a map using the array structure and the for loop for iteration....

Celabrate GIS Day!

The countdown has begun...Only 4 days to go! On the 17th of November, 2010, the world will celebrate "GIS Day". GIS day is held each year in the third week of November, on the Wednesday during the Geography Awareness Week, a geographic literacy initiative sponsored by the National Geographic Society. GIS Day is playing a powerful role in creating geographic awareness throughout our world. GIS Day provides an international forum for users of geographic information systems (GIS) technology to demonstrate real-world applications that are making a difference in our society. More than 80 countries will participate in holding local events such as corporate open houses, hands-on workshops, community expos, school assemblies, and more. Any organisation t...

A simple marker example

Once you have set up your map as seen in the earlier post you can now place a marker at your point of interest on the map. A marker is a symbol that is used to point something interesting or important on the map! A marker can be overlayed on a map statically, dynamically i.e. when a user clicks on a map, a marker appears on the map. Markers can also be loaded from an XML file, a plain text file and also a CSV file. We will be seeing an example of each in the subsequent posts. Later on we will also see how to add an information window to the markers on the map! But that will be at a later stage. Let us have a look at the following code first which will add a marker at the Rajya Sabha, New Delhi. And here you are...You have placed a marker at your point of interest. The output will look as seen in the result sect...

Geocaching - The world's largest treasure hunting game!

Geocaching is a high-tech treasure hunting game played throughout the world by adventure seekers equipped with GPS devices. The basic idea is to locate hidden containers, called geocaches, outdoors and then share your experiences online. Geocaching is enjoyed by people from all age groups, with a strong sense of community and support for the environment. The following video has been taken from "Geocaching - The official global GPS Cache Hunt Site". This site will give you a brief idea of what Geocaching exactly is! On May 2, 2000, at approximately midnight, eastern savings time, the great blue switch* controlling selective availability was pressed. Twenty-four satellites around the globe processed their new orders, and instantly the accuracy of GPS technology improved tenfold. Tens of thousands of GPS receivers around the world had an instant upgrade. ...

Simple Map using Google Maps API v3

Let us begin with our first example using Google Maps API v3. Even before a marker - the most basic element of a map, appears, the map should be seen on the screen. Let us have a look at the following javascript code first. We will then have a look at the elements in the code. Ta-da a map in action! This map is centred at the Sansad Bhavan, New Delhi, India. In the above code the head of the document contains a critical script element. Its src attribute points to the location of the API on Google's server. In API v3 there is no need to obtain a key for the API. The remaining is simple Javascript. Happy mapping!!!

My first blog!

" W hy is it that there are no Goolge Maps API examples which show India specific data?"...This question kept bothering me all through my learning phase. I always thought why aren't there any examples that use a map which shows Indian locations. Anybody who is new to Google Maps API application development would love to see a location that he knows of on the map! This is what I longed for all the way through and now have decided to put up simple examples and other supporting data for building customised simple Google Maps and all will show locations in India! When starting something new, if one finds something familiar out there, then it gives a feeling of comfort! And this is what I will try to provide to all those out there who are facing a similar problem that I faced! I am not an expert at Google Maps API, I am learning too...But, I will like to help out people along the way! So, all comments from the novice to the profession...