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.
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:
- 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.
- 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.
- 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 …
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.
- 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:
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');
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.
- 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.
- Now you can modify the code and the XML-description and then save and publish the new block:
- 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.