Background

For projects that include mapping data geographically it’s an excellent choice to use the ModestMaps library. Modest Maps provides a great setup for displaying dynamic map data using some popular map providers like Yahoo Maps, the BlueMarbel Project or the OpenStreetMap Project. ModestMaps official website describes the thoughts behind ModestMaps as follows:

“Our intent is to provide a minimal, extensible, customizable, and free display library for discriminating designers and developers who want to use interactive maps in their own projects. Modest Maps provides a core set of features in a tight, clean package, with plenty of hooks for additional functionality.”

We use and love the library, but starting a new visualization we found ourselfs writing the same code over and over again. So we thought about creating a basic setup and wrapping it in a simple package for a more elegant way to start with a MM project in AS3. Having a base application let’s you get quickly to a first visual result and you don’t have to rewrite basic functionalities you most of the time need to include in your apps.

Features

• ModestMaps & Stamen’s Twisted libraries
• TweenLite library
• DocumentClass with the initial code to create:
  • TweenMap
  • Method to colorize the map
  • “Waiter” textfield
  • XML loader
  • Keyboard navigation
  • DoubleClick to zoom in
  • Fullscreen mode
• GUI class
• Marker class (for overlaying the map with points)
• Layer class (for overlaying the map with layers)
• XML with location examples
• SWFObject publishing setup
• Fullbrowser publishing setup

Download

The code is hosted on GITHub.com. Please remember when downloading it that it evolved from a personal need, thus some features won’t be relevant for everybody as well as the coding structure might not suit your taste. Feel free to participate in the developement by forking the repository. We’re looking foreward to review any patches you may provide and hopefully integrate them in the master. Drop us a line if you need advice on implementing or modifying it to fulfill your needs. Download the code (zip / 164kb)

Acknowledgement

Please note that only the DocumentClass.as and everything in the ch.datavisualization package is licensed under the GNU license. IMPORTANT: Please see the documentation of the external packages (com.stamen, com.modestmaps and gs.TweenLite) for their seperate licensing policy.
Some code was inspired by the superb work of Nathan from FlowingData.com.

Brief

Christian Siegrist my co-worker on the Candeo project and I got contacted by Anne, Niels and Moritz three Architecture Master Students at the ETH, Zurich. After finding the documentation of our bachelor’s project Candeo they recognized the similarity of Candeo and what they had in mind for their free semester project. The plan was to build an application where the user could enter his preferences for his living situation and the app should tell him which places in Zurich would be great matches for him to live. Christian and I saw the potential of this app for flat-searchers as the main customers but also urban designers who can use the gathered data to plan next steps in the evolution of a city.

Prototype

In the initial phase we would build a prototype without the data handling in a dynamic way. We only had time and budget for 5 days to work on it thus we needed clever solutions to the big problems (mostly performance requirements) we would face. We built the map interface with the extraordinary clever ModestMaps library from Stamen. We’ve missed this one for our bachelor’s project and thought we’d give it a shot. ModestMaps allows you to easily use several map data providers like Google, Yahoo or the OpenStreet Project. ModestMaps worked like a charm beside we could’t share the libs over GITHub.com, see the getSatisfaction thread for detailed information.

Interface

The user would insert his data with ten vertical aligned sliders. These sliders are customizable in horizontal and vertical manner so the user could customize the attributes of each parameter on the same interface element. This way we were able to reduce the complexity of the UI and leave more space for the map. Each parameter had it’s representation on te map. These were semi-transparent layers rendering from red to black. Red are the most accurate regions for the user to live in and black are the regions that don’t match his preferences at all.

Conclusion

The presentation of this project to the professors at the ETH were a big succes and we’ll get support to work on this project during 2009. We’ve fixed a release date around summer ’09. There will be major changes for both the interface and the map as well, but we were able to build a solid foundation for the next steps in the process.

The errors occurred the first time after several commits to my repository on GITHub.com. When I tried to compile the .fla file the application wouldn’t start and the screen remained blank. Saddly no error was mentioned by the Flash IDE. After some reviews of the code and the fla file I saw that the fla file couldn’t find the DocumentClass.as and therefore would create one on the fly when compiling. I’ve tried everything from moving files around to restarting the machine and finally I recreated a working copy of my project by copying an old .fla file to my directory. This error occurred repeatedly and I already got the routine to solve it but wasn’t really satusfied with this solution.

After some googling I found this report from the Agit8 blog. The same bug seems to be an issue when using svn as the subversioning tool. Geoffhom points out at comment #48 that using the git gc command to reduce the git history solved his problems. It seems that the .fla file searches the whole directory for classes and is  searching the .git directory as well. This seems to be the root of the evil and it’s an easy thing to avoid:

Place the .fla and all the needed sources and classes inside a folder and keep the .git folder outside of it. So my folder structur now looks like this:

1. folder with .git folder, .gitignore file, README, LICENSE and the “app” folder
2. in the “app” folder I keep my com/ch/org etc sources, my .fla file and the DocumentClass.as

I hope this saves anybody a few hours of headches and brings some light into the dark zone Flash bugs

Description

The swf-console helps you to output information about an object. It displays a small textfield utility with basic functionalities. Scroll, drag & drop and resize to be exact. It delivers two API methods to output data. It is intended to be used when you haven’t the native trace-window available (in-browser developement for example).

The console uses the analyze() function which is also available as the var_dump for AS3 snippet

Installation

1. Import the package
   import console.Console;

2. Create the console
   private var console:Console = new Console(this);

3. Add the console to the DisplayObjectContainer
   this.addChild(console);

4. Call one of the api methods in your code
   console.analyze(this);
console.print(this);

5. Display the console by pressing the space-bar
   customize this interaction by changing the key-code at Console.as #249

Download

The project is hosted on gitHub – feel free to participate and help improve the code or just let me hear your thoughts.
Download the SWF-Console ZIP here.

The var_dump for AS3 is a code snipped i use on a regularly basis to get information about an object when developping with AS3 in Adobe Flash. It contains two functions: analyze() and write(). The first is a recursive function that analyzes a given object. It uses the second function to trace out the gathered infromation. If you want to output the information elsewhere you can simply customize the write() function.

The code snippet is hosted on snipplr.com and I would be glad to receive feedback and suggestion on how to improve the code.

Candeo is the bachelor project I developed with my co-worker Christian Siegrist. It’s documentation is available on a seperate website. Please note that all of the content is written in german. If you need the content translated in english or an other language, feel free to get in touch with me.

Brief

Sorry, I didn’t had the chance to put it here but it will follow, promised!

Solution

I developed an interactive map that will be included in the official website of the Cumulus08 website. The map is built in flash and allows the user to easily navigate and explore the city of Zürich. We integrated several sights for people visiting Zürich for the first time as well as for visitors that know all the most known builings. The spots are marked on the map and can be explored by user-interactions. The builidings are lovely illustrated by students from the scientific visualization course.

Brief

Software Visualization 2 is based on the work from the Software Visualization Project. We had 3 weeks to refine our prototype in partnership with students from the University for IT in Zurich. The working relationship was very useful to check the usability and the value delivered by my visualization.

View the full documentation at iad.projects.hgkz.ch/infovis07

Brief

Sorry, I didn’t had the chance to put it here but it will follow, promised!

Solution

Thanks to the openness of the task I took the chance to convert some aspects from the SoftVis prototype adapt it to a different data source. I wanted to take live data and therefore I chose an existing WordPress database and rewrote the prototype to fit the new dataset. During the developement I struggled quite a bit with the handmade php script to connect to the database and as a solution wrote the SWX-WordPress API that is now freely available for download.