Alexandru Matei


Hello,

I'm using Internet Explorer 6 SP1.

I'd like to be able to assign a "user defined object" to a pushpin and later I'd like to get that object from the pushpin.

I've created a simple C# ASP.NET web application in Visual Studio .NET 2005 SP1.

I have two problems:

- I can't get the pushpin DOM element.

- I don't know how to assign the user defined object to the DOM element

Thank you very much!

The WebForm1.aspx is this:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Testing.WebForm1" %>

<html>

<head runat="server">

<title>Test Earth Map Control</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 language="javascript">

var map = null;

function OnPageLoad()

{

map = new VEMap("myMap");

map.LoadMap();

var latitude = 42.098;

var longitude = -102.216;

AddPushPin(latitude,longitude,"Pushpin title","Pushpin text");

}

function AddPushPin (latitude, longitude,infoBoxTitle,infoBoxText)

{

try

{

var pin = new VEShape(VEShapeType.Pushpin, new VELatLong(latitude,longitude));

pin.SetTitle(infoBoxTitle);

pin.SetDescription(infoBoxText);

//I'd like to assign this object to the pushpin

var myObject=new Object();

myObject.x= "Hello";

myObject.y= "123";

alert("Object for the pushpin: (" + myObject.x +", "+myObject.y+")");

var element= document.getElementById(pin.GetID()); //a) This stament fails. 'element' is null !

if (element == null)

{

alert("Can't get the pushpin id );

}

else

{

element.onclick = EventHandlerOnClick;

element.data = myObject; //b) Will this code be correct, when a) will succeed

}

map.AddShape(pin);

}

catch(ex)

{

alert("A pushpin could be added.\r\nAn error has been encountered: '"+ex.message+"'");

}

}

function EventHandlerOnClick(e)

{

var pushpin=document.getElementById(window.event.srcElement.id);

//Will this code be correct, when a) will succeed

alert("Click the pushpin id= "+window.event.srcElement.id + "Pushpin assigned object is "+pushpin.data.x+" ---- "+pushpin.data.y);

}

</script>

</head>

<body onload ="OnPageLoad();">

<form id="form1" runat="server">

<div>

<div id="myMap" runat="server" style="z-index: 101; left: 72px; width: 882px; position: absolute;

top: 24px; height: 584px">

</div>

</div>

</form>

</body>

</html>

The C# code is just this (doesn't matter in this case):

namespace Testing

{

public partial class WebForm1 : System.Web.UI.Page

{

}

}




Re: How to assign a 'user defined object' to a pushpin in V5

dylanh


I found the same method that worked in previous versions works in VE5. Here's a sample ripped from some code I use. You will probably want to change the actual HTML that gets displayed, but this is a good start.

Now, has anybody yet figured out how to do a custom pushpin for the default pushpin for polylines and polygons I like the idea of being able to label polylines, but want control over the display so they are consistent with the other pushpins I have created.

'popupbody' is the ID of a div below the map control that I have styled with CSS. Here's how to display this instead of the default pushpin popup.

function AddPin(lat, lon, title, description, imageid, icon, id)

{

var html = "<div id='popupbody'>";

//define some HTML for the popup - this is done else where

html += "<div id='photo'><a href='" + photoLink + "'><img alt='click for full size image' src='" + thumbnaiilLink + "' /></a></div>";

html += "<div id='text'>" + description + "</div>";

html += "<div id='textwide'>" + description + "</div>";

html += "</div>";

icon = "../icons/camera.png"; //default for image for pushpin

//now create the pushpin

var pin = new VEPushpin(pinID,

new VELatLong(lat, lon),

icon,

title,

html,

'pinicon',

'title',

'textdescription'

);

VEPushpin.ShowDetailOnMouseOver = false;

VEPushpin.OnMouseOverCallback = function(x, y, title, details)

{

//debugger;

var popupInfo = document.getElementById("popup");

popupInfo.style.display = 'block';

popupInfo.style.left = x + 'px';

popupInfo.style.top = y + 'px';

popupInfo.innerHTML = "<div id='top'><h2>" + unescape(title) + "</h2><span id='dismiss' onclick='_HidePopup();'>X</a></span></div>" + unescape(details);

}

map.AddPushpin(pin);

pinID++;

}







Re: How to assign a 'user defined object' to a pushpin in V5

Alexandru Matei

Hi Dylan,

Thanks a lot for your hint!

My intention is to use strictly the V5 API functions and structures and Internet Explorer 6 and Internet Explorer 7.

And I'm looking for a solution that works with pushpins being 'VEShape' and not the known 'VEPushPin'.

As mentioned here, http://msdn2.microsoft.com/en-us/library/bb412561.aspx:

>>We started from the ground up and created a new, feature-rich class called VEShape Class that represents all pushpins, polylines, and polygons

>> The version 5 VEShape class replaces the VEPushpin, VEPolyline, and VEPolygon classes from versions 3 and 4, and the VEMap.AddPushpin Method, VEMap.AddPolyline Method, and VEMap.AddPolygon Method methods have all changed in version 5

That being said, I've found a workaround to get the pushpin DOM element using Earth Map Control SDK V5

The obscure workaround I've found is this:

var element= document.getElementById(pin.GetID()+"_10000"); //this works but not 100%. See below!

The problem that remains unsolved is this:

If pushpins are 'VEShape' and the map is moved (drag it around with the mouse), then the user defined object is lost !

If pushpins are 'VEPushPin', this annoying behaviour is not present.

The example below, presents side by side, how to assign a user defined object to a pushpin in V5 style and in the known V4 style:

<html>

<head>

<title> V5 pushpin and V4 pushpin with user defined object</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 type="text/javascript">

var map = null;

var pinID = 0;

//I'd like to assign this object to the pushpin

var myObject=new Object();

myObject.x= "Hello";

myObject.y= 123;

function GetMap()

{

var latitude = 42.098;

var longitude = -102.216;

map = new VEMap('myMap');

map.LoadMap(new VELatLong(latitude, longitude), 5 ,'r' ,false);

AddPushpinStyleV4(new VELatLong(latitude, longitude),null,"V4 style pushpin","Click the pushpin. The user defined data is preserved after moving the map (drag it around)");

AddPushpinStyleV5 (new VELatLong(latitude+2, longitude+2),"V5 style pushpin","Click the pushpin. The user defined data is lost after moving the map (drag it around) !");

map.AttachEvent('onclick', OnMouseClickV5);

}

function AddPushpinStyleV4(location, icon_url, title, details)

{

//Credit for the original code goes to: http://www.soulsolutions.com.au/onclick.html

pinID++;

var pin = new VEPushpin(pinID, location, icon_url, title, details);

map.AddPushpin(pin); //old V4 style

var element = document.getElementById(pinID);

if (element)

{

//assign the 'onclick' event handler and the 'user defined object' to the pushpin

element.onclick = OnMouseClickV4;

element.data = myObject;

}

else

{

alert("Could not retrieve the DOM element for VEPushpin version 4");

}

}

function AddPushpinStyleV5(location, title, details)

{

var pin = new VEShape(VEShapeType.Pushpin, location);

pin.SetTitle(title);

pin.SetDescription(details);

map.AddShape(pin); // new V5 style

//this works but not for long!

//after I drag the map and then click the pushpin again, the user defined data is lost

var element= document.getElementById(pin.GetID()+"_10000");

if (element)

{

//assign the user defined object to the V5

element.data = myObject;

}

else

{

alert("Could not retrieve the DOM element for VEShape version 5");

}

}

function OnMouseClickV4(e)

{

try

{

//click the pushpin. I'd like to get the object assigned to the pushpin

// if (e!=null)

// {

// document.getElementById(e.currentTarget.id + "_" + map.GUID).onmouseover();

// } else

// {

// document.getElementById(window.event.srcElement.id).onmouseover();

// }

//this element has the pushpin's user defined data!

var pushpinID= window.event.srcElement.id.split("_",1);

var element = document.getElementById(pushpinID);

if (element)

{

alert("Clicked the V4 pushpin, ID ="+window.event.srcElement.id+"\r\n\r\n"+

"User defined data is ("+element.data.x+","+element.data.y+")");

}

else

{

alert("Clicked the V4 pushpin, can't get the DOM element ");

}

}

catch(ex)

{

alert ("OnMouseClick()V4 exception: '"+ex.message+"'");

}

}

function OnMouseClickV5(e)

{

try

{

if (e.elementID)

{

//click the pushpin. I'd like to get the object assigned to the pushpin

var pin= map.GetShapeByID(e.elementID);

var element= document.getElementById(e.elementID);

if (element)

{

alert("Clicked the V5 pushpin GetID()= "+pin.GetID()+", e.elementID= "+ e.elementID+"\r\n\r\n"+

"User defined data is ("+element.data.x+", "+element.data.y+")\r\n\r\n"+

"However if I drag the map and then click the pushpin again, the user defined data is lost !");

}

else

{

alert("Clicked the V5 pushpin GetID()= "+pin.GetID()+", e.elementID= "+ e.elementID+"\r\n"+

"can't get the DOM element ");

}

}

}

catch(ex)

{

alert ("OnMouseClickV5() exception: '"+ex.message+"'");

}

}

</script>

</head>

<body onload="GetMap();">

<div id='myMap' style="position:relative; width:616px; height:624px; left: 8px; top: 8px;"></div>

</body>

</html>






Re: How to assign a 'user defined object' to a pushpin in V5

dylanh

Hi,

I might have missed something, but the 'old' VE4 function 'VEPushPin' works fine in VE5, and does what is required. Although the VEshape stuff is cool, as it has lots of new features especially for polyline/polygons, few of them are relevant for a pushpin. When I have ported my sites to VE5 I have left the pushpin code as it was as I already had the behaviour I wanted. As it looks like VEMap.AddPushpin(points); is just a shortcut to adding a shape of type push pin to the map or layer anyway, so the end result is the same.

I haven't try it yet, but the onmouseover stuff to show a custom pushpin by capturing the OnMouseOverCallback should work for other shapes, as presumably they all inherit from the same base class, so my eariler question about custom pushpins and popups is that it should work. If I get that working, I'll post an example.






Re: How to assign a 'user defined object' to a pushpin in V5

Alexandru Matei

Hi,

A Big Thank You(!) to John (SoulSolutions) who has given me the idea.

http://forums.microsoft.com/MSDN/ShowPost.aspx PostID=1537147&SiteID=1

The code below is a pure V5 Earth Map SDK solution, where the pushpin is a V5 'VEShape', not a 'VEPushPin'.

<html >

<head>

<title>Assign a user defined object to a V5 pushpin</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 type="text/javascript">

var map = null;

var pinID = 0;

var dashBoardSizes = new Array(VEDashboardSize.Normal,VEDashboardSize.Small,VEDashboardSize.Tiny) ;

function GetMap()

{

var latitude = 42.098;

var longitude = -102.216;

var zoomLevel=4;

map = new VEMap('myMap');

map.SetDashboardSize(dashBoardSizes[0] );

map.LoadMap(new VELatLong(latitude, longitude), zoomLevel ,'r' ,false,VEMapMode.Mode2D,false);

AddPushpinStyleV5 (new VELatLong(latitude, longitude),"I'm a V5 pushpin","Click the pushpin. The user defined data is fine even after moving the map.");

AddPushpinStyleV5 (new VELatLong(latitude-2, longitude-2),"I'm another V5 pushpin","Click the pushpin. The user defined data is fine even after moving the map.");

map.AttachEvent('onclick', OnMouseClickV5);

map.AttachEvent('onmouseover', OnMouseOverV5);

map.SetScaleBarDistanceUnit(VEDistanceUnit.Kilometers) ;

}

function AddPushpinStyleV5(location, title, details)

{

pinID++;

// new V5 style pushpin

var pin = new VEShape(VEShapeType.Pushpin, location);

pin.SetTitle(title);

pin.SetDescription(details);

//Assign the 'user defined object' to the V5 pushpin

//Credit goes to SoulSolutions http://forums.microsoft.com/MSDN/ShowPost.aspx PostID=1537147&SiteID=1

//A very big 'Thank you'!

var myObject=new Object();

myObject.x= "Hello";

myObject.y= 123;

myObject.ID=pinID;

pin.data = myObject; //this works!

map.AddShape(pin);

}

function OnMouseOverV5(e)

{

if(e.elementID)

{

//mouse over pushpin or over a shape

var aShape= map.GetShapeByID(e.elementID);

if (aShape.GetType() == VEShapeType.Pushpin )

{

// or if you want to prevent executing the default behaviour, that is don't show the Info Box,

// then uncomment the line below

// return true;

}

}

}

function OnMouseClickV5(e)

{

try

{

if (e.elementID)

{

//click the pushpin. I'd like to get the object assigned to the pushpin

var pin= map.GetShapeByID(e.elementID);

//change the Info Box information just before displaying it!

getAJAXContent( e.elementID,pin);

map.ShowInfoBox(pin);

}

}

catch(ex)

{

alert ("OnMouseClickV5() error: '"+ex.message+"'");

}

}

function getAJAXContent(pinIDOnEvent, pin, newInfoBoxTitle,newInfoBoxText)

{

//change Info Box information just before displaying it!

var newInfoBoxTitle = "Updated title of the V5 pushpin";

var newInfoBoxText = "ID from event= "+pinIDOnEvent+"<br><br>ID from pin.GetID()= "+ pin.GetID()+"<br><br>" +

"User defined data is ("+pin.data.ID+","+pin.data.x+","+pin.data.y+")";

pin.SetTitle( newInfoBoxTitle);

pin.SetDescription(newInfoBoxText);

}

function DeletePushPinV5(aPin)

{

try

{

if (aPin!=null)

{

map.DeleteShape(aPin);

}

else

{

map.DeleteAllShapes();

}

}

catch (ex)

{

alert(ex.message);

}

}

function OnLoadPage()

{

GetMap();

}

function OnUnloadPage()

{

DisposeMap();

}

function DisposeMap()

{

if (map != null)

{

// DeletePushPinV5();

map.Dispose();

map=null;

}

}

</script>

</head>

<body onload="OnLoadPage();" onunload="OnUnloadPage();" >

<div id='myMap' style="position:relative; width:600px; height:600px; left: 72px; top: 16px; z-index: 100;"></div>

<div id="popup" style="z-index: 101; left: 752px; width: 100px; position: absolute;

top: 480px; height: 100px">

</div>

<div style="z-index: 102; left: 264px; width: 320px; position: absolute; top: 632px;

height: 24px; color: purple;">

Click the pushpins to see the custom info box</div>

</body>

</html>