How to bring your own content to Virtual Earth (Part 3) [Archive]

Johannes Kebeck's Blog

09-26-2007, 07:50 AM

In the <a href="http://johanneskebeck.spaces.live.com/blog/cns!42E1F70205EC8A96!1752.entry">first part</a> we have been looking at some general resources to get started with your Virtual Earth development and in the <a href="http://johanneskebeck.spaces.live.com/blog/cns!42E1F70205EC8A96!1792.entry">second part</a> we created an AJAX-enabled ASP.NET web site which will host our various samples. We also added the first type of content - the individual VEShape - which was in this case a pushpin with a traffic cam-image in the infobox. Now we are going a step further and will*import a number of various information into a VEShapeLayer. There are 2 ways how to do this: <ul> <li>Import from a Live Search Maps Collection and <li>Import from an GeoRSS-feed</ul> Live Search Maps Collections <a href="http://maps.live.com/?mkt=en-us">Live Search Maps</a> is the consumer facing implementation of Virtual Earth. It uses a variety of features from the Virtual Earth API and adds a number of further features which are specific to this implementation and may even be specific to a market. For example: traffic overlays are currently only available in the United States and so are the features 'Call for free' and 'Send to mobile' which are*accessible from*the results of a business search. One*very nice*feature is however available for all markets: the Collections. <table cellspacing=0 cellpadding=2 width=785 border=1> <tbody> <tr> <td valign=top width=783>Tip: If you want to see these market-specific features*add the following URL-parameters: <a title="http://maps.live.com/?mkt=en-us" href="http://maps.live.com/?mkt=en-us">http://maps.live.com/?mkt=en-us</a></tbody></table> You can add the results of your searches to a scratch pad and you can even add drawings of type point, polyline or polygon to this scratchpad. These annotations to the map can contain URLs to images or further information. To make the content of the scratch pad persistent you can sign-in with your Windows Live ID and store them in a collection. Such collections can be private or shared and you can make them optionally searchable - a great feature to enhance the user experience of Live Search Maps by adding local knowledge to the global community. Here I have have such a <a href="http://maps.live.com/?v=2&cid=42E1F70205EC8A96!837&encType=1">collection for the London Bus Tour</a>. <a href="http://blu1.storage.msn.com/y1pgaVuGim1rV0n7B0lTuzY3y-CChaqYfJmXSGdUjEGG5sf68o1n4vmNIQSprW_T5j-BHIdbmeLFedJoc25HyD-Wa1I87XdLPuN"><img style="border-top-width:0px;border-left-width:0px;border-bottom-width:0px;border-right-width:0px" alt=07-small src="http://blu1.storage.msn.com/y1pgaVuGim1rV3g6VqWHgFbGQoRLJR-2ZshCPpupfhHP-jr6VJzgovSNf6PVhS0O5gRVNtnCmQOtlp3USVa6OME6xpcDDg1 O-BV" border=0></a> If*you want to share the collection you can use the menu of the scratch pad to do so. You can directly blog it, you can send the URL in an email or you can just copy it to the clipboard. What you get in any case is a tiny URL with a parameter for a Collection ID like shown*here:*<a title="http://maps.live.com/?v=2&cid=42E1F70205EC8A96!837&encType=1" href="http://maps.live.com/?v=2&cid=42E1F70205EC8A96!837&encType=1">http://maps.live.com/?v=2&cid=42E1F70205EC8A96!837&encType=1</a>. While this is extremely simple to use, you might also want to make use of these collections in your custom application with your personal*branding or corporate identity. The Virtual Earth API supports the import of such collections into a VEShapeLayer and we will extend our existing AJAX-enabled application from part 2 and walk through the steps which are required to do that and. First we add a new a AccordionPane to our ASP.NET AJAX web site. Within this pane we have a HTML-control of type checkbox and we define an onclick event for the control which calls the JavaScript-function AaddGCLayer with a couple of parameters. We will discuss these parameters a little bit later.<pre><ajaxToolkit:AccordionPane ID="paneCollection" runat="server">
 <Header>Collection Layer</Header>
 <Content>
 <input id="cbLondonBus" type="checkbox" onclick="AddGCLayer('cbLondonBus',LondonBusLayer,VEDataType .VECollection,'42E1F70205EC8A96!837')" />London Bus Tour<br />
 </Content>
