Virtual Earth Mashups for Everyone [Archive]

Johannes Kebeck's Blog

09-15-2007, 03:25 PM

You may have heard already about <a href="http://www.popfly.ms/" target="_blank">Microsoft's Popfly</a>. This is really the ultimate mashup-tool. Click on the image below for a video-tutorial. <a title="Popfly in 15 Minutes" href="http://soapbox.msn.com/video.aspx?vid=43f66911-2acf-468a-b455-1fe4636d3553"><img height=102 alt="Popfly in 15 Minutes" src="http://a1693.g.akamai.net/f/1693/23830/v0001/msnuuv1.download.akamai.com/23830/thumbs/prod/17/18/cf/4d32d356-d55c-414a-9371-7639dacf1817.jpg" width=136 border=0> Popfly in 15 Minutes</a> Obviously I don't want to repeat everything what has already been explained in the video but let's have a look at how easy it can be and how flexible you still are. We will start looking at the ease of use for non-techies and then go into more details for the coders. If you are not a very technical person ... ... sign-up for a*Popfly account and enjoy the experience of the highly interactive mashup-designer. It leverages the power of <a href="http://silverlight.net/" target="_blank">Microsoft Silverlight</a> and you can just drag and drop so called blocks from the toolbox to the canvas. Let's have a quicky: <ol> <li>We start by selecting 'Mashup' from the 'Create Stuff' menu. This opens the designer and you can select so far from more than 300 blocks.*Blocks are objects with some JavaScript-code and an XML-description. As a non-techy you don't have to care about it and you can just browse the categories or use the search-box to look up your controls. Well, I want to create a Virtual Earth mashup - what else could it be :-) and I want to overlay real-time traffic. So I look up the*block 'BBC Travel' and drag it on the Canvas. Then I take the 'Virtual Earth' block drag it on the canvas as well and connect the 2 by clicking on the right circle of 'BBC Travel' first and then on the left circle of 'Virtual Earth'. Popfly recognized the default mapping between these 2 blocks automatically and we don't have 2 configure anything. <a href="http://blu1.storage.msn.com/y1pgaVuGim1rV0_sOMdSOU4bS6BDfH1D7_ab5DgjeJwakJEU8k XsdQsGVyCWreAoIJxmbQJFSevIbNOADmyQnIcOOr4PiPpb_zf"><img style="border-right:0px;border-top:0px;border-left:0px;border-bottom:0px" height=270 alt=Popfly01 src="http://blu1.storage.msn.com/y1pgaVuGim1rV0wmlqfsPEdyG2Tq23EmakK2t1WgMmoSfCSOJO 00_TbZiyojqd62YIclLoOXgaDGGF59Lukm2hd0uovTnPqj6AP" width=400 border=0></a> <li>Now click on 'Preview' in the menu and you already have the real-time traffic on Virtual Earth and can have a closer look at the big car-park around London which some call M25. <a href="http://blu1.storage.msn.com/y1pgaVuGim1rV17j5nn-Itg5rcaJ1qXTDVN2cHMoXmDT5kPYWwWOdBWZIsVhuYvj-uOJK5frhdQPxTcZAC_-YI-q6czIksytU7_"><img style="border-right:0px;border-top:0px;border-left:0px;border-bottom:0px" height=344 alt=Popfly02 src="http://blu1.storage.msn.com/y1pgaVuGim1rV1Vdhu82-NSIqsrHZn1VmdK6X2HrHVafiwmW_H7-hEVswT-q18m2Y__r_1DLPRlainhjP4pvI2OOxALUqfaNRjE" width=401 border=0></a> <li>Well that's nice but since we are talking about 'real-time' or 'near real-time' information you want to make sure that these information are being updated every couple of minutes. That's easy as well. Drag a 'Timer' block from the toolbox to the canvas, connect it to the 'BBC Travel' block and click on the tool to open the configuration wizard. 300 seconds appears to be a reasonable time for traffic-updates. Then click on the tool again to close the wizard and you're done. <a href="http://blu1.storage.msn.com/y1pgaVuGim1rV04--MTvFdCjPuVspc1rsEoRUq20HDeiJRMvMmbySCI9QBgkOKX3vGp NQDDwbs8FjjYzjrPm_p6THtVikdun5OH"><img style="border-right:0px;border-top:0px;border-left:0px;border-bottom:0px" alt=Popfly03 src="http://blu1.storage.msn.com/y1pgaVuGim1rV1PHsmXxOgXjYq6cOXD678wtEZDzuw2cDQWv-2oLROGnVNaG5o5gKM4Yi9HpcbIWkWuGGCy47c6n4nKD4c8M3_i" border=0></a> <li>You can now save the mashup and use it privately just for yourself or you can and publish it and 'mash it out' by accessing it directly, embedding it in other web-sites or even integrate it as a gadget in your Windows Live Space.*</ol> If you are a bit more technical ... ... you still have to sign-up for a Popfly account but you have also the freedom of customizing existing blocks. Since I'm actually interested in real-time traffic for the UK I want to center the map on a different location and I would also like to have a roadmap rather than the default hybrid-style in the 'Virtual Earth' block. This is where it is helpful if you are not completely disgusted by JavaScript. Particularly for Virtual Earth you can have a painless start*with the '<a href="http://dev.live.com/virtualearth/sdk" target="_blank">Interactive SDK</a>'. From the navigation tree on the left hand side select the function you are interested in (here: 'Control the map' => 'Set center and zoom') and you get a real implementation of Virtual Earth. <a href="http://blu1.storage.msn.com/y1pgaVuGim1rV0bhl5GfmnhukUy4qdNhv5Eh_s_XZwuKZ76mdM xJJdC-fA4dokd49-faiaoPuFs0L-clWwGL4BbKASuQ1HUFUtd"><img style="border-right:0px;border-top:0px;border-left:0px;border-bottom:0px" alt=Popfly05 src="http://blu1.storage.msn.com/y1pgaVuGim1rV30f-XEqxdEI-cEpBHBeMudBJANHwZI2_ielrmJ75zacmKnCoTjpnLliVdzjvXv syc99iSScxKQ5EpinMM8JJ1W" border=0></a> Now you can flip through the tabs on the top of the page to see the source code: <a href="http://blufiles.storage.msn.com/y1pLfDzppuxasjHicxfFpk-9VjA6g_iyp2kCa3sEddhehPzZHAYgeZwkDsE_JHUVcfv2oG8eV AXD3A"><img style="border-right:0px;border-top:0px;border-left:0px;border-bottom:0px" alt=Popfly06 src="http://blufiles.storage.msn.com/y1pLfDzppuxasjmREiMqEijRk1KOUD5VL1cp8akTfBg1ero-VuPQR0JDsqbyNEUgAcohphRi-sJQFk" border=0></a> So how do we bring this now to Popfly? Well let's get back to our mashup. <ol> <li>Open the configuration wizard for the 'Virtual Earth' block and click on 'Switch to an advanced view'. Here you can now add your own code. Please note: that in front of the Virtual Earth code you have to set 'VirtualEarthClass' since this is the actual class in Popfly which implements the Virtual earth MapControl. We have to add 3 lines of code: Before we add the pushpins we add the pushpins we delete everything on the map to make sure that we don't have old messages on the map:<pre>VirtualEarthClass.map.DeleteAllShapes();</pre><a href="http://11011.net/software/vspaste"></a></ol>
<blockquote>
And after we added the pushpins we set the center and zoom level as well as the map-style:<pre>VirtualEarthClass.map.SetCenterAndZoom(new VELatLong(51.461522,-0.929271),12);
VirtualEarthClass.map.SetMapStyle('r');
</pre><a href="http://11011.net/software/vspaste"></a>
<a href="http://blufiles.storage.msn.com/y1pLfDzppuxasjUu0W7dsjcJd767vYoKlO1OP6K340HRE91ltP A04whNXcjhftP_FOt_Uf8Rrt6XmE"><img style="border-right:0px;border-top:0px;border-left:0px;border-bottom:0px" height=298 alt=Popfly07 src="http://blufiles.storage.msn.com/y1pLfDzppuxasgsWoBo6RVqoGnKi2wGOu7cwDFY0xVCSh9piXU FUFi87SfpvX_NmQ6gjL9QpRbX1Yc" width=403 border=0></a>*</blockquote>
<blockquote>
That's already it: <a href="http://blufiles.storage.msn.com/y1pLfDzppuxasipRwi4XtvEk8MEbGNAP94JkPrPets9osIcYp1 o50lJNYQh1a17WuXIkB4EXTysLTU"><img style="border-right:0px;border-top:0px;border-left:0px;border-bottom:0px" alt=Popfly08 src="http://blufiles.storage.msn.com/y1pLfDzppuxasjArQdJeOIxjxkAqpaS9G-ASzEeh4at-M3KT7WXq5AVj-eWLEYmVg9Naq1haPn4Jf4" border=0></a>*</blockquote>
For those who like to have full control ...
... Popfly is still a great tool. There is a plug-in for Visual Studio 2005 which allows you to create your own blocks and*share them afterwards with other Popfly users. But Popfly also supports one of the best developer methods: CASE (Copy And Steal Everything). Let's have a look at this. I want to provide my own custom pushpin-symbols depending on the severity of the traffic incident.
<ol>
<li>To get started we select 'Block' from the 'Create Stuff' menu. Now lookup 'BBC Travel' in the toolbox and and click on it to rip the code.
<li>Now you can modify the code and the XML-description and then*save and publish the new block: <a href="http://blufiles.storage.msn.com/y1pLfDzppuxasjZYBPuv7ml6IHO-U4Lcbn5Pv1sdLqXqFygiLfqW8kj2IvFqm9IfzPgnbsbpt62lQM"><img style="border-right:0px;border-top:0px;border-left:0px;border-bottom:0px" alt=Popfly09 src="http://blufiles.storage.msn.com/y1pLfDzppuxasg8LhVMas_MFHNbo0-vjjTS_3IOLJVlcIPkju55k3tTVWezJfrf171Tatc4To1oYfY" border=0></a>
<li>If you are interested in the details go ahead and use the CASE-method on my block 'Hannes BBC-Travel'. Here is the result in my Windows Live Space ... <a href="http://blufiles.storage.msn.com/y1pLfDzppuxasiwhQ_efu403D-18iMW6d8OgT-gHxGDLb2YYI80mAjVixK5mo-Z8tBAkH0GDEFWXVc"><img style="border-right:0px;border-top:0px;border-left:0px;border-bottom:0px" alt=Popfly10 src="http://blufiles.storage.msn.com/y1pLfDzppuxasiNgZIx8ABIfB7C3MILCHKUVNqvA2eT2AyAYJ1 ZO-rjHxfvtl5oI4PE71AjuA0PlQ8" border=0></a> ... and if you want to have a look at the mashup yourself, <a href="http://www.popfly.ms/users/Johannes-Kebeck/Hannes UK-Traffic" target="_blank">here it is</a>.</ol><img src="http://c.services.spaces.live.com/CollectionWebService/c.gif?cid=4819404664324524694&page=RSS%3a+Virtual+Earth+Mashups+for+Everyone&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!1694.entry)