I mentioned in yesterday’s post that there was a Microsoft Virtual Earth block in Microsoft Popfly which allows you to create your own mapping applications with a WYSIWYG interface. So, I figured it was time I posted a bit of a walk through on the capabilities. Now, you don’t have to be a developer to understand or use Popfly – what you see is what you get means, you get a graphical user interface for creating these applications and don’t have to deal with a single line of code. Unless, of course you want to (there’s an HTML editor just for you). What’s great is that when you’re done, you can then take the application from Popfly and share it into Windows Live Gallery or Facebook among other sites. Maps for everyone!
First off, what is Popfly?
MicrosoftÂ® Popflyâ¢ is the fun, easy way to build and share mashups, gadgets, games, Web pages, and applications.
Build Mashups. Mashups are a kind of application that take information from many places and mix it together. With Popfly’s mashup creator you’ll be able to take photos, RSS feeds, and many other kinds of information and combine them to create your own personalized view of the web.
Create Games. Popfly is a simple way to create and share games with your friends. Choose from a variety of built-in templates or start from scratch to create a side scrolling game, a 2D shoot-em-up, or a host of others. And best of all, you can get started without writing a line of code.
Design a Web Page. Always wanted to create a web page but thought it was too hard? Popfly makes it easy with its simple web page creator.
With respective to Virtual Earth – Map information with Popfly. Whether it’s your Twitter friends, photos, or something like earthquake activity, Popfly makes it simple to put information onto a map so you can see it and share it with your friends. You can read more about Popfly capabilities on the Popfly overview page.
Now, how do I build a Virtual Earth application using Popfly?
First thing you need to do is sign in to Popfly with your Windows Live ID. Go to Popfly.com and click the sign in button. This will prompt you for your credentials. Once authenticated, you’ll have the option to create a game, web page or mashup – click “Create a Mashup.” On the left, click “Maps.” You’ll see there is a whole slough of map blocks that have been created – a few by Microsoft and many more by the community developers. You can select one that makes sense for your application, but I’ll walk through using the “Virtual Earth” block. Oh, and a block is the GUI representation of the code you don’t see that allows you to create the application without writing bits.
Once you select the Virtual Earth block, you can then select from a few features to build your application. The interface will allow you to add pushpins by lat/long, add pushpins by location, add pushpins by address, set the map view and delete all pushpins. If you’re not a geo-nerd and just want a Virtual Earth application on Facebook to show your house you’ll want to use add pushpins by address – much easier.
Now, each menu item has its own list of attributes. So, for adding a pushpin by lat/long you fill in the form for latitude, longitude, URL (a link to an image for the pushpin popup), the title on your popup, the description included with the popup, if you want the map centered on the pin, the default zoom level and optionally to use the URL for the image above as a custom pushpin instead of our sheik red pushpin.
Click ok, then click run from the menu in the upper left. You’ll see your Virtual Earth map with the pin (optionally custom, of course). You can change to Bird’s Eye, Road, 3D, whatever and still see your pin. Hover over the pin and you’ll see your title, description and optionally your image. You’re done creating your application!
I mentioned there are a number of map blocks to choose from for building Popfly applications. Here’s a list of the Virtual Earth relevant blocks with a brief description of each:
- GeoNames – Geocoding.
- VEPushpinListCreator – Creates a list of pushpins.
- Virtual Earth – This is the one I used for this blog post.
- GeoCodeRSS – Geocodes RSS feeds.
- IPlocation – Geocodes IP addresses.
- VEChina – Loads a map using the Virtual Earth Chinese tiles.
How do I publish my Popfly Virtual Earth Application?
To put your new Virtual Earth map with pin into your web page, you’ll first need to save it. Give it a project name, description and optional tags. Once it is save, you’ll see your application name at the top of the page. Click it and see the application. You can see the application I built right on Popfly under my user account. From the application page (under your own user account) you’ll see a button to “Share” your application. Your application will refresh and you’ll see buttons for sharing the application on different web properties such as Windows Live Gallery, Facebook and Digg. I’ve selected to add this to my Facebook wall, so click the Facebook icon, then “Post Item on Facebook.” I’ll be redirected to Facebook for permission, click “Post” and BAM, you’re done! It will add a link to your application hosted on Popfly to your Facebook wall.
Note: if you haven’t allowed Popfly to add applications to your Facebook profile you will need to do that first, then go back and add your respective application again. Additionally, if you want to create a Facebook application out of your mashup, you can do that as well. For those of you who missed it, if you have a Facebook and like Virtual Earth you should check out my Virtual Earth Applications on Facebook post.