Andornot Blog

The City of Burnaby just launched their Charting Change Atlas, a series of interactive maps showing historical points of interest for the past 100 years. See the news post here. Since I was responsible for its development, I thought I’d talk about some of the technical aspects.

Over 350 points of interest, held as records in an Inmagic database, are associated with four map images. Making those images look and act like current web-based map applications was a bit of a challenge, and it was critical to keep page size down and performance snappy.

Map images

Each map image originated as a 2700 x 3500 TIFF, and each point of interest was located as an X/Y coordinate in pixels relative to the image. These images were not maps, but pictures that looked like maps. That meant we couldn't place points of interest on them via address or latitude/longitude.

The large images were then sliced into PNG tiles by excitable chefs wielding ginsu knives. The tiles are loaded dynamically when they are pulled into the visible viewport to cut down on initial load time. A modified version of the jQuery plugin Lazy Load is used to determine when an unloaded tile has appeared within the viewport.

A map framework

The viewport resizes to fit the browser resolution, whatever it is, regardless of the size of the map within, and reveals only a portion of the map at a time. It contains a very large outer div tag that marks the boundaries of the drag area, and an inner div that contains the map tiles.

The map can be dragged or scrolled in any direction, but the majority of it is hidden outside the viewport bounds. jQuery UI Draggable powers the drag mechanism. The snap-back feature, which pops the map back to the viewport boundary when the edges are pulled in too far, was inspired by my iPhone.

The rest of the map UI is a nod to current web-based map applications - i.e. Google Maps and Bing Maps - in an effort to create an intuitive and comfortable experience for a visitor. We found the more the application looked and acted like these map applications, the less we had to explain to a first-time user. On the other hand, it perhaps worked too well, because users keep expecting the map to zoom! It doesn't zoom because it consists of just the one layer, while Google, Bing and Co. boast multiple vertical layers. Something to work on in future...

Points of interest

The point data are recursively loaded sector by sector upon page load via jQuery AJAX to a .NET web service, which performs the database query and returns the results as a JSON object. This load sequence considerably improves the perception of performance: large amounts of data are pushed over the wire, but they are spread over the first few seconds following page load.

Pins are cloned from a pin template, stuffed with point of interest data and positioned relative to the map container. The dialog that appears when a pin is hovered over or clicked is built from a dialog template bound to pin data on demand. A modified version of John Resig's Micro-Templating function is used for client-side templating and databinding.

All points of interest are held inside a Heritage Landmarks Inmagic CS/Textworks database, already in use at http://heritageburnaby.com/research/Landmarks/, which was extended to hold information specific to the Charting Change Atlas project: query URLs out to other databases, a blurb and primary image, coordinates, and a Google Street View URL.

Conclusion

It was a blast designing and building the Charting Change Atlas, and a privilege to work together with the far-seeing heritage team at the City of Burnaby. Kudos to them for leveraging their existing toolset and informational treasure trove to make history so alive and accessible.

Andornot has been working with the City of Burnaby for the last three years, first on the development of the Heritage Burnaby website and then on adding the ability to comment on images in their photo collection. Now this exciting new Charting Change atlas allows users to see how historical events, ranging from First Nations settlement to the founding of Fort Langley in 1825, through to the Depression and post-war housing boom have shaped the community of Burnaby. In 2001, Burnaby’s Community Heritage Commission initiated a project to create an atlas mapping all protected heritage resources and other historic sites in Burnaby, illustrating the evolution of the city. Last year the City approached Andornot to design a new, interactive version of the atlas and funding was obtained through the Canadian Culture Online Program of the Department of Canadian Heritage.

Behind the scenes, the information shown on each map point is pulled from the existing Inmagic databases currently searchable from the Heritage Burnaby website. Heritage landmarks, historic buildings, and neighbourhoods are plotted and linked to the records for photographs, artifacts, textual records and bylaws. Tools and resources from all of Burnaby's Heritage partners - the City Archives, the Burnaby Village Museum, the Burnaby Planning Department and the Burnaby Historical Society - are combined to provide a unique perspective of Burnaby.

Coincidentally, Google Street Views became available in the lower mainland, the day of the kick off meeting for this project. We were able to include this new capability so that users can zoom into many of the heritage sites and historic buildings to view them in their present context - a truly unique feature that offers a rare glimpse of how the landscape of Burnaby has evolved.

"We have worked with Andornot for the past three years, developing our website and our collections management systems. Some of the most novel features of our site - particularly the use of Google Street Views in this latest project - have been a direct result of Andornot's creativity and innovation and we are once again thrilled with the final product." [Arilea Sill, Municipal Archivist, City of Burnaby Archives.]

Andornot’s popular WebPublisher RSS Control has long allowed our clients to generate an RSS feed of any content from any textbase. Just recently, we configured our RSS control to work with a Genie Catalog. Since Inmagic WebPublisher PRO underlies Genie, it was relatively easy to make the RSS control play nicely with Genie. Generating the RSS feed via a query into WebPublisher is done in the same way, but the tricky part was having the link in the RSS feed take the user into the Genie OPAC, as though the user had searched there.