Building a jQuery Interactive Map

New Media Campaigns recently launched a new website for Tryon Palace in New Bern, North Carolina. Tryon Palace was North Carolina's first state capitol, and it features numerous historic buildings, fun reenactments, sculpted gardens, and opportunities for visitors to travel back in time to experience North Carolina's history.

The new Tryon Palace website features an interactive jQuery map to help visitors discover, learn about, and navigate the Tryon Palace campus and its numerous attractions and ammenities. The interactive map can be panned and zoomed, and it includes various clickable markers that reveal informational windows about specific featured locations.

Planning

As simple as the map is to use, it was much more complex to design and build. Given our time constraints, we could not build the interactive map from scratch. Instead, we searched for a foundation to customize specifically for the Tryon Palace project.

After some careful searching, we found this custom interactive map jQuery plugin. It provides many of the core interactive requirements such as panning and zooming while also allowing us to customize the user experience with additional Javascript and CSS.

Location Data

Our first concern was how to provide location data to the interactive map jQuery plugin. The plugin expects JSON data that adheres to a particular schema. Fortunately, the new Tryon Palace website is built with the Drupal content management framework. The Drupal framework gives us a simple, ready-made solution to manage interactive map location data.

We use a custom Drupal view to output map location information as a JSON feed, and this feed is consumed by the interactive map jQuery plugin to render location markers. Best of all, our client can easily use Drupal to add, edit, and remove locations without asking us for help.

Customization

Our very own Lenny Terenzi designed a beautiful custom map of the Tryon Palace campus. We used this high-resolution design as the map background image that can be zoomed with little loss of resolution.

We also developed custom CSS to change how the map marker info windows appear. This was especially necessary on mobile clients that have far less screen real-estate than traditional desktop web browsers. We had to tweak the info window markup deep inside the jQuery plugin source code; this is generally not recommended, but we didn't see any other way to easily extend the plugin's generated markup.

The result is an attractive jQuery interactive map with a custom design that can be panned, zoomed, and clicked. Map markers reveal info windows that work nicely on both desktop and mobile browsers. And location data is easily controlled by our client with the Drupal content management system.

Check out our interactive map for yourself! Visit Tryon Palace at:

http://www.tryonpalace.org/map/interactive