How to make custom text for pushpin (pulling from xml element)

Hot Topic

How To Look WM6 in Device Emulator
Any tips for plotting multiple GPS tracks
launch picturebox
building cab file
Shape editing revisited
[Activity] How to make so that an IM is not display in WLM window?
Image/Graphics delay
is sandbox down?
SSLHandshakeException- adCenter Production Environment
winCE4.2 and CF2.0 SP1(a strange problem) pls help

Smart Devicet

How setup Cellular Line (GPRS) modem by visual C#
OutOfMemory exception while loading images from file
Does and application done for Pocket PC 2003 runs in Windows Mobile 5
JPG image loading and rotation on Pocket PC 2003
Memory insufficient on Mobile 5.0 emulator
Interject the sound thru the voice channel (microphone) , so that the voice and the sound are mixed thru every possib
Information / Error messages
Make a 'sticky' blog post
Longitude, latitude problem
GPRS Connection Setup in Code

How to make custom text for pushpin (pulling from xml element)

I am looking to create a custom pushpin, where instead of the default pushpin appearing, you see a rectangle with the name/title of the location.

The trick is I want to pull that title from the same geo-coded xml file which is used to display the layer when you hover over.

Okay so below is the code I am working with currently.

I have seen the custom pushpins used - but Im at a loss as to how to make those custom pushpins be titled based on the title from the xml file.

Here is the code to make custom pushpins - but how do I can't get the title to show up as a variable from the xml file. (" <title> ")

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title>Corpus Christi Theater and Movie Houses</title> <![if !IE]><script src="http://local.live.com/JS/AtlasCompat.js"></script><![endif]>
  <link href="http://dev.virtualearth.net/standard/v2/MapControl.css" type="text/css" rel="stylesheet" />
  <script src="http://dev.virtualearth.net/standard/v2/MapControl.js"></script>

<STYLE TYPE="text/css" MEDIA=screen>
   <!--
   .pinEvent
   {
   width:80px;height:17px;
   font-family:Arial,sans-serif;
   font-weight:bold;font-size:8pt;
   color:White;overflow:hidden;
   cursor:pointer;text-decoration:none;
   text-align:center;background:#0000FF;
   border:1px solid #FF0000;
   z-index:5}

   -->
  </STYLE>

  <script>
        var map = null;

        function OnPageLoad()
        {
             var params = new Object();
             params.latitude = 27.8377;
             params.longitude = -97.3510;
             params.zoomlevel = 10;
             params.mapstyle = Msn.VE.MapStyle.Hybrid;
             params.showScaleBar = true;
             params.showDashboard = true;
             params.dashboardSize = Msn.VE.DashboardSize.Normal;
             params.dashboardX = 20;
             params.dashboardY = 20;

             map = new Msn.VE.MapControl(document.getElementById("myMap"), params);
           map.Init();

          //THIS is static java code
          // I want to bring these elements in from the xml file rather than remaining static
           map.AddPushpin('pinSite', 27.6977, -97.3510, 2, 2, 'pinEvent', 'Century 16');

        }
  </script>
</head>
<body onLoad="OnPageLoad()">
  <div id="myMap" style="WIDTH: 700px; HEIGHT: 500px; OVERFLOW:hidden">
  </div>
</body>
</html>

Answer this question

How to make custom text for pushpin (pulling from xml element)

U&#287;ur G&#252;m&#252;&#351;han



<rss version="2.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
<channel>
<title>Corpus Christi Area Theater Locations</title>
<link>http://www.url.com/</link>
<description>Thanks for checking in out - Stephen Miessner</description>
<item>
<title>Century 16 Corpus Christi</title>
<link>http://www.centurytheaters.com/search/index.html theaterSelect=56</link>
<description>This is the cleanest theater - no lice or bugs guaranteed</description>
<geo:lat>27.6977</geo:lat>
<geo:long>-97.3510</geo:long>
</item>
<item>
<title>Cinema 4 Rockport</title>
<link>http://www.url.com</link>
<description>Check out how to set up your application in the manual</description>
<geo:lat>28.0540</geo:lat>
<geo:long>-97.0413</geo:long>
</item>
<item>
<title>Cinemark Dollar Cinemas - Corpus Christi</title>
<link>http://www.url.com</link>
<description>Description goes here - yep</description>
<geo:lat>27.7000</geo:lat>
<geo:long>-97.3600</geo:long>
</item>
   <item>
