Being the administrator and active user of my highschool’s alumni website, masalumni.org I have noticed that the most active post in the forums is regarding book recommendations for the literature class. As anyone who has been paying attention to my sidebar knows, one of my hobbies is reading books (just finished Harry Potter and the Deathly Hallows :)). Given this background, I decided to create a specific site to list all the books that have been mentioned in this forum (restricted registration required).

Here’s the link, for those of you who can wait to finish reading:
http://mas.gbtopia.com/books

Books site screenshot

I used the same Wordpress plugin that powers my sidebar, called Amazon Media Manager. I had to make several changes to add support for ratings, comments and dynamically retrieving book descriptions. The result is an AJAX application that displays a list of books, allows users to rate them and add their own comments. Users can also filter the list to display only the recommendations made by a particular user. I had to brush up a bit on my PHP skill. It was rather easy, and was ready in about five days during my free time.

Update (2007-08-25): Now you can sort the books by different criteria. Added screenshot.

I saw these products placed side by side at my local supermarket and couldn't resist to post it. I guess it's just another chapter in the Flash vs AJAX war.

I’m finally releasing the alpha version of Global Access Maps. An alpha release means that the application is working but not necessarily stable and some features are partially implemented or not implemented at all. It might break, but it should be good enough for casual and curious users. It also means that I use this version for development, so some features might unexpectedly stop working for a while as a result of me tweaking the code. Another important note is that I’ve used Firefox 2.0.x mostly during development. Safari 2.0.x should work, but Internet Explorer users might encounter several issues that won’t be taken care of until the beta release.

Features

• Supports multiple maps
• Multiple markers per map
• The user may choose the marker color and style (numbered, circle, square, …). Numbered markers go from 0 to 99, but by choosing different colors up to 1800 numbered markers may be used in a single map.
• Markers can be tagged with multi word tags.
• After loading the map, a tag cloud is displayed, with varying sizes an colors to reflect the most popular tags for a specific map.
• The marker list can be filtered by choosing a tag
• The Google geocoder is used by default, if this fails or for some specific queries, it can use data from the most appropriate source by querying up to five different geo location services.
• If multiple results are found for a location, it’s possible to choose and preview each result before adding the marker
• Supports “inverse markers”, a marker can be added by double clicking on the map and an inverse query is executed to find location details
• Administration interface may be hidden to maximize map size.
• All external operations are done through AJAX calls, so the page is never reloaded, not even to load a new set of markers from another map.
• Can calculate distances from the selected marker to all the other markers. These distances are point to point, not following streets or roads.
• A user can select a start and end marker and click directions to load directions from Google in the directions panel.
• Powered by Google Maps with v2.x API

Some future features:

• Each marker may have several trips associated to it
• A trip has origin, destination, dates and URLs that point to photographs, or additional information
• Ability to print maps easily
• Use Marker Manager to handle lots of markers effectively

Some of the technologies used to create this application are: AJAX (which, for the uninitiated, includes Javascript and XML), XSL (Extensible Stylesheet Language), Java Servlets, JDBC, MySQL database, CSS, DOM.

Here’s a screenshot of the alpha release of Global Access maps. Click on the image for a full size version.

I’ve set up a test map for people who’d like to test the maps for themselves. Feel free to add markers and please report any strange behaviors found, except when related to Internet Explorer or the list of limitations described below.

Test Map

Basic instructions

To add a marker, just type the search text in the query field and press search maps. The results will appear in the results tab, on the left of the map. If there’s a single result, the marker preview will appear automatically, otherwise a list of results will be displayed, which can be previewed individually by clicking on the >. To add the marker to the map, just fill the name and the optional tags and url fields, and press the add marker button. The marker will be added and will be displayed at the end of the markers list.

To select a marker, either click on the text link that appears in the markers list or on the marker icon in the map. The information window will appear, and the icon will change to a star. The calculate distances link may be used after selecting a marker to calculate the distance from the current marker to all the other markers.

The rest of the options are pretty self explanatory, but I will expand this brief guide if requested.

Examples

Over the past few years, I’ve created several maps, linked below. Please do NOT add markers to these maps:

• Dallas, TX, USA
• Las Vegas, NV, USA
• Chicago, IL, USA
• Miami, FL, USA
• New York, NY, USA
• New York Subway, NY, USA
• Los Angeles, CA, USA

Known limitations of the alpha release

• Editing a marker might result in an error
• After adding a marker, the tag cloud is not dynamically updated
• The following features haven’t been implemented: add map, add trip, delete marker, deselect marker