</ajaxToolkit:AccordionPane>
</pre><a href="http://11011.net/software/vspaste"></a>
Now let's look at the JavaScript part. In the global section we define a new VEShapeLayer in which we will import the collection<pre>var LondonBusLayer = new VEShapeLayer();</pre><a href="http://11011.net/software/vspaste"></a>
The function AddGCLayer will import the Live Search Maps collection into this layer. It is a very generic script which will allow us to import not only collections but also GeoRSS-feeds. The parameter we use to call this function are:
<ul>
<li>the name of the HTML-control which is being clicked. This is just used to determine later if the checkbox has been activated or de-activated.
<li>The name of the layer we want to import into
<li>the <a href="http://msdn2.microsoft.com/en-us/library/bb412442.aspx">VEDataType</a> of the data source we want to import into VEShapeLayer. It is a mandatory property for the <a href="http://msdn2.microsoft.com/en-us/library/bb429634.aspx">VEShapeSourceSpecification</a>. Valid properties are VECollection and GeoRSS. The former is what we need here.
<li>The collection ID if it is a VECollection or the URL if it is a GeoRSS feed</ul>
In the function we first check if the checkbox has been activated or deactivated. If it has been deactivated we remove all VEShapes from this particular layer. If it has been activated we add define the <a href="http://msdn2.microsoft.com/en-us/library/bb429634.aspx">VEShapeSourceSpecification</a>*with the parameters mentioned above and then import the data into the layer. <pre>function AddGCLayer(control, layer, type, url)
{
if (document.getElementById(control).checked == false) {
layer.DeleteAllShapes();
}
else {
currentLayer = layer;
var layerSpec = new VEShapeSourceSpecification(type, url, layer);
map.ImportShapeLayerData(layerSpec,onGCLoad);
}
}</pre><a href="http://11011.net/software/vspaste"></a>
You also see that we define a callback-function when we execute the method <a href="http://msdn2.microsoft.com/en-us/library/bb429606.aspx">ImportShapeLayerData</a>. This*is an optional parameter and allows us e.g. to modify the data once we imported*them. In our example I want to use this function to replace the default icons with a numbered pushpin. To do that we first <a href="http://msdn2.microsoft.com/en-us/library/bb429622.aspx">determine the number of VEShape-objects in our VEShapeLayer</a>. Then we <a href="http://msdn2.microsoft.com/en-us/library/bb412540.aspx">loop through all the VEShape-objects</a> and <a href="http://msdn2.microsoft.com/en-us/library/bb412425.aspx">set a custom icon</a>. Our icons are not just defined by an image but also by a text-field which we will populate with*a number.<pre>function onGCLoad()
{
var numShapes = currentLayer.GetShapeCount();
for(var i=0; i < numShapes; ++i)
{
var s = currentLayer.GetShapeByIndex(i);
s.SetCustomIcon("<div style='position:absolute; top:0px; left:0px;'><img src='poi_search.gif' /></div><div style='position:absolute; top:0px; left:0px; width:25px; text-align: center; color: #ffffff'>" + (i+1) + "</div>");
}
} </pre>

