* Drawing Circle using Lat and Lon*

Feb 21, 2008 at 11:09 AM
Hi

First of all, thanks for this conrol implementation and it really helps a lot to so many people.

By using GoogleMap Control 2.9, i can able to capture the Latitude and Longitude. But, my need is, by using tht Lat and Long, can a circle be drawn with shaded inside?

By the same way, by two diagonal click, can a rectangle be drawn in google map with shaded inside?

Reply asap. thanks in advance... :-)

Rdgs,
PriyaRajan.D.
Coordinator
Feb 22, 2008 at 8:35 AM
Edited Feb 22, 2008 at 8:36 AM
Hi,
In response to your question I have added new sample Polygons and Events on the index page of the project.
You can see it here .
And live demo of the sample is available here

Hope this helps
Regards
Feb 25, 2008 at 4:50 AM
Yeah Very thanks for ur reply Velio! :-)

But, according to me there are only two needs.

1. Drawing circle wherein i will click on two positions of radius.
By this click , can i able to draw a circle by using ur control.

2. I just want to capture the google map(which is created by Artem.GoogleMpa.dll 2.9) as jpeg, bmp file - like Save dialog file it shod open and save.

Can these two will be possible. Please clarify me. I will more thankful.

Rdgs,
PriyaRajan.D.
Coordinator
Feb 25, 2008 at 3:54 PM
Hi
1. Drawing circle
You can use the sample and code I gave but extend it with a formula to use those 2 points and draw a circle. It's up to you.
You can use this Google Map API demo as a tip.
Especially the javascript code and the formula used in it and use it in the code of the sample above:
function drawCircle(lat, lng, radius, strokeColor, strokeWidth, strokeOpacity, fillColor, fillOpacity) {
      var d2r = Math.PI/180; 
      var r2d = 180/Math.PI; 
      var Clat = (radius/3963)*r2d; 
      var Clng = Clat/Math.cos(lat*d2r); 
      var Cpoints = []; 
      for (var i=0; i < 33; i++) { 
        var theta = Math.PI * (i/16); 
        Cy = lat + (Clat * Math.sin(theta)); 
        Cx = lng + (Clng * Math.cos(theta)); 
        var P = new GPoint(Cx,Cy); 
        Cpoints.push(P); 
      }
 
	var polygon = new GPolygon(Cpoints, strokeColor, strokeWidth, strokeOpacity, fillColor, fillOpacity);
	map.addOverlay(polygon);
     }

2. I just want to capture the google map(which is created by Artem.GoogleMpa.dll 2.9) as jpeg, bmp file - like Save dialog file it shod open and save.
Please, check out the working item here and do vote for it if you are interested in.
I order my working tasks by the votes given to the working items.

Regards
Feb 28, 2008 at 4:30 AM
Hi Velio

I am trying out ur code for drawing the circle as like below.

Actually, am clicking on the position of Lat and Long on Google map, getting two values in two html textboxes, then passing tht values in ur drawcircle function as first two parameters.

But, i cant able to figure out whts my prbm may be? Its not coming up with circle. Please have a look and point my mistake.

This is my code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Circle.aspx.cs" Inherits="Circle" %>

<%@ Register Assembly="Artem.GoogleMap" Namespace="Artem.Web.UI.Controls" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxSPW5CJgpdgOs4yyMovOaVhKvvhSfpvagV18eOyDWu7VytS6Bi1CWxw"
type="text/javascript"></script>

<script type="text/javascript">
function showTest(overlay,position) {
if(position) {
var el = document.getElementById('txtlat');
el.value = position.lat();
el = document.getElementById('txtlng');
el.value = position.lng();
}
}
</script>

<SCRIPT LANGUAGE="JavaScript">
function testResults (form) {
var TestLat = txtlat.value;
alert ("You typed: " + TestLat);
}
</script>

<script type="text/javascript">
//<![CDATA[
var map;

// Taken from Kip
function drawCircle(lat, lng, radius, strokeColor, strokeWidth, strokeOpacity, fillColor, fillOpacity) {
var d2r = Math.PI/180;
var r2d = 180/Math.PI;
var Clat = (radius/3963)*r2d;
var Clng = Clat/Math.cos(lat*d2r);
var Cpoints = [];
for (var i=0; i < 33; i++) {
var theta = Math.PI * (i/16);
Cy = lat + (Clat * Math.sin(theta));
Cx = lng + (Clng * Math.cos(theta));
var P = new GPoint(Cx,Cy);
Cpoints.push(P);
}

var polygon = new GPolygon(Cpoints, strokeColor, strokeWidth, strokeOpacity, fillColor, fillOpacity);
map.addOverlay(polygon);
}

function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(42.351505, -71.094455), 9);

//drawCircle(42.351505, -71.094455, 10.0, "#000080", 1, 0.75, "#0000FF",.5);
drawCircle(txtlat.value, txtlng.value, 10.0, "#000080", 1, 0.75, "#0000FF",.5);
}
}

function Button1_onclick() {

if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(42.351505, -71.094455), 9);

drawCircle(txtlat.value, txtlng.value, 10.0, "#000080", 1, 0.75, "#0000FF",.5);
}
}

//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">

 
Apr 12, 2008 at 3:25 AM
Could someone give me a hand and tell me what the measurement is for the radius in the circle example?

I'd like to make a circle with a radius of miles and I am just not sure what the radius is currently in the drawCircle fcn.

// Taken from Kip
function drawCircle(lat, lng, radius, strokeColor, strokeWidth, strokeOpacity, fillColor, fillOpacity) {

radius = kilometers, nautical miles, miles, etc?
Coordinator
Apr 14, 2008 at 5:58 AM
Hi,

Radius is in pixels. That's the way it is.
According to this example I have added GoogleCirclePolygon as object you can add to Polygons collection of GoogleMap control.
I was asked about finding a way to convert pixels to some metrics - it should depend on Zoom of the google map.
The probplem is I had not time to do research on it.

So, if you find out a solution, please let me know.
Thanks in advance.

Regards
Apr 19, 2008 at 5:02 AM
Hey Velio.

Thanks so much for the reply.

Actually the same night i posted i found the solution i needed, but then couldn't figure out where I had posted this question..... anyway so I couldn't update, until now. Horray!

Anywho, the link below provided a solution and explanation I was looking for.

http://www.missiondata.com/blog/gis/44/approximating-a-circle-with-a-polygon/

Thanks Again for the note,
Best,
Coordinator
Apr 21, 2008 at 5:00 PM
Hi,

Thanks for the tip.
I'll for sure use it to implement build-in conversion of GoogleMap dimentions to some metrics.

Best Regards
Apr 22, 2008 at 4:12 AM
Hi sobelito

Its a gr8 help for me too.... Really very very helpful post by u!! Infact am struggling so much for thiss for soo many days...

Thank u so much..

And, velio can it be implemented in GoogleMap Control..... Waiting for tht....

Rdgs,
PriyaRajan.D.