<title>Cinemark Tinseltown Movies 16 - Corpus Christi</title>
<link>http://www.url.com</link>
<description>Description goes here - yep</description>
<geo:lat>27.7376</geo:lat>
<geo:long>-97.4369</geo:long>
</item>
   <item>
<title>Five Star Cinema</title>
<link>http://www.url.com</link>
<description>Description goes here - yep</description>
<geo:lat>27.8598</geo:lat>
<geo:long>-97.6285</geo:long>
</item>
   <item>
<title>Northshore Cinema 8</title>
<link>http://www.url.com</link>
<description>Description goes here - yep</description>
<geo:lat>27.9445</geo:lat>
<geo:long>-97.2907</geo:long>
</item>
   <item>
<title>Rio - Plaza IV - Alice</title>
<link>http://www.url.com</link>
<description>Description goes here - yep</description>
<geo:lat>27.7683</geo:lat>
<geo:long>-98.0403</geo:long>
</item>
   <item>
<title>Rio 6</title>
<link>http://www.url.com</link>
<description>Description goes here - yep</description>
<geo:lat>28.4043</geo:lat>
<geo:long>-97.7404</geo:long>
</item>
   <item>
<title>Rio 7 - Kingsville</title>
<link>http://www.url.com</link>
<description>Description goes here - yep</description>
<geo:lat>27.4589</geo:lat>
<geo:long>-97.6924</geo:long>
</item>
</channel>
</rss>
ekekakos



<html>
<head>
<title></title>
    <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
    <meta content="C#" name="CODE_LANGUAGE">
    <meta content="JavaScript" name="vs_defaultClientScript">
    <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <META http-equiv="imagetoolbar" content="no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js"></script>
<script>
var map = null;
var layerid=1;
function GetMap()
  {
map = new VEMap('myMap');
        map.LoadMap(new VELatLong(27.8377, -97.3510), 10 ,'h' , false);
        var dash = map.vemapcontrol.GetDashboard();
        //
       var dashtbody = dash.GetElement("tbody");
        var dashfooter=document.createElement("div");
        dashfooter.className="footer";
      dashtbody.appendChild(dashfooter);
  }
function AddMyLayer(type)
  {
   var veLayerSpec = new VELayerSpecification();
   veLayerSpec.Type = type;
   veLayerSpec.ID = layerid;
   veLayerSpec.LayerSource = 'rss.xml';
   veLayerSpec.Method = 'get';
   veLayerSpec.FnCallback = onFeedLoad;

  map.AddLayer(veLayerSpec);

  layerid++;
  }
  function onFeedLoad(feed)
  {
  var d=document.getElementById("alertdiv")
  d.style.display = "inline";
  d.innerHTML = 'Loading Complete. There are '+feed.length+' Theaters in This List.';
  setTimeout(function() {document.getElementById("alertdiv").style.display="none";}, 5000);
  }

</script>
</head>
<body onLoad="GetMap();AddMyLayer(VELayerType.GeoRSS);">
<div id='myMap' style="position:relative; width:600px; height:500px;"></div>
<div id='alertdiv' class="alert"></div>
</body>
</html>
J M B

The cool thing about this -

It loads data from an XML file - including the pushpins.

I have utilized Dr Neil's format to add a onClick even to the pushpins.

Then the right hand side gets populated with data from the xml file upon clicking the pushpin.
mpco
cool project... did you solve it
JohnPrem

Here is my XML file - abbreviated entries

