This sample application implements a simple drawing tool for VE v5. It leverages some of the articles published here on calculating distances and drawing circles. It allows to draw and delete pushpins, polylines, polygons and circles as well as to measure distance, perimeter and radius.
Drawing seems to fail in Firefox 2. Mouse-clicks after the first one on the map are not captured so the shapes can't be finished or saved. Anybody have a fix?
Fix:---- try adding few 25px to the distance tag it will work in Firefox(It worked for me...)
Please explain your fix in a little more detail. Your answer is a bit too vague. Thanks!
with in this function DrawPolyMouseMove(e)
change the lines like shown below..
dummy.style.left = (e.clientX+10) + "px";
dummy.style.top = (e.clientY +10) + "px";
Here is the HTML-code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5" type="text/javascript"></script>
<script src="Drawing.js" type="text/javascript"></script>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body onload="GetMap();">
<div id='divMap' style="position:absolute; left:300px; top:0px; width:800px; height:600px;"></div>
<input id="btnPoint" type="button" value="Point" onclick="Draw('point')" style="width: 195px" /><br />
<input id="btnPolyline" type="button" value="Polyline" onclick="Draw('polyline')" style="width: 195px" /><br />
<input id="btnPolygon" type="button" value="Polygon" onclick="Draw('polygon')" style="width: 195px" /><br />
<input id="btnCircle" type="button" value="Circle" onclick="Draw('circle')" style="width: 195px" /><br />
<a>Lat: </a><input id="txtLat" type="text" disabled="disabled" style="width: 150px" class="SetInfo" /><br />
<a>Lat: </a><input id="txtLon" type="text" disabled="disabled" style="width: 150px" class="SetInfo" /><br /><br />
<div id='divShapeInfo' style="position:absolute; left:0px; top:400px; visibility:hidden;" class="SetInfo";>
<b><u>Please enter the details:</u></b><br /><br />
<a>ID : </a><input id="txtShapeID" type="text" disabled="disabled" style="width: 150px" class="SetInfo" /><br />
<a>Title : </a><input id="txtShapeTitle" type="text" style="width: 150px" class="SetInfo" /><br />
<a>Description: </a><input id="txtShapeDetails" type="text" style="width: 150px" class="SetInfo" /><br /><br />
<input id="btnShapeInfo" type="button" value="Set" onclick="SetInfo()" style="width: 260px"/><br />
</div>
<div id='divDistance' style="position:absolute; left:0px; top:300px; visibility:hidden;" class="SetInfo";></div>
</body>
</html>
And here is the JavaScript:
var map = null;
var slDrawing = new VEShapeLayer();
var myGeomType = null;
var myCurrentShape = null;
var myPoints = new Array();
var myDistance = 0;
var tempShape = null;
var tempPoints = null;
var tempDistance = 0;
var myCirclePoints = null;
var tempCircle = null;
var i = 1;
function GetMap()
{
map = new VEMap('divMap');
map.LoadMap();
map.AddShapeLayer(slDrawing);
}
function Draw(geomType)
{
myGeomType = geomType;
map.AttachEvent("onclick", DrawPolyMouseClick);
map.AttachEvent("onmousemove", MouseMove);
document.getElementById("divMap").style.cursor='crosshair';
}
function MouseMove(e)
{
var x = e.mapX;
var y = e.mapY;
pixel = new VEPixel(x, y);
var LL = map.PixelToLatLong(pixel);
document.getElementById("txtLat").value = LL.Latitude;
document.getElementById("txtLon").value = LL.Longitude;
}
function DrawPolyMouseClick(e)
{
var x = e.mapX;
var y = e.mapY;
pixel = new VEPixel(x, y);
var LL = map.PixelToLatLong(pixel);
if (myPoints.length == 0 && myGeomType != "point")
{
map.DetachEvent("onmousemove", MouseMove);
map.AttachEvent("onmousemove", DrawPolyMouseMove);
document.getElementById("divDistance").style.visibility = "visible";
}
if (myGeomType == "circle" && myPoints.length == 2)
{
myPoints[1] = LL;
myDistance = tempDistance;
}
else
{
myPoints.push(LL);
myDistance = myDistance + tempDistance;
}
if (e.rightMouseButton)
{
try
{
map.DetachEvent("onmousemove", DrawPolyMouseMove);
map.DetachEvent("onclick", DrawPolyMouseClick);
document.getElementById("divDistance").style.visibility = "hidden";
slDrawing.DeleteShape(tempShape);
slDrawing.DeleteShape(tempCircle);
}
catch (err)
{
}
myCurrentShape = "shape" + i;
myDistance = Math.round(myDistance * 1000) / 1000;
switch (myGeomType)
{
case "polygon":
myCurrentShape = new VEShape(VEShapeType.Polygon, myPoints);
document.getElementById("txtShapeDetails").value = "Perimeter: " + myDistance + " km";
break;
case "polyline":
myCurrentShape = new VEShape(VEShapeType.Polyline, myPoints);
document.getElementById("txtShapeDetails").value = "Distance: " + myDistance + " km";
break;
case "circle":
myCurrentShape = new VEShape(VEShapeType.Polygon, myCirclePoints);
document.getElementById("txtShapeDetails").value = "Radius: " + myDistance + " km";
break;
case "point":
myCurrentShape = new VEShape(VEShapeType.Pushpin, LL);
break;
}
slDrawing.AddShape(myCurrentShape);
document.getElementById("txtShapeID").value = "shape" + i;
i = i + 1;
var dummy = document.getElementById("divShapeInfo");
dummy.style.left = e.clientX + "px";
dummy.style.top = e.clientY + "px";
dummy.style.visibility = "visible";
document.getElementById("divMap").style.cursor = 'http://maps.live.com/cursors/grab.cur';
}
else
{
document.getElementById("divMap").style.cursor='crosshair';
}
}
function DrawPolyMouseMove(e)
{
var x = e.mapX;
var y = e.mapY;
pixel = new VEPixel(x, y);
var LL = map.PixelToLatLong(pixel);
document.getElementById("txtLat").value = LL.Latitude;
document.getElementById("txtLon").value = LL.Longitude;
tempPoints = myPoints.slice(0, myPoints.length);
if (myGeomType == "circle" && tempPoints.length == 2)
{
tempPoints[1] = LL;
tempDistance = getDistance(tempPoints[0], LL);
}
else
{
tempPoints.push(LL);
tempDistance = getDistance(tempPoints[myPoints.length-1], LL);
}
var dummy = document.getElementById("divDistance");
dummy.style.left = e.clientX + "px";
dummy.style.top = e.clientY + "px";
dummy.innerHTML = Math.round((myDistance + tempDistance) * 1000) / 1000;
try
{
slDrawing.DeleteShape(tempShape);
slDrawing.DeleteShape(tempCircle);
}
catch (err)
{
}
if (tempPoints.length == 2)
{
tempShape = new VEShape(VEShapeType.Polyline, tempPoints);
tempShape.HideIcon();
slDrawing.AddShape(tempShape);
if (myGeomType == "circle")
{
GetCircle();
tempCircle = new VEShape(VEShapeType.Polygon, myCirclePoints);
tempCircle.HideIcon();
slDrawing.AddShape(tempCircle);
}
}
if (tempPoints.length > 2)
{
switch (myGeomType)
{
case "polygon":
tempShape = new VEShape(VEShapeType.Polygon, tempPoints);
break;
case "polyline":
tempShape = new VEShape(VEShapeType.Polyline, tempPoints);
break;
}
tempShape.HideIcon();
slDrawing.AddShape(tempShape);
}
}
//calculate distance
function getDistance(p1, p2)
{
p1Lat = latLonToRadians(p1.Latitude);
p1Lon = latLonToRadians(p1.Longitude);
p2Lat = latLonToRadians(p2.Latitude);
p2Lon = latLonToRadians(p2.Longitude);
var R = 6371; // earth's mean radius in km
var dLat = p2Lat - p1Lat;
var dLong = p2Lon - p1Lon;
var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(p1Lat) * Math.cos(p2Lat) * Math.sin(dLong/2) * Math.sin(dLong/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var disKm = R * c;
//var disMiles = disKm * 0.6214;
return (disKm);
}
//convert lat/long in degrees to radians
function latLonToRadians(point)
{
return point * Math.PI / 180;
}
//Draw Circle
function GetCircle()
{
var R = 6371; // earth's mean radius in km
var lat = (myPoints[0].Latitude * Math.PI) / 180; //rad
var lon = (myPoints[0].Longitude * Math.PI) / 180; //rad
var d = parseFloat(tempDistance) / R; // d = angular distance covered on earth's surface
myCirclePoints = new Array();
for (x = 0; x <= 360; x++)
{
var p2 = new VELatLong(0,0)
brng = x * Math.PI / 180; //rad
p2.Latitude = Math.asin(Math.sin(lat)*Math.cos(d) + Math.cos(lat)*Math.sin(d)*Math.cos(brng));
p2.Longitude = ((lon + Math.atan2(Math.sin(brng)*Math.sin(d)*Math.cos(lat), Math.cos(d)-Math.sin(lat)*Math.sin(p2.Latitude))) * 180) / Math.PI;
p2.Latitude = (p2.Latitude * 180) / Math.PI;
myCirclePoints.push(p2);
}
return myCirclePoints;
}
function SetInfo()
{
myCurrentShape.SetTitle(document.getElementById("txtShapeTitle").value);
myCurrentShape.SetDescription(document.getElementById("txtShapeDetails").value + "<br><a href='javascript:Delete(\"" + myCurrentShape.GetID() + "\")'>Delete</a>");
myPoints = new Array();
tempPoints = null;
myDistance = 0;
tempDistance = 0;
var dummy = document.getElementById("divShapeInfo").style.visibility = "hidden";
document.getElementById("txtShapeTitle").value = "";
document.getElementById("txtShapeDetails").value = "";
}
function Delete(shape)
{
var delShape = slDrawing.GetShapeByID(shape);
slDrawing.DeleteShape(delShape);
}