<table cellspacing=0 cellpadding=2 width=786 border=1>
<tbody>
<tr>
<td valign=top width=784>Tip: If you want to debug your JavaScript in Visual Studio and your default browser is the Internet Explorer you may want to uncheck 'Disable script debugging (Internet Explorer)' in the advanced tabulator of the Internet Explorer options dialog. Now you can set breakpoints in your JavaScript and debug the code in the same*fashion as you do with .NET-managed code. <a href="http://blu1.storage.msn.com/y1pgaVuGim1rV3U0vKSU-hIbQgpZOGNtuEbptTdyY6JwqMT81Zu8S7jZ68el941ABIlXqEU 4RkRiWfPcWzh0GaEySt6ut1FonsN"><img style="border-right:0px;border-top:0px;border-left:0px;border-bottom:0px" alt=10-small src="http://blu1.storage.msn.com/y1pgaVuGim1rV1n_NHBfMtNNi2nEk7XDqC2amAUoPtzShggC8F xBgzGIAroZNYNIa6QjSgx3e-QIV6wqJj8IhrCHnMvjAjJ2_Gq" border=0></a> </tbody></table>
All right, that's it we can now see our Live Search Maps Collection in our custom Virtual Earth application.
<a href="http://blu1.storage.msn.com/y1pgaVuGim1rV3Db69VNYrXuBUIuhKXpzZrEynZhgumXdeUyAn fY6sa4Wcma6jOp2oCaVBuEG664tLRHG-BVDymnwcQN9Gc_K0t"><img style="border-right:0px;border-top:0px;border-left:0px;border-bottom:0px" alt=09-small src="http://blu1.storage.msn.com/y1pgaVuGim1rV309Dd5pKxFBs3rwmmZu78vlCdGiMniKMXJrWa B0j2hME9Jo7YFofXbp4V1RTTL1p-AhBURUzp3b-Zvk-_BNzl_" border=0></a>
GeoRSS-deeds
Since the methods to add a GeoRSS-feed are exactly the same as the ones which are being used to add a Live Search Maps collection we will add such a sample in this part as well.
GeoRSS is an extension to the well known Real Simple Syndications (RSS). It adds tags for the location information but unfortunately a unique standard has not yet*been established. Virtual Earth support the <a href="http://georss.org/simple">simple specification</a> according to GeoRSS.org as well as the <a href="http://georss.org/gml">GML-specification</a> as suggested by the Open Geospatial Consortium (OGC). Both of them support points, polylines and polygons. Let's have a look at such a feed. You see below that there is actually just one tag more than in a typical RSS-feed.<pre><?xml version="1.0"?>
<rss version="2.0"
xmlns:georss="http://www.georss.org/georss"
xmlns:gml="http://www.opengis.net/gml">
<channel>
<item>
<title>My Point</title>
<link></link>
<description></description>
<georss:point>51.449139537118 -1.0529091954231</georss:point>
</item>
<item>
<title>My Line</title>
<description></description>
<georss:line>51.46138386849 -0.9245842695236 ... 51.4492130864 -1.0533142089843</georss:line>
</item>
<item>
<title>My Polygon</title>
<description></description>
<georss:polygon>51.46221441192 -0.9249061346054 ... 51.46221441192 -0.9249061346054</georss:polygon>
</item>
 </channel>
