Tag Archive for 'AJAX'

Map index usability

Our partners had a wonderful idea for the start page of an online atlas we are working on together. Obviously it’s inspired by iTunes’ Cover Flow, but as we think works well on map indexes too.

It basically works similar to album art, where visual impressions are associated with audio. On the map flow, the visual impression, the color scheme and map type identified on the map thumbnail, can be associated with a certain topic, theme or map in particular – greenish is likely environmental, blue/red tones demographic, etc.

By using AJAX, the map flow is very efficient in terms of occupied space on the page. Instead of long lists and tables, the map flow only needs the size of one paragraph on the page, where users can browse the entire atlas by flipping map thumbnails around (which is fun too btw).

I can’t demo it here, you’ll have to head over to our application to see it in action. A rudimentary English version is available.

ÖROK Atlas Map Flow

There is still much work ahead of us. For the next upcoming release we reduced the amount of newly planned features and try to focus on usability improvements instead. After all, we want an easy to use thematic mapping tool.

It’s still too early to talk in numbers, but I expect the map flow to reduce the bounce rate and make our maps more accessible.

Web development tools

As I had lately to do more, let’s call it, web development as usual I really appreciated that I have found (and tried) Eclipse. Before I was just happy using a text editor with syntax coloring, sufficient for my projects, since they never went too big.

Once you’ve started using AJAX libraries like MochiKit (as I did) you’ll notice the efficiency boost when Eclipse and the fantastic JavaScript IDE Aptana enter the game and replace your beloved text editor. I simply can’t imagine how extensive JavaScript development is possible without an environment like Aptana.

Besides syntax coloring, code validation, HTML/CSS support, it finds all objects, functions, variables, methods etc. in your JavaScript libraries and provides you with overviews, documentations and auto-completion. Considering all the functionality a large library like MochiKit offers, it either takes you a week to go through the documentation or you let Aptana do the work for you and start coding right away. I never have been a big documentation reader, always preferred the trial-and-error method, so Aptana made my life a lot easier.

Everyone who ever had to debug JavaScript knows that this task can drive you mad. Firefox and its Web Developer Toolbar are very helpful in that case. But the extension Firebug is just priceless when it comes to tracking down errors in your JavaScript code.

Still the best of it: all open source software.

Quick and dirty SVG

What I certainly do love about SVG is the fact that you can put nice looking interactive maps in a very simple and quick way together.

Today I wrote this small SVG map module (in German language and just a small part of an information system) and set it on top of a database containing various regional indicators. Main purpose of the database is to arrange user-defined indicators to customized tables together. The map is kind of a little bonus addition and should help to get a better picture about spatial distribution of certain indicators.

But the point is that this can be done in a day without the need of setting up and configuring a mapserver or web-GIS. Developing 2 or 3 days longer there even would be some more layers, features, colors, etc. and perhaps a cleaner coding style.

Especially when it comes to thematic maps, SVG is IMHO the best choice. Whenever you want to change some thresholds in your legend, or load some new statistical data into your existing regional units, a mapserver has to refresh the whole image. It’s pretty annoying compared to SVG which lets you simply load or reclassify data on-the-fly without the need of reloading any element of the user interface – AJAX, to name a buzzword.

Of course, since most of the work is done on the client-side, map performance is limited there and not on the server-side. But if you look at office machines running at 3GHz, this shouldn’t cause too much headache.

However, SVG enables simple and straight interfaces. Many of our clients get confused by most mapserver interfaces and highly appreciate those simple systems. That’s why we were asked for an easy solution this time. Just to quickly view some regional indicators on the map, without any fancy features.

AJAX photo editor

Even web purists must admit that a few AJAX applications out there have certainly some good points.

Like pixer.us for example.

A nifty AJAX driven online photo editor and potential add-on for Flickr, Photobucket or whatsoever photo site.

Quick and dirty

What I really do appreciate about Mashups is the speed of development. Very quickly you get from the first thought of an idea or feature to a point, where you can see your first results.

From time to time, mostly motivated while reading a technology post, I can’t avoid to start playing around with this kind of “quick and dirty” development tools by myself.

So, a few months ago I wanted to try the AJAX capabilities of the Google Maps API and started making this little map of the underground stations in Vienna. Basically I just let JavaScript and the API parse an XML file and overlay the result in a Google Map. To decorate the points in the map, I added a photo from Flickr for each station and linked to a Flickr photo search to see more pictures about this station and the area around.

Two days ago I read a post about FlickrStorm, a new Flickr photo search with some “magic” (whatever that means) from a future Google employee. However, reading the post it came to my mind to link my map to FlickrStorm instead of the Flickr search. Unfortunately FlickrStorm doesn’t allow access from outside, meaning that you can’t simply access FlickrStorm by calling the search with an expression like “/?q=searchterm”.

Once the idea of improving my photo search of the underground map in my head, I started trying a few alternative ways – loaded some AJAX libraries, did some testing and finally got a photo search running I’m satisfied with.

Go figure! I really think it’s a nice map add-on.

At least I had my fun hoping from station to station in the map and browsing thru the photos that showed up in the search box. It’s kind of exploring the city by subway on the internet. Flickr has in the meantime become such an amazing photo archive. I even discovered some corners I’ve never seen before around some subway stations, have to open my eyes better next time I pass by…