< xml version="1.0" encoding="UTF-8" >
<houses>
<theater>
<theater_name>Century 16 Corpus Christi</theater_name>
<theater_id>6110</theater_id>
<theater_address>6685 South Padre Island Drive</theater_address>
<theater_city>Corpus Christi </theater_city>
<theater_state>TX </theater_state>
<theater_zip>78469</theater_zip>
<theater_phone>(361)985-2002</theater_phone>
<theater_attributes></theater_attributes>
<theater_ticketing>N</theater_ticketing>
<theater_closed_reason></theater_closed_reason>
<theater_location>6685 South Padre Island Drive</theater_location>
<theater_screens>16</theater_screens>
<theater_seating>Stadium</theater_seating>
<theater_adult> 7.25</theater_adult>
<theater_child> 4.75</theater_child>
<theater_senior> 4.75</theater_senior>
<theater_sound>Digital,Dolby</theater_sound>
<image>photo.gif</image>
<imagethumb>thumbnail.gif</imagethumb>
<imagelogo>logo.gif</imagelogo>
</theater>
<theater>
<theater_name>Marvin Baker Middle School</theater_name>
<theater_id>6917</theater_id>
<theater_address>3445 Pecan</theater_address>
<theater_city>Corpus Christi</theater_city>
<theater_state>TX</theater_state>
<theater_zip>78411</theater_zip>
<theater_phone>(361)729-4448</theater_phone>
<theater_attributes></theater_attributes>
<theater_ticketing>N</theater_ticketing>
<theater_closed_reason></theater_closed_reason>
<theater_location>3445 Pecan</theater_location>
<theater_market>Corpus Christi</theater_market>
<theater_screens>4</theater_screens>
<theater_seating></theater_seating>
<theater_adult> 6.00</theater_adult>
<theater_child> 4.00</theater_child>
<theater_senior> 4.00</theater_senior>
<theater_lat>27.7428</theater_lat>
<theater_lon>-97.3977</theater_lon>
<theater_sound></theater_sound>
<image>photo.gif</image>
<imagethumb>thumbnail.gif</imagethumb>
<imagelogo>logo-.gif</imagelogo>
</theater>
</houses>
Rattlerr

Unfortunately V3 does not support the loading of numbered pushpins - that I have discovered to date.

However I was able to load custom icons (images) for the pushpins.

here is my js file:

var map = null;//Map
var pPOINT = new Array();//set array for call back to center
var plzip;//holds zip field from xml file
// var location;//holds location field from xml file
var pinID=1; //Pin ref number
var PLPinNo;//record no.
var pin;//used when placing pin
var pli;//recordcount
var loc; //first pin
var pins = new Array(null,null);
var clickCounts = new Array(0,0);

//
function HideInfo()
{
setTimeout("HideInfoTable()",0);
}
function HideInfoTable()
{
InfoBoxTable.style.visibility = 'hidden';
}
//
function GetMap()
{
displaymap = new VEMap('contents');
//bigmap.LoadMap();
displaymap.LoadMap(new VELatLong(27.8377, -97.3510), 10 ,'h' , false);
map = new VEMap('plMap');
map.LoadMap();

VEPushpin.ShowDetailOnMouseOver = false;

//bigmap.SetZoomLevel(10);
//
var dash = displaymap.vemapcontrol.GetDashboard();
var dashtbody = dash.GetElement("tbody");
var dashfooter=document.createElement("div");
dashfooter.className="footer";
dashtbody.appendChild(dashfooter);

//

div_HR.innerHTML='Corpus Christi Theaters and Movie Houses'

xmldso_list.recordset.moveFirst;
pli=xmldso_list.recordset.RecordCount ;
plgo();
}

function plgetfirst()
{
// loc=map.GetCenter();
// plgo();
}

function plgo()
{
//read file
plzip=xmldso_list.recordset("theater_zip");
var pCITYST=xmldso_list.recordset("theater_city");
var pLOCATION=xmldso_list.recordset("theater_address");
var pNAME=xmldso_list.recordset("theater_name");
var pTHUMBNAIL=xmldso_list.recordset("imagethumb");
var pIMAGE=xmldso_list.recordset("image");
var pall=pLOCATION+' '+pCITYST+' '+plzip
map.Find('pNAME',pall,null,centergo);//go to Centergo after find
}

