On Flash – map integration with Yahoo Maps + ActionScript 2.0

In my job it isn’t always about a swish flash interface, a cool looking site or animation these days – it is about integration, about offering functionality that jumps out from the rest of the competition. The magic word is integration. A client of ours approached us about adding a special sort of travel-blog.

What we would like is some sort of members-only application that allows our users to track their journeys with us and to maybe blog about them, but it should look swish and very easy to use. We would like a similar functionality for our travel guides who would then post information about the tours.

The idea of a blog is a great tool for customer retention, if done right it allows users to post comments about their journeys, maybe with images to keep a log of what they are doing while on that trip. It would allow visitors to see what is going on on a journey with <Company Name> and what you can do or what the user(s) saw and took part in. Obviously, I wanted to offer a little bit more than just a blog. My idea was to work on a map-blog…

(Please note, if you would just like to see the map in action, just scroll down to the bottom of this page)

.

Integrating with new technologies

For (flash) designers and developers there are a number of new technologies that give a user access to content and functionality that was not possible a year or two back. Let us take Google or Yahoo for example: developers are given access to a great and increasing number of technological toys to play with: application programming interfaces (APIs) to integrate content such as Flickr images and albums, mail, rss feeds or maps.

Anyone, from an individual to a development company, has access to these API components, and more and more people are using them to give their clients (or their portfolios) a WOW-factor.

.

Travel blog + map = travel journal

Looking at the possibilities our CMS at work has (remember, its is aspx / .net) there was quite a range of possibilities we could offer our client something for the money. The obvious would have been setting up blog-facilities based on either each tour or destinations, giving registered users who have participated in a tour to blog and comment about it (we would run the user’s access against their booking history to grant write-rights). We could also set up forums and sub-forums to allow users to add comments about trips or destinations.

However, travel blogs or forum posts can be a bit text-laden, and the interaction only consists of a user posting, others reading and (if they like) commenting on posts.

Some time ago we did some Google Earth integration to one of our clients’ website which allowed the client to plot out tours on Google Earth, to give the user the ability to ‘see’ the tour and where it is going and what is going on. The idea of combining a map with a travel blog kinda became obvious.

With both Google Maps and Yahoo Maps giving excellent access to and support for their APIs I wanted to work on integrating a mapping solution with our user and blog-database. In the end I went for Yahoo Maps simply because their development network had a tremendous amount of information and code-snippets to get started with.

.

Yahoo maps and ActionScript – (API) key to success?

Once the extension was downloaded and a API key registered I went on integrating the map into the workspace. Just import / drag the component into the stage. You can edit its size simply by entering a new width and height into the properties (by default on the bottom of the stage). Your next step will need to be to check out the parameters. The screenshot on the right (click to enlarge) shows you where you can find the API in Flash CS3 and what parameters you will need to change by default, such as API key, zoom factor or starting location (by default USA map).

Now that we have a working API-integration into flash I tackled the next step: integration of a server-database to read posted points as well as add points to it. (In this example I used PHP / MySQL as this blog is based on a PHP system). You need to set up a database via PHPMyAdmin for example. Here is a sql-database for you to have a look at and use:

Please download the file here: entries.zip

So, what do we have in this database now: We have an ID (unique value for each entry), lat and long, a date (for timestamping entries), a short info and a descritption. These are the fields I will be using for now.

.

Writing to and from the Database

The next steps are to read from and enter information to the database through PHP. A simple

$sql = “INSERT INTO entries (id, lat, lon, date, info, description) VALUES (”, ‘$lat’, ‘$lon’, ‘$date’, ‘$info’, ‘$description’)”;

for entering information should do the trick. Which it did. I am not going into very much detail here, as the project is very code-heavy, but if you are interested in knowing more please do not hesitate to get in touch with me.

.

The first travel journal test

Here is now a first map-test (please note that I have disabled entering notes at this stage):

.

Closing comments and future plans for this project

Getting the API to work was a bit tricky, and it took me a couple of hours to figure out what could be done and what didn’t when it came down to connecting to a database.

• User-access: At the moment any user can access the map, as such I will need to work on a login-based system, with each login having their own database table, and maybe a selector at the start to see whose trip journal you would like to visit. This should hopefully not be too difficult *touch wood*.
• Image and video-upload: I will need to write an image upload script that saves the images on the server in the user’s folder and give each one a unique ID just in case. I’ll have to also look into resizing options and video compression if we are not using youtube etc
• Linking: Users should be able to cross-link or link to products / posts / etc
• Moderation & Administration: …and ideally all of the above should be moderated and maintained
• Plus, I want this to work in Adobe AIR later on as well, so I will need to rewrite a bit of the code later!

Lastly, if you enjoyed the article – or just the flash map – then please leave a comment, I would really appreciate it, as it gives me always another boost to write more 🙂

[UPDATE: I have updated this project’s progress here]