Geeks With Blogs
Mahesh Anandan blog

As with most spatial operation, every ESRI - ArcGIS / Mapobjects developer or end user in the GIS world prefer a spatial selection by drawing a rectangle or a polygon. Off-course its easy with desktop application, Try that with a javascript, its different challenge.

I have started working on a Virtual Earth with MOSS project recently and I must say Iam definetly impressed compared to Google earth / Google Maps. I will post another article shortly after this on comparing the two products and my preference etc.,

Pasting the code from my webpart as is, .. if something is not clear, let me knwo - also I am yet to figure out best way to mark code segment in this site.  until then, just write to me if you have question.

Just remember to create a Div to display results and register a code similar to the following from your RenderContents method of aspx page or webpart.

Register the VEMap from your Control. If you are embeding Virtual Earth in ASPX page, you will simply add script include tag in your aspx page.

 

if (Page.ClientScript.IsClientScriptIncludeRegistered("veMapIncludeJS") == false)

{

Page.ClientScript.RegisterClientScriptInclude("veMapIncludeJS", "http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1");

}

Also register your Div Tag so i the javascript below can show the co-ord infomration with minX, minY and maxX , maxY.

function getResultDiv()

{

return ('" + this.coordTrackDiv.ClientID + @"');

}

+ this.coordTrackDiv.ClientID + );

In my case, I had a Panel instance variable named coordTrackDiv.

I will leave the creative side of assembling the code to you guys, if you need a working source, just email me with your address, i will send you my completed version in aspx page.

I was trying to render a rectangle with javascript untill one night it just struck me to use the map co-ordinates directly to render the rectangle. VEMap javascript object is quite powerful , All I am doing is deriving x Delta and Y delta based on the current mouse co-ordinate. Nothing fancy, a simple Envelop math , swap values from array and Bingo ! you got yourself a nice box.

Real work is in the drawRectangle & CapturePoint method. Its that simple.!

 

 

#region MapJavaScript

var map = null;

var clickCount = 0;

var pixelArray = new Array(4);

var llArray = new Array(4);

var lastLL ;

var shape = null;

var eventWiredForRectangle = false;

var startLatLong = null;

var polyPoints = new Array(4);

var icon = ""<div style='font-size:10px;font-weight:bold;border:solid 2px Black;background-color:Aqua;width:25px;'>Shape</div>"";

 

function GetMap()

{

//alert(' inside getmap 12');

var latLong = new VELatLong(36.13371559517861 , -115.16238212585449);

map = new VEMap(getMapPanel());

map.LoadMap(latLong, 6, VEMapStyle.Aerial, 0, VEMapMode.Mode2D, 1);

map.AttachEvent(""onmousedown"" , initiateRectangle);

document.body.onload = GetMap;

window.status = ' version 14';

return;

}

 

function drawRectangle(e)

{

var x = e.mapX;

var y = e.mapY ;

var pixel = new VEPixel(x, y);

var latLong = map.PixelToLatLong(pixel);

var tempPoint ;

var tempPoint2 ;

 

if (startLatLong == null)

{

startLatLong = map.PixelToLatLong(pixel);

polyPoints[0] = startLatLong ;

}

 

if (shape != null )

{

map.DeleteShape(shape);

shape = null;

}

 

tempPoint = polyPoints[0] ;

 

polyPoints[3] = new VELatLong(latLong.Latitude, latLong.Longitude);

tempPoint2 = polyPoints[3] ;

polyPoints[1] = new VELatLong(tempPoint2.Latitude, tempPoint.Longitude);

polyPoints[2] = tempPoint2 ;

polyPoints[3] = new VELatLong(tempPoint.Latitude, tempPoint2.Longitude);

 

shape = new VEShape(VEShapeType.Polygon, polyPoints);

var lineColor = new VEColor(255,0,0,1);

shape.SetLineColor(lineColor);

shape.SetLineWidth(1);

 

var fillColor = new VEColor(120,190,210,0.5);

shape.SetFillColor(fillColor);

map.AddShape(shape);

 

 

return ;

}

 

 

function initiateRectangle()

{

if (eventWiredForRectangle)

{

map.DetachEvent(""onmousemove"", drawRectangle);

eventWiredForRectangle = false;

CapturePoint();

}else {

map.AttachEvent(""onmousemove"" , drawRectangle);

eventWiredForRectangle = true;

}

return ;

}

function CapturePoint()

{

if (shape == null )

{

alert(""Draw a rectangle to Search"");

return (false);

}

 

var shapePoints = shape.GetPoints();

var concatData = """";

var concatDataDisplay = """";

 

// shape is always a square - it will have minx, miny and maxX and maxY ;

// all i need is index 0 and 2 - polys have 5 points as they all close.

 

concatDataDisplay = ""# of Points : "" + shapePoints.length + "" Coord : "" + shapePoints[0].Latitude + "" , "" + shapePoints[0].Longitude + "" | "" + shapePoints[1].Latitude + "" , "" + shapePoints[1].Longitude + "" | <br/> "" + shapePoints[2].Latitude + "" , "" + shapePoints[2].Longitude + "" | "" + shapePoints[3].Latitude + "" , "" + shapePoints[3].Longitude + "" | "" + shapePoints[4] ;

document.getElementById(getResultDiv()).innerHTML= concatDataDisplay;

concatData = shapePoints[0].Latitude + "" , "" + shapePoints[0].Longitude + "" | "" + shapePoints[2].Latitude + "" , "" + shapePoints[2].Longitude ;

 

 

document.getElementById(getHiddenFieldId()).value = concatData ;

 

document.getElementById(getResultDiv()).innerHTML = concatDataDisplay ;

window.status = "" Data "" + concatDataDisplay ;

startLatLong = null ;

 

}

// you can call this method from a html action button to clear your selection.

function clearMap()

{

if (shape != null && map != null)

{

map.DeleteShape(shape);

shape = null ;

}

document.getElementById(getResultDiv()).innerHTML = ""No co-ord selected."" ;

startLatLong = null ;

return;

}

";

 #end region

return (true); Posted on Saturday, July 19, 2008 2:54 PM | Back to top


Comments on this post: Virtual Earth - Draw Rectangle with Mouse Co-ordinate..

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © Mahesh Anandan | Powered by: GeeksWithBlogs.net