MapForums

You may have heard already about Microsoft's Popfly. This is really the ultimate mashup-tool. Click on the image below for a video-tutorial.

Popfly in 15 Minutes

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 Microsoft Silverlight and you can just drag and drop so called blocks from the toolbox to the canvas. Let's have a quicky:

1. 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.
   
2. 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.
   
3. 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.
   
4. 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.*

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 'Interactive SDK'.

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.

Now you can flip through the tabs on the top of the page to see the source code:

So how do we bring this now to Popfly? Well let's get back to our mashup.

1. 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:

   VirtualEarthClass.map.DeleteAllShapes();

And after we added the pushpins we set the center and zoom level as well as the map-style:

VirtualEarthClass.map.SetCenterAndZoom(new VELatLong(51.461522,-0.929271),12);

VirtualEarthClass.map.SetMapStyle('r');
 

*

That's already it:
*

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.

1. 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.
   
2. Now you can modify the code and the XML-description and then*save and publish the new block:
   
   
3. 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 ...
   
   ... and if you want to have a look at the mashup yourself, here it is.