Excerpt from Yahoo! Maps Mashups
The Flex 2 Yahoo! Maps Mashup
by Charles Freedman
The goal of this article is for you to build a Flex 2 mashup using the ActionScript-Flash (AS-Flash) API. The article will make us of methods and classes of the AS-Flash API, as they are used with Flex 2 and the local connection method. This article will guide you through building a mashup with a data source and the map API. This article is part 1 in a series of articles that will complete this project.
The means you employ to use the AS-Flash API is something of a workaround due to the absence of a Flex 2-compatible maps component. Because of this, much of what you have learned through the previous chapters is very fundamental. Coding the Flex client,
MapConnector class and Flash client pieces can be time-consuming and may cause you to sacrifice the creative spirit you used when working with the AS-Flash API. Having mastered many of the techniques necessary to work with Flex 2 and Yahoo! Maps, you can now explore the space freely with this mashup project.
The Big Idea
Unlike other mashups that combine the power of Yahoo! Maps with other data services, the mashup for this article will not point to outside data like a web service, RSS feed or API. This mashup will be between the Yahoo! Maps API and data you will provide.
The idea of using your own data in a mashup should come as no surprise. Much of the web today is built on user content. User-generated content drives numerous blogs and accounts for the amazing growth of websites in the last few years. You'll find user content on sites that feature product reviews, comments and feedback.
Maps provide a great platform for displaying your own content. Much of what you do, on the weekends for example, likely has some geographic relevance. Each event can be marked on a map, providing a unique way for you to document your weekend, thus generating a map mashup with your own content. Perhaps you took a trip over the weekend, went camping or drove into the city for a day to shop or attend a ball game. Or maybe you hit the links for a round of golf.
Golf, as it turns out, is quite a mapable activity. Occurring in a defined and consistent space, each play of the game takes place on a stretch of land and is marked by each shot. On August 13, 2006, I played 18 holes at Sunol Valley Golf Club in Sunol, California. It happened to be a special occasion, my brother Nathaniel's 26th birthday, and so I took my video camera to grab some rare clips of us swinging away. While there were no birthday hole-in-ones, we did manage to collect some decent and entertaining footage of various shots. I happened to note where some of the shots, both golf and video, were taken.
The mashup you will build will have you define structured data within the application. These data will organize a series of golf shots and contain the following information:
- The player hitting the shot
- The hole the shot was taken on
- The latitude and longitude of the hole on the course
- The path to the .flv (Flash video) file of the captured shot
Your user will be able to select a golf shot, watch the video play and see where the shot was taken on a zoomed-in map featuring satellite imagery of the golf course. This highly adaptable mashup can be transformed into many things, like a recap of your vacation or video tour of your favorite city. One thing is for sure, it may be as much fun to code as it will be for your users to experience.
Planning and Approach
As with any application, planning and approach are important. It helps to know the APIs and web services you are working with very well. (If you are not already experienced with the AS-Flash API, the book Yahoo! Maps Mashups (Wrox, 2007, ISBN: 978-0-470-09778-6) includes several chapters on the AS-Flash API which provide you with all you need to work with the map.
Before coding, it is always good to lay out your objectives and then determine how best to achieve those tasks. Begin with thinking out what your application should achieve. Through the rest of the article, you will see how these steps are used to build the mashup.
- Display the map initially.
- Position the map and set its view type accordingly.
- Author the data you will mash up with the map API.
- Give the user the ability to navigate through the data.
- Display the data as markers on the map based on user selection.
- Play the video clip based on user selection.
This is a simple flow and this pattern of user interaction should be easily replicated with other APIs and web services.
The Flex Client
For this project, it is best to reverse the order of construction of your application. The typical order of completion for a Flex 2/AS-Flash API project is to build the Flash client SWF first. This is followed by the local connection
MapConnector class, and then you build the Flex client to round it out.
Since you will be defining your own data in this mashup, it is best to start developing the Flex client first as that is where the data you build will reside. Another reason to start with the Flex client is to code the user controls first. Since layout and user interaction are such a factor in this mashup, you will need to establish these pieces before setting up the supporting code for the actual map. Using the Flex 2/AS-Flash API approach, while the map is still contained in the Flash client, user-interaction controls are written in the MXML as part of the Flex client.
Architect the MXML
It is now time to architect the mashup. Starting with the MXML, and repeating for each of the three pieces of the application, this step will help you think out your project before coding it. Here are the ingredients for developing the Flex client MXML for this mashup:
- Import all classes that the map will need.
- Structure the data that will be mashed up. Since you will be providing your own data, it can be hard-coded within the application code.
- Add the interaction and display elements.
- Code the event handler.
- Call the method in the local connection, passing along the necessary values.
Defining your own data when building a mashup has some nice advantages. The obvious is that you do not have to gain knowledge or adapt to the data format from an external data source. This means you can skip past some of the steps necessary in building other mashups, like exploring the data source. Another is that the data will always be there, as they load with the application. This simply means that you do not need to connect to an external data source, trusting that the connection and access information are there, to populate your mashup.
There are downsides too, mainly the fact that you will be limited to only the data you define. Defining your own data also takes the fun out of getting familiar with other products and their APIs. For this mashup, you will learn how to define data in MXML for Flex 2.
You can add data to Flex 2 in several ways. You can write XML in an external file, include it with your application and load it as if it were a web service. Flex 2 does support an ActionScript XML object similar to that of ActionScript 2 for Flash. There is also a new, more efficient XML model called E4X that supports coding XML native format inline with the MXML.
For this mashup, you will use the Model control. This control lets you declare a data model inline with the MXML. It is a common control for powering other controls and components, as each node is easily parsed, allowing referencing for individual properties. This model will unlimitedly become the data provider, the source of data, for a List control you will add later. Each node within will represent a new list item, marker location and video clip.
<mx:Model id="golfShots"> <shots> <shot label="Nate on 3" lat="37.57562" lon="-121.88887" url="http://www.mashupexperts.com/yahoomapsmashups/flex/video/nate1.flv"/> <shot label="Jesse on 6" lat="37.575731" lon="-121.893579" url="http://www.mashupexperts.com/yahoomapsmashups/flex/video/jesse1.flv"/> <shot label="Chuck on 7" lat="37.5763" lon="-121.892002" url="http://www.mashupexperts.com/yahoomapsmashups/flex/video/chuck1.flv"/> <shot label="Nate on 9" lat="37.579583" lon="-121.887668" url="http://www.mashupexperts.com/yahoomapsmashups/flex/video/nate2.flv"/> <shot label="Jesse on 11" lat="37.573256" lon="-121.88932" url="http://www.mashupexperts.com/yahoomapsmashups/flex/video/jesse2.flv"/> <shot label="Chuck on 18" lat="37.580042" lon="-121.888741" url="http://www.mashupexperts.com/yahoomapsmashups/flex/video/chuck3.flv"/> </shots> </mx:Model>
label property will be displayed in the
List component you will add. The
lon properties will become the
LatLon object when the marker is added to the map. This will represent where the golf shot was hit from. Last, the URL property represents the path to the video clip of the golf shot.