Bulix.org » Life snippets

MapOSMatic updates

A little while ago, back in September, I talked about MapOSMatic, a free and open source map creating service based on the OpenStreetMap data. After its original announcement in September, the project was very well received by the community, and this encouraged us to continue working on the project.

Another hackfest was held at the end of December to work on some much needed enhancements. Lacking PTO time, I could not join the team for these crazy hacking days before Christmas. They did an amazing job in improving MapOSMatic, and these changes were announced on January 4th, 2010 on the project's blog: Major improvements to MapOSMatic. I think the most important feature was the support for the entire world instead of France only, and with that an extended internationalization support, with more supported languages for both the website and the generated maps and indexes.

We received so many rendering requests after the announcements that we almost lost our server, and we (almost) thank you, the community, for this demonstration of interest in MapOSMatic!

Since this release last week, the activity around the project has increased dramatically. A dozen contributors now hang around frequently on our IRC channel, #maposmatic on Freenode. Translations, ideas, patches, bug reports and feature requests are flowing in our development mailing-list.

Last night, we rolled out another important update to MapOSMatic to improve the general user experience on maposmatic.org: a new website design. We knew the jobs and rendered maps pages both required some kind of re-work: their big tables listing all the renderings often did not fit on smaller screens, and were generally not very elegant.

Armed with a notebook, a pencil and a cup of tea, I sat down and though about how we could improve the site's design. Keeping the two-column layout that we liked, I focused on making the page "lighter" and less bulky. The site also has a new header, featuring a semi-transparent map of Belfort (from OpenStreetMap of course!) and a lighter, more "open" menu. The language selection drop down was also moved there for easier access (we got lots of feedback in this direction).

The jobs and rendered maps pages were also revamped. That was the original idea :) Instead of a large table with hard-to-read information, we now display a list of "job boxes", with information about the rendering, and of course a thumbnail of the rendered map when the rendering is complete and successful. We still have an issue on the maps page were we list maps for which we don't have the rendered files anymore (we can't keep them all, it takes a lot of disk space), but we're working on this.

And finally, the biggest improvement comes I think from the map request form. The December update of MapOSMatic made searching for cities by their administrative boundary a lot easier thanks to Nominatim, a new search mechanism for OpenStreetMap that exports a very nice API we use in MapOSMatic. But I found the process of filling in the form with this new mechanism to be long and unintuitive: you first typed a city name, and then clicked the Search button, after which you need to choose from a list of results below. That implied complex form validation and submission workarounds, and overall resulted in overly complex JS code and user experience.

In the spirit of Google's search suggestions box, I implemented an automatic Nominatim search, showing the matching results as the user types, in real time. You can then click on the result you want, or use the arrow keys to navigate in the results, and hit Enter to pick one. Another hit on the Enter key, and your request is submitted!

This new form made the HTML and JS code much simpler, and with the use of JQuery, we have something that works perfectly in most of the browsers out there (plus the generally cleaner and faster JS code).

The old MapOSMatic design

The new one, with the suggest form.

I hope you like this new design and the new features, we sure do! We are still working on a number of things to make MapOSMatic better, faster, stronger, so don't hesitate to come back often, and to give us your feedback!