Skip to main content

Geodesic Polyline

    Today we will have a look at a very interesting polyline example - "The geodesic polyline". Now the first question that will pop is "What is geodesic?". Mathematically, geodesic means the shortest line between two points on a mathematically defined surface, as a straight line on a plain or an arc of a great circle or sphere.

    The next question after reading the above definition is clearly, "Why do we need geodesic polylines?" and that would be followed up with "What is this Great Circle?". We will discuss this first, before we move on to the actual example today. The example is very very similar to the normal polyline example, with just a small change.

    Having said so, I will now try to explain why we need a geodesic polyline? The shortest distance between two locations on the earth is rarely a straight line as the earth is roughly spherical in nature. So any two points on the earth, even if they are very close lie on a curve and not a straight line. Because of this fact, we need a geodesic (curved) polyline and not just a simple planer one.

    Once we understand the need of the geodesic polylines, the next question to be answered is that of the Great circle. A Great Circle is the intersection of the sphere and a plane which passes through the centre point of the sphere. As a result, the diameter of the great circle is always the same as the diameter of the sphere. So all the 'n' great circles of a sphere have the same diameter and centre as that of the sphere and all great circles have the same circumference. Thus for any two points on the surface of a sphere there is a great circle through the two points. The minor arc of a great circle between two points is the shortest surface-path between them. In this sense the minor arc is analogous to “straight lines” in spherical geometry. The length of the minor arc of great circle is taken as the distance of two points on a surface of a sphere, namely great-circle distance. The great circles are the geodesics of the sphere.The following picture will help you understand better the concept of the Great Circle.


    You can also have a look at an excellent animation explaining the "Great Circle" concept. Now that the theory is clear, let's get our hands dirty with a simple example...Here's the code...


    The output of the above code is as seen in the result section above. Please refer to the comments  in the code for any clarification required. You can just copy and paste the code in a text file and save it with .html extension. Open this html file in any browser of your choice and you will see the map in action.

    I understand that this post has become very long, but all the explained theory is the least minimum that was needed....
Labels:

Comments

  1. Sid MendirattaJanuary 11, 2011 at 6:42 AM

    very nice! keep it up!

    ReplyDelete
  2. UnknownJanuary 11, 2011 at 9:08 PM

    g8!!!!! Really nice!!!

    ReplyDelete
  3. Shreerang PatwardhanJanuary 11, 2011 at 9:19 PM

    Thank you Sid & Kiran....

    ReplyDelete
  4. PetitPoixApril 9, 2011 at 2:54 PM

    Yes! Wonderful explanation, especially the animation. It is the first time I "kind of" feel I will be able to someday truly understand geodesics.

    ReplyDelete
  5. Shreerang PatwardhanApril 11, 2011 at 7:44 PM

    Thanx Fabianna...

    ReplyDelete

Post a Comment

Please leave your comments here...

Recommended for You

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 .
3 comments
Read more

Google Street View Image API

    Street View is one of most used feature of the Google Maps and why not? You can actually see any part of the world as if you are visiting the place at that very moment. And now with the Google Street View Image API, you don't even need to carry a camera with you to the places you visit. You can take-in all the scenic beauty without even bothering about clicking a single picture. You can come back from your vacation and get a few images using the Google Street View Image API and show those images to your friends and relatives. Create an album of high definition images and go ahead and share it on Facebook for your friends to have a look.     Using the Google Street View Image API is very simple and anybody can make use of it without any programming knowledge required. I will walk you through the entire process of effectively using the Google Street View Image API. So if you are set, let's go on an amazing ride across the globe with the Google Street Views. ...
1 comment
Read more

The Bicycling Layer...

    Recreational cyclists and bike commuters alike can plot cycle-friendly routes, find trails, and avoid snarling traffic with Google Map's Bicycle layer. Map's bike-friendly, green-toned map layer is very eye-pleasing. The Google Maps API allows you to add bicycle information to your maps using the BicyclingLayer object.     The BicyclingLayer renders a layer of bike paths, suggested bike routes and other overlays specific to bicycling usage on top of the given map. Additionally, the layer alters the style of the base map itself to emphasize streets supporting bicycle routes and de-emphasize streets inappropriate for bicycles.     Let us have a look at the following example. The code has a map which is centered at Pune, India. There are very few cycle tracks in Pune and so you will see just a few dark green lines on the map. But if you would change the latitude-longitude values in the code and center the map at USA, then you will see a...
Post a Comment
Read more

Difference between word-break: break-all versus word-wrap: break-word

    The 2 CSS properties  word-break: break-all  and  word-wrap: break-word  appear to work in the same way or generate the same output, but there is a slight difference between the 2 and we will be discussing these differences today.     Take a look at the example above. The difference is quite evident, however I will try to explain it further. word-break: break-all Irrespective of whether it’s a continuous word or many words, break-all breaks them up at the edge of the width limit even within the characters of the same word word-wrap: break-word This will wrap long words onto the next line. break-word adjusts different words so that they do not break in the middle.     So if you have many fixed-size spans which get content dynamically, you might just prefer using  word-wrap: break-word , as that way only the continuous words are broken in between, and in case it’s a sentence comprising many words, the spa...
Post a Comment
Read more

Four maps on the same page - Playing with events

    In today's example we will see how to add 4 maps on the same web page and then play a bit around with some events in Google Maps API. Lets have a look at the code. All that you have to do to get the code working is copy the code in a text file and save it with .html extension. Open this html file in your browser and you will see the four maps in action!     Adding the four maps on a webpage should not be a challenge anymore, and all the more after the example Two Google Maps - Side by side that I shared a few weeks back! All you need to pay attention is to the events. There are two events "drag" and "zoom_changed". As the event names suggest, when you will drag or zoom the first map (upper left map), the remaining three maps will also zoom and pan accordingly! Try it out and leave a comment of what you think of it! You can also drop your queries or doubts about the same here!     The output of the above code appears as seen in th...
4 comments
Read more