Mar 23

Flex – Flickr Yahoo! Maps Mashup

Filed under: Playground | Taged as: , , | Comments Off

With the release of Yahoo! Maps for ActionScript 3 it is now possible to use the maps API for your Flash and Flex applications. The component provides very handy classes for geocoding content, creating map overlays and using an advanced search.

The Flex based mashup combines the map with my Flickr GeoFeed to add markers for every geocoded image. The spots provide a quick preview of the image via a thumbnail and show the title, date and tags assigned to that picture. A link opens the Flickr website, showing the full sized image.

Following a straight forward coding style, the application focuses on the first steps using the map with custom markers and an external data source. A central Maps class creates the application layout with a Yahoo! Maps instance and the GeoFeedParser. Each image instanciates a custom marker on the map which opens a small window on click.

Using the map component requires only a few lines of code.

_yahooMap = new YahooMap();
_yahooMap.init(APP_ID, _container.width, _container.height);

_yahooMap.addPanControl();
_yahooMap.addZoomWidget();
_yahooMap.addTypeWidget();

_yahooMap.addEventListener(YahooMapEvent.MAP_INITIALIZE,
handleMapInitialize);

Markers can be set via the MarkerManager. Custom markers can easily be created by extending the Marker class.

for each(var item:Object in data){
_yahooMap.markerManager.addMarker(new ImageMarker(item));
}

Parsing the geo feed is stright forward, using ActionScripts new XML parsing functionalities with the E4X syntax. The lat and lon values provided must be formatted in order to match the expected locale format.

for each(var item:XML in data.channel.item){

var tmp:Object = {
latlon:[String(item.geo::Point.geo::lat.text()).replace(',','.'),
String(item.geo::Point.geo::long.text()).replace(',','.')],
title:item.title.text(),
thumbnail:item.media::thumbnail.@url,
link:item.link,
date:String(item.dc::['date.Taken']).substr(0, 19).replace('T', ' '),
category: String(item.media::category.text()).split(' ').join(', ')
};

}

Watch the mashup and download the sources: Flex flickr yahoo map mashup

Related posts

Comments are closed.