function centergo()
{
var plgc=map.GetCenter();
pPOINT.push(plgc);
plzip=xmldso_list.recordset("theater_zip");
var pCITYST=xmldso_list.recordset("theater_city");
var pLOCATION=xmldso_list.recordset("theater_address");
var pNAME=xmldso_list.recordset("theater_name");
var pTHUMBNAIL=xmldso_list.recordset("imagethumb");
var pIMAGE=xmldso_list.recordset("image");
var pURL=xmldso_list.recordset("theater_location");
var pall=pLOCATION+' '+pCITYST+' '+plzip
PLPinNo=xmldso_list.recordset.absoluteposition;//get record no for pin
pin = new VEPushpin(
pinID,
plgc,
pTHUMBNAIL,
" "+pNAME+" ",
//pLOCATION+'<br />'+pCITYST+' '+plzip+'<br />:number '+PLPinNo,
// '<div><a onMouseOver=filltable(' + PLPinNo + ')>' + pLOCATION + '<br />' + pCITYST + '¸ ' + pCITYST + ' ' + plzip + '<br /><img border="0" src="' + pTHUMBNAIL + '" /></a><div>',
'<div><a onClick=filltable(' + PLPinNo + ')>' + pLOCATION + '<br />' + pCITYST + '¸ ' + pCITYST + ' ' + plzip + '<br /><img border="0" src="more-info.gif" /></a><div>',
'iconStyle',
'titleStyle',
'detailsStyle'
);
displaymap.AddPushpin(pin);
div_RECORD.innerHTML='Loading record:<br /> '+pNAME+', '+pall+'<br />Record '+PLPinNo+' of '+pli+' <br /><img src="' +pIMAGE+ '" class="preload-pImage" alt="dsply-set-none-class" />';
//
//VEPushpin.OnClick = filltable(PLPinNo);
//
pPOINT.push(map.GetCenter()); //add center to array to position map when done
pinID++;

if (PLPinNo<pli)

//if there are more records go to plgo
{
xmldso_list.recordset.moveNext;
plgo();
}
else
{
displaymap.SetMapView(pPOINT);//set map for best view based on pin locations;
//displaymap.SetZoomLevel(10);
div_RECORD.innerHTML=pli+' records loaded';
HideMenus();

}

}

//

function onPinLoad(pin)
{
pin.style.zIndex = 102;
pin.parentNode.style.zIndex = 102;
}

//
//function onRecordsLoaded()
//{
//
VEPushpin.prototype.GetContent= function()
{
var pinId=this.ID+"_"+this.m_vemap.GUID;
var content="<img onload='onPinLoad(this)' class='"+this.IconStyle+"' src='"+this.Iconurl+"' id='"+pinId+"' ";

var isTitleValid=this.Title!=null&&this.Title!="undefined"&&this.Title.length>0;

var isDetailsValid=this.Details!=null&&this.Details!="undefined"&&this.Details.length>0;

if(isTitleValid||isDetailsValid)
{
content+=" onmouseout='VEPushpin.Hide();' onmousedown='VEPushpin.Hide(true);' onmouseover='VEPushpin.Show(\""
+this.m_vemap.GUID
+"\",\""
+this.ID
+"\","
+this.LatLong.Latitude
+","+this.LatLong.Longitude;

if(isTitleValid)content+=", \""+escape(this.Title)+"\"";
else content+=",\"\"";

if(isDetailsValid)content+=", \""+escape(this.Details)+"\"";
else content+=",\"\"";

content+=",\""+this.TitleStyle+"\"";
content+=",\""+this.DetailsStyle+"\"";
content+=");' ";

}
//this adds the click event
content += " onclick='filltable(" + this.ID + ")'";
// content += " onclick='PinClick(" + this.ID + ")'";

// content += " onMouseDown='HideMenus()'";
// content += " onclick='filltable(PLPinNo)'";
// content += " onclick='PinClick()'";

// content += " onclick='filltable(' + PLPinNo + ')'";
// content += " onclick=filltable(' + PLPinNo + ') ";
// content += " onclick='PinClick()'";
// content += " onclick='filltable(PLPinNo)'";

content+=" />";
return content;
}
//
//}

//
//function MM_goToURL() { //v3.0
// var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
// for (i=0; i<(args.length-1); i+=2) eval(args+".location='"+args[i+1]+"'");
//}
//

//
function PinClick(id)
{
clickCounts[id]++ ;
alert("Clicked pin " + id);

}

//

