Articles by
Carissa Brittain

New Map View Search Available on Sajara

sajara_logoThroughout its development, Sajara has focused on enabling users to search for digital assets based on geographic criteria such as address, intersection, and neighborhood or by navigating around a map. While our standard search page with its many thumbnails remains a  powerful window to retrieve digital assets, we recently decided to create a new search page that expanded the map to full-screen size and put an even greater emphasis on Sajara’s geographic search capabilities.

Sajara_Map_Search

The new Sajara geographic search page is available in Japanese Gardens of the World, a sample application that demonstrates Sajara's capabilities.

In order to try out our idea for another geographic-based search page, we turned to Japanese Gardens of the World, our sample application powered by Sajara. To create the map, we utilized the same technology that drives our thumbnail search page, OpenLayers and ExtJS. These upgrades offered us increases in loading speed and better compatibility with new browser versions.

While the map-based search page focuses more on geographically displaying the results of a search, it still contains all the original search functionality. A drop-down ‘Search By’ menu contains fields allowing users to search by address, keyword, topics, collections, time period, and a variety of advanced search options. In order to help users keep track of their search criteria, we also implemented a new search feature called ‘Active Filters’, which provides a quick reminder of the selected criteria.

'Fisheye' thumbnail view of photographs found on the current map view.

'Fisheye' thumbnail view of photographs in the current map view.

The results of a search are displayed as a row of thumbnails across the bottom of the map with flags on the thumbnails corresponding to flags on the map. The thumbnails expand as you mouse over them. We used some simple math and javascript to implement this fish-eye effect, allowing users to quickly view basic data about an asset without requiring them to load a new page. A larger, more detailed page with additional information and photographs of the garden is available by clicking on the thumbnail.

The map-based search provides users with another option for searching through and browsing assets in their digital collection, but the thumbnail search is also still available as a way to view search results. Using the ‘Search’ menu, users can select whether they would like to search the database using the map or thumbnail view.  They can also switch between the two pages thanks to the ‘Map/Thumbnail’ button in the upper right corner of the page.

Make sure you visit our Japanese Gardens of the World sample application and let us know what you think!

Tags:

Sajara Now Supports Maps and Its Mapping Interface Has Gone Through An Extreme Makeover

"Our first goal for the re-design of the PhillyHistory.org search page was to bring [location-based searches] into focus by giving [them] the place of honor at the top of the search options."

One of the difficulties a software developer faces in designing a complex web page is the user interface. Striking a balance between advanced functionality and ease-of-use is a challenge for even the most seasoned designer. Understanding how a user will approach and utilize the page will often determine where certain page elements are located and how they appear; and watching real users use the page is a rare treat. We recently had an opportunity to observe new users work with the PhillyHistory.org search page and made an important discovery. Our most powerful search options – location and address-based searches — were often not being used effectively! Sajara is designed so that the address search option can match street addresses or intersections to map coordinates, automatically move the map to that location, and return assets in the area; all with one click. Our first goal for the re-design of the PhillyHistory.org’s search page was to bring this powerful tool into focus by giving it the place of honor at the top of the search options.

Beyond the fairly simple task of re-ordering search options, we are also excited to launch a new function in Sajara that enables the upload, management, and search of a whole new class of documents: maps. In the new version of Sajara, searching for maps is as simple as searching for photographs and other documents. Simply use the search options or the map to limit your search to a place, subject or time, and use the new tabs to view either photographs or maps. While PhillyHistory.org currently holds 5,000 maps, our archivists will be adding more each week along with new photographs to enrich PhillyHistory.org’s view into the city’s past.

Most importantly, in order to enhance users’ experience on the site, especially with the map search functions, we decided to entirely re-design the search page using OpenLayers and Ext JS. OpenLayers is an open source JavaScript library that enables ‘slippy maps’ to be embedded in any web application. OpenLayers allows communication with most standards-compliant web map services such as ESRI’s ArcIMS, ArcGIS Server and GeoServer, as well as other sources such as GoogleMaps. As an open source framework, OpenLayers separates map tools from map data and enables developers to include layers from several different sources in the same map. Ext JS is a visual framework which offers customizable website pieces (or widgets) that can be easily added, updated, and changed to fit a website’s design.

Shifting PhillyHistory.org from a Microsoft ASP.NET – only framework to one powered by not only ASP.NET but OpenLayers and Ext JS as well, was not a completely smooth affair. Several of the bumps in the road came from learning how to use OpenLayers and Ext JS effectively. While both are written using JavaScript objects, each has its own methods to drive its functionality. Getting a handle on a new framework involves learning how different objects are connected, how they communicate and how to get them to perform at their best. But the result is stunning, smooth, and allows for easy-to-use functionalities. Let us know what you think!