Saturday, December 03, 2005

Yahoo Map/Flash/Flickr Mashup

Yahoo Map/Flash/Flickr Mashup



Project: View Flickr photographs overlaid on a map to display where they were taken.
Why: To prototype the functionality for a couple of projects that need to involve Yahoo or Google Maps and look fancy.
Tools: Homesite 4.5 (?!), Flash MX 2005 Professional
Technologies: Flash (7+), ASP, XML, OPML, RSS, Flickr API, Yahoo Maps AS-Flash API, SlideShowPro
Timeline: 2 Days worth of spare time (with Full time job and 2 kids)

Well I'd hardly call myself good at Flash but I managed to find some tools out there that really helped to put this little app together. Thanks to all for what you have made available online to help others.


  1. Downloaded Macromedia Extensions Manager here. Installed.
  2. Applied for a Flickr API Key here.
  3. Applied for a Yahoo Maps Application ID here.
  4. Downloaded the Yahoo Maps AS-Flash eXtensions package from here. Double-clicked and installed.
  5. Downloaded the source of a cool application that mashes video into Yahoo Maps.
  6. Purchased and downloaded a great slideshow eXtensions package called SlideshowPro. Double-clicked and installed.
  7. Created a new Flash Movie and named it yahooMap.fla
  8. Dragged in the com.yahoo.maps.api.flash.YahooMap and sized on the stage.
  9. Named the instance "myMap"
  10. Added my Address(used to center the map by default), App ID and zoom level (10) to the parameters of the component
  11. Added the following code to the first frame of my movie:


    import com.yahoo.maps.tools.PanTool;
    import com.yahoo.maps.markers.CustomPOIMarker;
    import com.yahoo.maps.widgets.NavigatorWidget;
    import com.yahoo.maps.markers.CustomSWFMarker;
    import com.yahoo.maps.markers.CustomImageMarker;
    myMap.addEventListener(com.yahoo.maps.api.flash
    .YahooMap.EVENT_INITIALIZE, onInitMap);

    function onInitMap(eventData) {

    }


    Ok so that imports all the namespaces that I'll need to do the work, adds an event listener and an event handler function so that once the map loads, it will fire the function where the meat of the functionality resides.
  12. Now within the event handler function (onInitMap), I add the following code:


    //Add the ability to drag the map around
    var panTool = new PanTool();
    myMap.addTool(panTool, true);
    //Add the zoom slider
    var navWidget = new NavigatorWidget("closed");
    myMap.addWidget(navWidget);


    This allows me to drag the map around and zoom in and out.
  13. Now I decided that I'd want an easy way to start the map at various zoom levels, so I pass it in via a querystring variable (intZoomLevel) when I call the swf (eg. yahooMap.swf?intZoomLevel=10). To get the map to respond to this I add the following line within the event handler function(onInitMap):


    myMap.setZoomLevel(_root.intZoomLevel);


  14. Now we have the basic mapping movie, we'll need to add some custom markers to it. I wanted markers that would open up to display a slideshow of my pics served from Flickr. I copied the marker.fla from the zip mentioned in step 5 and called it picMarker.fla.
  15. I stripped out all the (cool) video components and functionality which left me with a nice custom marker that would open & close as I wanted.
  16. I then dragged in the SlideShowPro component and positioned it on the first frame of the marker's open state. I configured the size and other parameters.
  17. Now I needed a way to pass data into these markers so they know what pictures to load. The SlideShowPro component is capable of processing an OPML file which points to one or more 'galleries' or RSS Feeds. I decided to dynamically write the OPML file based on parameters that are passed in to each marker. So I created the following ASP page named OPMLWriter.asp:


    <%
    Response.Charset = "utf-8"
    Response.ContentType="text/xml"
    Response.write "<?xml version=""1.0""?>" & VbCrLf
    Response.write "<opml version=""1.1"">" & VbCrLf
    Response.write "<head>" & VbCrLf
    Response.write "<title>" & Request("Title") & " Pics</title>" & VbCrLf
    Response.write "</head>" & VbCrLf
    Response.write "<body>" & VbCrLf
    Response.write "<outline xmlUrl=""" & Request("URL") & """/>" & VbCrLf
    Response.write "</body>" & VbCrLf
    Response.write "</opml>" & VbCrLf
    %>


    This OPML is used by the SlideshowPro component to load in the gallery from Flickr.
  18. I then created the following XML file named flickrLookup.xml:


    <?xml version="1.0"?>
    <root>
    <tag TITLE="Home" RSSURL="http%3A%2F%2Fflickr.com%2Fservices%2Ffeeds%2Fphotos_public.gne%3Fid%3D37996581623%40N01%26tags%3Dhome%26format%3Drss_200" ADDRESS="147 Silver Birch Ave., Toronto, Ontario M4E 3L3"/>
    <tag TITLE="Science Center" RSSURL="http%3A%2F%2Fflickr.com%2Fservices%2Ffeeds%2Fphotos_public.gne%3Fid%3D37996581623%40N01%26tags%3Dsciencecenter%26format%3Drss_200" ADDRESS="770 Don Mills Road, Toronto, Ontario"/>
    <tag TITLE="Rado" RSSURL="http%3A%2F%2Fwww.flickr.com%2Fservices%2Ffeeds%2Fphotos_public.gne%3Fid%3D37996581623%40N01%26tags%3Dkincardine%26format%3Drss_200" ADDRESS="18 Eastwood Cr Tiverton, Ontario N0G 2T0"/>
    </root>


    This basically maps my Flickr tags (such as "Home") to an actual address. This xml needs to be processed by the map movie which then needs to pass the data into the marker clips that get loaded.
  19. To do so, I added the following lines to the top of the first frame in the map movie (yahooMap.fla):


    var objXML = new XML();
    objXML.ignoreWhite = true;
    objXML.onLoad = function(success){
    if (success){
    addMarkers(this);
    }else{
    trace("Error loading XML file");
    }
    }


    This declares the XML object and adds an event handler so that when it loads, we can do something (call addMarkers)
  20. I then added a call to load the XML within the onInitMap function:


    //Load the xml that translates flickr tag-based feeds with titles and Addresses
    objXML.load("http://tobypilling.com/flickrLookup.xml");

  21. I then added the event handler function which is responsible for processing the XML and adding the markers in the correct position, passing the marker swfs whatever data they need to display the appropriate slideshow:


    function addMarkers(objXML)
    {
    var objNode = objXML.firstChild;
    for(var intCounter = 0; intCounter < objNode.childNodes.length; intCounter++){
    var strTitle = { text:objNode.childNodes[intCounter].attributes.TITLE };
    var tmpURL = "http://tobypilling.com/OPMLWriter.asp?Title=" + objNode.childNodes[intCounter].attributes.TITLE + "&URL=" + objNode.childNodes[intCounter].attributes.RSSURL;
    var strOPMLURL = { text:tmpURL };
    var markerHome = { url:"picMarker.swf", strTitle:strTitle, strOPMLURL:strOPMLURL };
    myMap.addMarkerByAddress(CustomSWFMarker, objNode.childNodes[intCounter].attributes.ADDRESS, markerHome);
    }
    }



    Now I need to tweak the marker fla (picMarker.fla) so that it can use this data that gets passed to it.
  22. As you can see from that, I pass 2 data objects into the picMarker.swf when I load them.
    strTitle: Used to display the Marker text
    strOPMLURL: Where the pics need to be loaded from

    To consume this information, I add the following lines to the ShowUpState function in the picMarker fla:


    var strTitle = _parent.strTitle;
    labelText.text = strTitle.text;

  23. Then I add the following lines to the first frame of the marker's open state:


    var strOPMLURL = _parent.strOPMLURL;
    my_ssp.xmlFilePath = strOPMLURL.text;
    my_ssp.xmlFileType = "OPML";


    This grabs the OPML path from the parent movie and uses OPMLWriter.asp to grab the RSS feed from Flickr.



The magic of the APIs and SlideshowPro do the rest.

Here's the source if required but you'll need the components to get it working.

posted by toby @ 10:39 PM   0 comments links to this post

0 Comments:

Post a Comment

Links to this post:

Create a Link

<< Home