</rss></pre><a href="http://11011.net/software/vspaste"></a>
The items in such a GeoRSS-feed are described within XML-tags so it is pretty simple to create your own parser if your source data is available e.g. in your existing MapPoint-files or in a database. In a later part we will have a look at how to create these GeoRSS-feeds directly from SQL Server 2008 (the one with the spatial engine). However, if you*want to reuse your existing spatial-data it is more complex and you would probably look at tools like <a href="http://www.safe.com/">Safe FME</a>. Safe FME can read more than 200 spatial formats and*has a huge number of useful transformers e.g. to generalize the*geometries*(node-thinning) or to convert coordinate systems. Another tool which reads spatial data from GML, AutoDesk (*.dxf), ESRI (*.shp) and MapInfo (*.mif) as well as KML-files is the <a href="http://www.brightisolutions.com/">GeoFeeder from BRIGHTisolutions</a>. It doesn't have the rich functionality of Safe FME but depending on your requirements it*might be a*cost-efficient solution. <a href="http://blu1.storage.msn.com/y1pgaVuGim1rV1bkdTZKXmI0p6CnI1039eB3bDDXfm73Pebs31 W5YkaRfQ8R17kPqqhYzbV2wrhEbyraiC0CjRnR6u7LTJ19KDI"><img style="border-right:0px;border-top:0px;border-left:0px;border-bottom:0px" alt=11-small src="http://blu1.storage.msn.com/y1pgaVuGim1rV3S2rtd5UlU-cBEaFs1ZHBGobhSs8zL0DjW3HeT-QLpZFdVJpnvWO5rLprdMETTZoy9wsEBovHhLHUFYxq4sAqO" border=0></a>
Now let's take the GeoRSS-feed as given and implement an example in our sample web site. First we add another AccordionPane to our web site. You see that we call the same JavaScript-function as before but there are 2 differences in the parameters:
<ul>
<li>We use VEDataType.GeoRSS instead of VEDataType.VECollection and
<li>We point the URL to our GeoRSS-feed rather than to a collection id</ul><pre><ajaxToolkit:AccordionPane ID="paneGeoRSSLayer" runat="server">
 <Header>GeoRSS Layer</Header>
 <Content>
 <input id="cbLCZ" type="checkbox" onclick="AddGCLayer('cbLCZ',LCZLayer,VEDataType.GeoRSS,'Geo RSS/LondonCongestionZone.xml')" />London Congestion Zone<br />
 </Content>
</ajaxToolkit:AccordionPane></pre><a href="http://11011.net/software/vspaste"><a href="http://11011.net/software/vspaste"></a>
As mentioned before the JavaScript part is exactly the same we are just declare one more layer in our global section<pre>var LCZLayer = new VEShapeLayer();</pre><a href="http://11011.net/software/vspaste"></a>
This is already it. We have our first GeoRSS-feed in*our sample*application
<a href="http://blu1.storage.msn.com/y1pgaVuGim1rV14JbJFBTiapuJn8C8W8CsAps__6eJkfCLsFYh JGH6PHGHqJ4oe_T3YhX4FKNxtKq6bPM0Jv-BWpjgsQG5TPefx"><img style="border-right:0px;border-top:0px;border-left:0px;border-bottom:0px" alt=12-small src="http://blu1.storage.msn.com/y1pgaVuGim1rV2jEKuSA0at9FU9N-AVUVZhM1t5WQgJg267UepNafMTVNdvVgXR7t6bu7ELfagCqGZd X_42BrVZdvQO_Ourx2oV" border=0></a>
Virtual Earth has unfortunately one limitation in the usage of GeoRSS-feeds: the GeoRSS-feed has to be on the same domain as your Virtual Earth application. Well that is usually not a problem if you just use your own data but if you want to leverage all the great information which are on the web available*as GeoRSS-feeds it can be quite disappointing. There is however a nice workaround which has been published by Mike McDougall from <a href="http://www.brightisolutions.com/">BRIFGTisolution</a> on <a href="http://www.viawindowslive.com/Articles/VirtualEarth/AccessingRemoteGeoRSS.aspx">Via Windows Live</a>. It basically uses a generic Web Handler as a proxy to execute an HTTPWebRequest to the GeoRSS-feed in the external domain. We will implement this workaround within a try ... catch clause to overlay an GeoRSS-from Flickr.
In the content part of our AccordionPane we add another HTML-control of type checkbox which uses the URL to the Flickr-feed as parameter<pre><input id="cbFlickr" type="checkbox" onclick="AddGCLayer('cbFlickr',FlickrLayer,VEDataType.GeoRS S,'http://api.flickr.com/services/feeds/geo/?tags=ufo&lang=en-us&format=rss_200')" />Flickr<br /></pre><a href="http://11011.net/software/vspaste"></a>
In the global part of our JavaScript we define another layer<pre>var FlickrLayer = new VEShapeLayer();</pre><a href="http://11011.net/software/vspaste"></a>And then we*extend our existing JavaScript AddGCLayer*with the try ... catch clause so that we redirect to our WebHandler if we hit the error "Permission denied".<pre>function AddGCLayer(control, layer, type, url)
{
if (document.getElementById(control).checked == false) {
layer.DeleteAllShapes();
}
else {
try
 {
currentLayer = layer;
var layerSpec = new VEShapeSourceSpecification(type, url, layer);
map.ImportShapeLayerData(layerSpec,onGCLoad);
}
catch(err)
{
if (err.message="Permission denied")
{
var proxyPath = "GeoRSSProxy.ashx?source=" + url;
currentLayer = layer;
var layerSpec = new VEShapeSourceSpecification(type, proxyPath, layer);
map.ImportShapeLayerData(layerSpec, onGCLoad);
}
}
}
}
</pre><a href="http://11011.net/software/vspaste"></a>
Now that this redirection is prepared we need to add of course our WebHandler. We call it GeoRSSProxy, imports the following namespaces:
<ul>
<li>Imports System.IO
<li>Imports System.Net</ul>
...and replace the default-code in 'Public Sub ProcessRequest' with the code below<pre>Dim source As String = context.Request.QueryString("source")
context.Response.ContentType = "text/xml"
context.Response.ContentEncoding = System.Text.Encoding.UTF8

