Skip to the content Back to Top

Maps are a wonderful way to explore a collection that has a geographic aspect. Zooming, panning and clicking pins are a fun and interactive means for users to discover resources, as well as to see the spatial relationship between them. 

Some example uses for a map interface are to plot items such as:

  • Photographs taken around the world.
  • Landmarks and historic places or streets.
  • Public art on city streets.
  • Artifacts found or manufactured in various locations.

Over the years, Andornot has added geographic features to many projects, ranging from very simple links to Google maps showing a single point, to dynamic applications that plot multiple records on a single map, scaling the map up and down as new resources are added to the underlying database.

Andornot's map interfaces can be added to our Andornot Discovery Interface as well as used with Inmagic WebPublisher PRO and our Andornot Starter Kit.

The examples below are intended to give you ideas for adding a map interface to your collection, ranging from full featured dynamic interfaces down to very simple links to Google Street Views.

Dynamic Map Interface

The Ontario Jewish Archives' Jewish Landmarks of Ontario is an excellent example of a dynamic map interface. Pins are drawn on an open source map based on the latitude and longitude in records in the underlying database.

The map automatically zooms out to encompass all the available pins, but users can easily zoom in to an area of particular interest, with the pins rearranging to show as many as can fit on the screen.

Any pin can be clicked to bring up more details about the location.

Using filters at the top of the interface, the range of pins shown can be limited by time period and category.

This particular map interface has the Andornot Discovery Interface behind it, for full-featured textual searching as well as geographic browsing.

Static Image Map

Not every organization has the budget for the dynamic map interface above, but can still add a geographic search option using static image maps. In web development, an image map is any image with coordinates applied to it. 

For example, in these maps of the City of Richmond, coordinates allow users to click on current and historic planning areas, as well as legal lot descriptions, to view associated records, which are themselves maps (yes, a map to search for a map!).

The Heritage Burnaby Charting Change Atlas is another example of static maps with overlaid data.

These static maps are relatively quick and simply to create, but do have the disadvantage of not scaling up or down in size for mobile devices. And of course, they don't show results on map, only the overall geographic area, so they don't give users a sense of how records are arranged geographically. But still, with minimal effort, they add a new starting point to any search.

Simple Map or Street View Link

Our last example shows a link in a single search result, for a building, to its location in a Google map. This doesn't help a user to search geographically, but can at least direct them to a physical place once they find something of interest. This could be combined with either of the above map interface ideas to provide more than one geographic feature.

GIS Systems, HistoryPin and More

If your organization has an existing GIS system, especially one made publicly available as is the case in many municipalities, you might be able to layer your cultural collections into that system. People can use all the features of the existing GIS system to search and browse your region, with the choice to enable a cultural layer showing information about artifacts, photos, buildings, etc. in your historic collections.

Another option to explore is to add content to web services that already have a mapping component, such as HistoryPin.

Most of the above ideas are based on your records having latitude and longitude information in them. It's not too hard to add this, based on place names. Andornot can help to "geocode" your data so it's ready for any of these map interface ideas.

As you can see with the above examples, there's a mapping option available for every budget and need, and for different types of collections.

Contact us to discuss giving a fun, interactive new face to any of your collections.

The Burnaby Art Gallery is a long-time Inmagic user and was one of the first of Inmagic’s clients to adopt our Andornot Discovery Interface (AnDI). This innovative tool was used as the basis of a new public search of the BAG’s collections, including artworks and books and printed materials in a reading room at the gallery. Features such as spelling corrections and facets, combined with a gallery style layout of art, help researchers, curators at other galleries and the public appreciate the BAG’s collections from afar.

Recently the BAG was tasked with cataloguing the many works of art in public settings, such as parks, city streets and local institutions. Over 100 of these works, many of them unique sculptures, have been catalogued, photographed and located by means of a latitude and longitude. This information is all stored in the gallery’s Inmagic DB/TextWorks system.

Records for these public art works are now available in the search engine. Click here to view the public art specifically. While viewing a work, a “View in Google Maps” link is available to geolocate the art and help you plan a trip to see it in person.

Ironically, and delightfully, the work of public art shown in the screenshot above is called ‘The Search Engine’ and is described as:

This large hybrid sculpture of metal and plants … is a public artwork which recognizes the legend of the train engine which sank into Still Creek 100 years ago. This sculpture connects the adjacent Skytrain with the hidden history of the area. The 45 degree angle of the sculpture evokes a train either sinking or emerging from the soils.

Contact us to learn more about AnDI and how it can enhance discovery of your unique resources.

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 Charting Change Atlas Screenshotnew 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.]

Please contact Andornot for further information.

Categories

Let Us Help You!

We're Librarians - We Love to Help People