Hi!


Hi,
Is it possible to display message beside Pushpin
If Yes, how




Re: Is it possible to display message beside Pushpin?

Earthware


Pushpins now support custom icons, which can just be html so you can add any text you like as part of the pushpin and add your own image either as an html image or using css.

Brian Norman

www.earthware.co.uk






Re: Is it possible to display message beside Pushpin?

Derek Chan

Working off of brian's idea,

Depending on what kind of "message" you want displayed on the back, you could do a regular pushpin followed by your "message" encased as a VEShape right behind it. This method is really simple and easily to understand because if you use an alternative like map.AddControl() to throw your "message" behind the pin it will take some more work to determine pixel co-ordinates and also controlling it.

I've slightly modified the SDK code to demonstrate this

Code Snippet


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<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"></script>
<script>
var map = null;
var pinid = 0;
var icon = "<div style='font-size:12px;font-weight:bold;border:solid 2px Black;background-color:Aqua;width:50px;'>Shape</div>";
var infobox = "<div style='width:309px;'>You can add html codes into the info box or change the style of the info box. You can design and show any info box you want!<br>"
+"<a href='http://msdn2.microsoft.com/en-us/library/bb412553.aspx' target='_blank'>Click here to find out more.</a><br></div>"
+"<embed src='http://images.soapbox.msn.com/flash/soapbox1_1.swf' quality='high' width='309px' height='272px' wmode='transparent' type='application/x-shockwave-flash' pluginspage='http://macromedia.com/go/getflashplayer' flashvars='c=v&v=a4b53303-d58c-450e-a01d-069c9bcb5fe9' ></embed><br /><a href='http://soapbox.msn.com/video.aspx vid=a4b53303-d58c-450e-a01d-069c9bcb5fe9' target='_blank' title='Virtual Earth - Bird&#39;s eye view and 3D'>Video: Virtual Earth - Bird&#39;s eye view and 3D</a>";

function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
map.SetZoomLevel(10);
}

function AddPushpin()
{
var shape = new VEShape(VEShapeType.Pushpin, map.GetCenter());

//Set the icon
shape.SetCustomIcon(icon);

//Set the info box
map.ClearInfoBoxStyles();
shape.SetTitle("<h2>Custom Pin</h2>");
shape.SetDescription(infobox);

//Add the shape the the map
map.AddShape(shape);
map.AddPushpin(map.GetCenter());
pinid++;
}

function AddPolyline()
{
var ll = map.GetCenter();
var lat = ll.Latitude;
var lon = ll.Longitude;

var shape = new VEShape(VEShapeType.Polyline, [new VELatLong(lat-0.1,lon-0.1),
new VELatLong(lat+0.1,lon-0.1),
new VELatLong(lat+0.1,lon),
new VELatLong(lat-0.1,lon),
new VELatLong(lat-0.1,lon+0.1),
new VELatLong(lat+0.1,lon+0.1)]);

//Set the line color
var lineColor = new VEColor(Math.round(254*Math.random()),Math.round(254*Math.random()),Math.round(254*Math.random()),Math.random());
shape.SetLineColor(lineColor);

//Set the line width
var lineWidth = Math.round(5*Math.random()+1);
shape.SetLineWidth(lineWidth);

//Set the icon
shape.SetCustomIcon(icon);

//Set the info box
map.ClearInfoBoxStyles();
shape.SetTitle("<h2>Custom Pin</h2>");
shape.SetDescription(infobox);

//Add the shape the the map
map.AddShape(shape);
map.AddPushpin(map.GetCenter());
pinid++;
}

function AddPolygon()
{
var ll = map.GetCenter();
var lat = ll.Latitude;
var lon = ll.Longitude;

var shape = new VEShape(VEShapeType.Polygon, [new VELatLong(lat,lon-0.15),
new VELatLong(lat+0.1,lon-0.05),
new VELatLong(lat+0.1,lon+0.05),
new VELatLong(lat,lon+0.15),
new VELatLong(lat-0.1,lon+0.05),
new VELatLong(lat-0.1,lon-0.05)]);

//Set the line color
var lineColor = new VEColor(Math.round(254*Math.random()),Math.round(254*Math.random()),Math.round(254*Math.random()),Math.random());
shape.SetLineColor(lineColor);

//Set the line width
var lineWidth = Math.round(5*Math.random()+1);
shape.SetLineWidth(lineWidth);

//Set the fill color
var fillColor = new VEColor(Math.round(254*Math.random()),Math.round(254*Math.random()),Math.round(254*Math.random()),Math.random());
shape.SetFillColor(fillColor);

//Set the icon
shape.SetCustomIcon(icon);

//Set the info box
map.ClearInfoBoxStyles();
shape.SetTitle("<h2>Custom Pin</h2>");
shape.SetDescription(infobox);

//Add the shape the the map
map.AddShape(shape);
map.AddPushpin(map.GetCenter());
pinid++;
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
<div>Click on the links below to add a custom shape to the map.</div>
<div><a href='#' onclick='AddPushpin();'>Add Pushpin</a></div>
<div><a href='#' onclick='AddPolyline();'>Add Polyline</a></div>
<div><a href='#' onclick='AddPolygon();'>Add Polygon</a></div>
</body>
</html>

Just click on any of the links below in the code to give you an idea of what I mean.

Hope that helps,







Re: Is it possible to display message beside Pushpin?

Hi!

I am displaying pushpins and custom icons. But, I want to display only some message in addition to pushpins. I want to display this message so that I may get to know about pushpin without bringing mouse over pushpin. but No Icon, only message.




Re: Is it possible to display message beside Pushpin?

Derrick

You could try using an invisible gif as the icon's image. The call the method VEMap.ShowInfoBox(shape, anchor, offset); to show the message.