LondonRemembers: when a Google Map tells stories…
We ‘ve already added several Google Maps to numerous websites, but let’s be honest, most of the time the map only plots one point, usually where the company is located, on a dynamic map. This really isn’t what Google Maps is built for.
For the new LondonRemembers-website Google Maps is a crucial and central part of the user-interface which has a lot of repercussions on the user-interface of the website.
LondonRemembers
The LondonRemembers-website already existed for more than five years and is a private initiative to gather all London memorials, plaques and statues that commemorate people in one way or another and serve it to the online web-community.
screenshot of a Flash submap in the old website
Technical challenges
The upgrade from the memorial-map on a static Flash map to a dynamic Google Map was a logical step to take. A Google Map provides much more detail, you can zoom in and out, drag the map and so on. And technically the database behind the website didn’t have to change that much. Basically, only 2 new fields were needed to store the latitude and longitude locations instead of the relative x and y-coordinates we used before. The rest was user-interface programming: retrieving the map-information from the server and transforming that into markers which are plotted on the London map.
The main technology used to embed Google Maps into webpages is Javascript. But for the old website we already used Flash, mainly because it is by far the easiest way to create dynamic user-interfaces. So the choice for the Google Maps Flash API was easily made. At the time when we started the analysis for the new website, the Google Maps Flash API was still brand new and there weren’t many samples around which could prove the stability of the Flash API. So in the first drafts we suggested using UMap of AFcomponents which gained some fame in the developer community with their Gmap-component (ActionScript 2). However by the time we had to start programming the website, we switched to the Google Maps Flash API, because after all it seems to be the simplest way to implement a map in Flash and the API mimics the core Javascript API as much as possible. So if needed, we could rely on the large Javascript developer community as well.
The actual Flash programming of the Google Map was quite straight-forward. If one is familiar with OOP (Object Oriented Programming), the Google Map Flash API isn’t that difficult. On the few occasions where we didn’t get the expected result a post in the group Google Maps for Flash gave the answer. One time, we filed an issue at Google Code about the zoom-effect on the maps which made the overall user experience of the map feel sluggish. And wow, against all (or at least my) expectations, it was fixed in less than 2 weeks by the main developer for the Flash version of the API at Google, Pamela Fox. Thanks Pamela!
Organisational challenges
Even though the database changes to the existing project were minimal, moving to Google Maps meant finding the latitude and longitude position for each and every memorial location (called “site” in the LondonRemembers vocabulary) adding up to more than 1500 sites. Calculating a new geo-location based on the relative x and y coordinates wasn’t an option because we soon realized that Google Maps takes the bending of the earth into account as well where the “old” map-sections didn’t.
the bottom frame shows the Google Map result for one site with the active LondonRememers maplet showing the custom popup for the draggable marker.
We had to figure out a way to find the location based on the address-data we had from most of the sites. If we would use the API directly, we’d have to do a lot of programming for a one-off operation: the re-plotting of the sites on the map. Afterwards this code would be useless for the project. So instead of writing our own re-plotting system, we used the Google Maps search abilities. We altered the Flash-maps in the old interface so that each plotted site got a link to Google Maps, instantly firing up the search based on the included address-parameters (street, nr, postcode, city). The location Google Maps came up with wasn’t 100% accurate, but was usually pretty close. Now the only thing we still had to do, was to figure out a way to save this location in our database. We used a mapplet (small widgets you can add to your own Google maps) for that. The mapplet added a draggable marker to the map which our client could drag to the exact location. On confirmation, the mapplet redirected back to the LondonRemembers-website and saved the geo-location in the database.
User-interface challenge
Against all odds the implementation of the Google Map proved to be the difficult challenge. You’d expect that changing a static map to a dynamic Google Map wouldn’t affect the user-experience that much. But on the contrary, the interface was our major headache.
First of all, a user can stroll around on the map, drag the map to more interesting areas. In fact the entire page around the map must have the ability to change dynamically. So we used AJAX to retrieve all site and memorial information from the server without leaving the page.
When you’re really using the search-capabilities of the website and doing a serious investigation, the map sometimes might be overkill. So we also added a list view which enables the user to easily toggle between a map and list view.
One of the new possibilities of a Google Map, compared to the old static maps, is the fact that we can now show the result of a search visually on a map. For instance, if you are looking for “William Shakespeare”, the result is this page . The map plots 3 memorials which commemorate him, which is exactly what you are looking for. But say you are interested in the statue of Shakespeare on Leicester Square (the marker in the middle of the map), you zoom in to detail level to see where exactly the memorial is located. If we’d restricted the map to only display the search result then the story would end here. But wouldn’t it be a pity not to know that on the same square, there is also is a statue of Charlie Chaplin and one of Isaac Newton and many others? So at detail level we added the surrounding memorial markers as well. The markers of your initial search have a different colour (red) so you can still distinguish them from the others.
All these user-interfaces seem to be quite logical when explained now, but they were a real pain in the ass during developing. We had way more bugs than expected because of information that wasn’t in sync between different page views. Fortunately, the website also gave us something in return…
A Google Map tells stories
A new feature compared to the old website, was the ability to show markers that can reach the whole London-area and even beyond. And every now and then, there’s a page in which the plotted markers tell a little more then only the bare fact of being locations in London.
For instance, the page about the Great Fire of London shows you exactly where it has taken place. Or you want to know the whereabouts of Charles Dickens in London. And maybe Walter Sickert’s page, who is a suspect for Jack the Ripper, could lead to solving this crime, couldn’t it… ?
page of "the Great Fire of London"
Geplaatst op 08/05/2009 11:02 | door RCA online |
Je kan Reageren of een trackback vanaf je eigen website maken.
