An example

As an example the following draws two rectangles one in green and one in red:

<Document>
 <Style id="green">
  <LineStyle>
   <color>ff00ff00</color>
   <width>5</width>
  </LineStyle>
 </Style>  
 <Style id="red">
  <LineStyle>
   <color>ff0000ff</color>
   <width>5</width>
  </LineStyle>
 </Style>
 <Placemark>
  <styleUrl>#red</styleUrl>
  <LinearRing>
   <coordinates>
    0.0,0.0,0.0
    1.0,5.0,0.0
    5.0,5.0,0.0
    5.0,0.0,0.0
    0.0,0.0,0.0
   </coordinates>    
  </LinearRing>
 </Placemark>
 <Placemark>
  <styleUrl>#green</styleUrl>
  <LinearRing>
   <coordinates>
    0.0,6.0,0.0
    1.0,15.0,0.0
    5.0,15.0,0.0
    5.0,6.0,0.0
    0.0,6.0,0.0
   </coordinates>    
  </LinearRing>
 </Placemark>
</Document>

Notice that now as we have two Placemarks we have to bundle them up into a single ??Document.

A Polygon generator in Javascript

One of the uses of geometric objects is to create a custom place marker without the need to use a custom bitmap icon. To do this you generally need to generate the KML using a script.

For example to generate an n-sided polygon of radius r and centered on x,y you might use:

function polygon(x,y,r,n){
 var inc=2*Math.PI/n;
 var KML=x.toString()+","+
           (r+y).toString()+",0.0\n";
 for (var i = 1; i <n; i++){
  KML=KML + 
    (r*Math.sin(i*inc)+x).toString() +
       "," +
     (r*Math.cos(i*inc)+y).toString()+
        ",0.0\n";
 };

As this only generates the necessary co-ordinates you have to embed it in sutiable KML tags.

For example:

alert(polygon(-1,55,1,3));

generates the co-ordinates for a triangle centered on -1,55 and radius 1.

These can be copied and pasted into the co-ordinate section of a polygon to give:

<Placemark>  
 <Style>
  <LineStyle>
   <color>ff0000ff</color>
   <width>5</width>
  </LineStyle>
  <PolyStyle>
   <color>ff0000ff</color>
  </PolyStyle>
 </Style>
 <Polygon>
  <outerBoundaryIs>
   <LinearRing>
    <coordinates>
      -1,56,0.0
      -0.1339745962155613,54.5,0.0
      -1.8660254037844383,54.5,0.0
      -1,56,0.0
    </coordinates>    
   </LinearRing>
  </outerBoundaryIs>
 </Polygon>
</Placemark>

You can create any polygon marker in the same way and even approximate a circle if you set n big enough. For example, n=25

The reason the "circle" is in fact an ellipse is that we are working with latitude and longitude as if they were measures of linear distance. How much distance a degree of longitude represents depends on the latitude. To make this shape generator position-independent you need to scale the latitude and longitude so that you are working in ground distances - not difficult but something for another article.

If you would like to be informed about new articles on I Programmer you can either follow us on Twitter, on Facebook , on Digg or you can subscribe to our weekly newsletter.

<ASIN:0470095288>

<ASIN:0321525590>

<ASIN:0471790095>

<ASIN:0470381248>

<ASIN:1430216204>

<ASIN:1419689037>

<ASIN:0596101619>