function filltable(PLPinNo)
{

xmldso_list.recordset.absoluteposition=PLPinNo
div_HR.innerHTML=xmldso_list.recordset("theater_name")
// div_NAME.innerHTML=xmldso_list.recordset("fname") + ' ' + xmldso_list.recordset("lname")
div_NAME.innerHTML=xmldso_list.recordset("theater_name")
div_ADDRS.innerHTML=xmldso_list.recordset("theater_address")
div_CITY.innerHTML=xmldso_list.recordset("theater_city")
div_STATE.innerHTML=xmldso_list.recordset("theater_state")
div_ZIP.innerHTML=xmldso_list.recordset("theater_zip")
div_PHONE.innerHTML=xmldso_list.recordset("theater_phone")
div_SCREENS.innerHTML=xmldso_list.recordset("theater_screens")
div_ADULT.innerHTML=xmldso_list.recordset("theater_adult")
div_CHILD.innerHTML=xmldso_list.recordset("theater_child")
div_SENIOR.innerHTML=xmldso_list.recordset("theater_senior")
div_SOUND.innerHTML=xmldso_list.recordset("theater_sound")
// div_MAI.innerHTML="<a href=mailto:"+xmldso_list.recordset("email") + ">" + xmldso_list.recordset("email")+ "</a>"
div_LOGO.innerHTML="<img src='"+xmldso_list.recordset("imagelogo")+"'>"
div_IMAGE.innerHTML="<img src='"+xmldso_list.recordset("image")+"'>"
// div_TITLE.innerHTML=xmldso_list.recordset("position")

}

function MM_preloadImages(id) { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function HideMenus()
{
setTimeout("HideOpenMenus()",2000);
}
function HideOpenMenus()
{
div_RECORD.style.visibility = 'hidden';
disablePushpin.style.visibility = 'hidden';
InfoBoxTable.style.visibility = 'visible';
VEPushpin.ShowDetailOnMouseOver = 'true';
//document.onmousedown=noLeftClick;
//onRecordsLoaded();
}
function noLeftClick() {
if (event.button==1) {
//alert('You can NOT Left-Click on this page -- but you CAN Right-Click.')
return false;
}
}
J M B
<html>
<title>Corpus Christi Theater and Movie House Locator Map - Caller.com</title>
<script src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js"></script>
<script src="javascript.js"></script>
<link href="stylesheet.css" rel="stylesheet" type="text/css">

</head>

<body onLoad="GetMap();HideInfo()">

<xml id=xmldso_list src="xmlfile.XML"></xml>
<div id='WRAPPER'>



<div class="disablePushpin" id="disablePushpin">Loading Pushpins</div>
<div class="contents" id="contents"></div>
<div id='InfoBox'>

<H1><div id="div_HR"></div></H1>
<div id="InfoBox-Cell">
<div id="div_RECORD"></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="InfoBoxTable">
<tr>
<td colspan="2"><div id="div_IMAGE"></div></td>
</tr>
<tr>
<td colspan="2"><div id="div_NAME"></div></td>
</tr>
<tr>
<td colspan="2"><div id="div_ADDRS"></div></td>
</tr>
<tr>
<td colspan="2"><div id="div_CITY"></div><div id="div_STATE"></div><div id="div_ZIP"></div></td>
</tr>
<tr>
<td colspan="2"><div id="div_PHONE"></div></td>
</tr>
<tr>
<td width="32%"><strong># SCREENS</strong></td>
<td width="68%"><div id="div_SCREENS">Available</div></td>
</tr>
<tr>
<td><strong>ADULTS</strong></td>
<td><div id="div_ADULT">Price</div></td>
</tr>
<tr>
<td><strong>CHILDREN</strong></td>
<td><div id="div_CHILD">Cost</div></td>
</tr>
<tr>
<td><strong>SENIORS</strong></td>
<td><div id="div_SENIOR">Admission</div></td>
</tr>
<tr>
<td><strong>SOUND</strong></td>
<td><div id="div_SOUND">System</div></td>
</tr>
<tr>
<td colspan="2"><div id="div_LOGO"></div></td>
</tr>
</table>
</div>
</div>
<div id="clear"></div>
<div id='alertdiv' class="alert"></div>
<div id='plMap' style="position:relative; width:68px; height:1px;" ></div>
</body>
</html>
How to make custom text for pushpin (pulling from xml element)

Answer this question