Dim request As HttpWebRequest = DirectCast(HttpWebRequest.Create(source), HttpWebRequest)
Dim response As HttpWebResponse = DirectCast(request.GetResponse(), HttpWebResponse)
Dim stream As StreamReader = New StreamReader(response.GetResponseStream(), Encoding.ASCII)
context.Response.Write(stream.ReadToEnd())</pre><a href="http://11011.net/software/vspaste"></a>
Here we go:
<a href="http://blu1.storage.msn.com/y1pgaVuGim1rV2WqtVZvuhblMRZnXeLl0PmH3eMYDDgpH4V-IG9hxSWlxO4PdTg-aLSfyOYqLYLx2wHC8Gj7_bTv0OHoQ7DGgGb"><img style="border-right:0px;border-top:0px;border-left:0px;border-bottom:0px" alt=13-small src="http://blu1.storage.msn.com/y1pgaVuGim1rV3URW7ugFQIXFibZiApaq4PEfh1sP6ZUY-dNGOOgo76YiAgAz6NS5XCD6983Hfd6sMl_QFmoraArIBm2O9im IJd" border=0></a>*
You can preview and download the complete source code <a href="http://mappointemea.members.winisp.net/Collections/Default.aspx">here</a>.
<div style="padding-right:0px;display:inline;padding-left:0px;float:none;padding-bottom:0px;margin:0px;padding-top:0px">Technorati Tags: <a href="http://technorati.com/tags/Virtual Earth" rel=tag>Virtual Earth</a>, <a href="http://technorati.com/tags/Live Search Maps" rel=tag>Live Search Maps</a>, <a href="http://technorati.com/tags/Collection" rel=tag>Collection</a>, <a href="http://technorati.com/tags/GeoRSS" rel=tag>GeoRSS</a>, <a href="http://technorati.com/tags/VEShapeLayer" rel=tag>VEShapeLayer</a></div></a><img src="http://c.services.spaces.live.com/CollectionWebService/c.gif?cid=4819404664324524694&page=RSS%3a+How+to+bring+your+own+content+to+Virtu al+Earth+(Part+3)&referrer=" width="1px" height="1px" border="0" alt=""><img style="position:absolute" alt="" width="0px" height="0px" src="http://c.live.com/c.gif?NC=31263&NA=1149&PI=88469&RF=&DI=3919&PS=85545&TP=johanneskebeck.spaces.live.com&GT1=JohannesKebeck">

Click here to view the article. (http://JohannesKebeck.spaces.live.com/Blog/cns!42E1F70205EC8A96!1817.entry)