Remember the Proof of Concept from my last post? Well, the latest request to complete this PoC was to create a chart that plotted all the human tasks from the Accounts Payable process. The customer wanted a ‘clickable’ chart that enabled a business user to know at a glance the state of the invoices being processed, in other words, how many invoices are stopped in each stage, waiting for someone to click Next (or Reject, Return, Back)

The first solution I considered was Instant Charts, a tag library that produces charts by using the JFreeChart library. However, this would produce a static, hardly clickable image, and where’s the fun in that?

The second alternative was to improvise a graphic with some HTML + CSS magic, but this seemed a bit primitive for my taste.

Having just bought the Nike+iPod kit, I was inspired by the beautiful charts provided by Nike and decided this is what I wanted. Nike’s site uses Flash extensively, and even though I’ve worked with Flash a bit, I’m certainly not a fan. That’s when I remembered the open source alternative created by Adobe (which ironically now also owns Flash), Scalable Vector Graphics, or SVG. Since it’s built around XML, Javascript, DOM and CSS I thought that it would be easy to create a nice looking vector graphic with it. Turns out I was right :).

My first approach was to create some graphics with Illustrator and export them to SVG, this would help me produce results faster. It didn’t. If you’re planning on working with the generated XML, you might as well steer away from Illustrator and look for some SVG online reference. Illustrator does produce valid SVG, but it uses properties in the XML that are not easily interpreted. For example, text is not positioned with X, Y coordinates, instead you’ll find a transform matrix used to calculate the position, which isn’t really intuitive. After a bit of work based on several SVG reference sites, I achieved the desired effect for each bar, a rounded rectangle with a gradient an a cool reflection (sort of). I then created a JSP that would dynamically generate the SVG, creating a bar for each kind of task and the chart was ready. Almost.

The chart was looking good, but not as good as those from Nike. It was missing some interactivity. Hovering over Nike’s “Runs” chart displays a tooltip where you can see details of each run. That’s exactly what my chart needed. After a bit more research, I discovered that all interactivity in SVG could be programmed using Javascript. Elements in the XML are accessed using the DOM, so after some more work I had an interactive version. I had some issues getting it to work with Firefox’s SVG engine (some methods were not being recognized), but I managed to fix everything except for the filters, which are not supported by Firefox.

Here’s the final result:

This is where the chart is supposed to appear. Try the alternatives below if you’re reading this.

If you’re having trouble seeing the chart, you might need Adobe’s SVG plugin, which you can get here. If you’re not in the mood of installing the plugin, you might just watch a screenshot of the final version, here (minus the interactive part).

Feel free to look at the code if you need something similar (select Save Link As or Alt-click).

There’s an additional feature that complements the cool chart, a drill down capability. Clicking on the chart produces a list of all the tasks in a particular stage of the process. I used an AJAX request to retrieve this list and enhance the user experience. Clicking on a particular task displays the current information for a specific process instance, including a list of the activities that have been executed so far and all the data from the current task. This only works on the actual application, not on this demo.

P.S. The PoC runs on WebSphere Process Server, for those of you who were wondering.

It’s been a bit more than a month since my last post. However, I have a good excuse, I’ve been working in the gbtopia Maps application. It started as a simple static AJAX application where I manually created an XML file based on an example at Google’s site, and I had to input the coordinates and information for each marker manually. However, it has evolved into a dynamic application with the following major features:

• Supports creation of multiple maps
• Multiple markers per map
• Each marker may have several trips associated to it
• A trip has origin, destination, dates and URLs that point to photographs, or additional information
• Markers can be tagged, a tag cloud is displayed, and the marker list can be filtered by choosing a tag
• Uses data from the most appropriate source by querying up to five different geo location services
• If multiple results are found for a location, it’s possibel to choose and preview each result before adding the marker
• Supports “inverse markers”, a marker is added by double clicking on the map and an inverse query is executed to find location details
• Administration interface may be hidden to take advantage to maximize map size.
• All external operations are done through AJAX calls, so the page is never reloaded.
• Powered by Google Maps with v2 API

Some of the technologies that I’ve been using in this application are: AJAX (which, for the uninitiated, includes Javascript and XML), XSL (Extensible Stylesheet Language), Java Servlets, JDBC, MySQL database, CSS, DOM.

The bad news is that gbtopia maps are not yet ready for the general public. I’m still polishing some details and hope to have an alpha release soon. However, if after reading this description you’re thrilled to try them, leave a comment and we can work something out.

Here’s a screenshot of the maps as of right now. Click on the image for a full size version.

Update (2007-03-26): I have released an alpha version of Global Access Maps, click here for more information.