Shadow Box Creative Media


Using ExpressionEngine To Power an Interactive jQuery Map
March 06, 2009

Using ExpressionEngine To Power an Interactive jQuery Map

The Shastri Indo-Canadian Institute wanted to geographically show where their members are located in Canada and India on their website with an interactive map that they could update and maintain themselves. We tossed around the idea of using Flash or the Google Maps API to accomplish this, but eventually settled on a jQuery-based map. Here’s how we linked the map to ExpressionEngine so that all the data displayed on the map could be controlled by Shastri and dynamically generated by the CMS.

Created by New Media Campaigns, the jQuery works by pulling in a list of all the cities where Shastri members are located and then plotting them on the map with bullets. To accomplish this, we created two weblogs: 1) Member Locations and 2) Member Institutions. The Member Locations weblog includes the following fields (click to zoom) :

As far as the plotting is concerned, the most important details are the X and Y Coordinate fields, which tell the bullet where to be placed on the map, and the category (not pictured), which assigns the city to one of the three maps: Main, BC, or Ontario.

Because we are plotting the cities and not the members themselves, we had to find a way to pull up the appropriate member information for each city. To do this, we used ExpressionEngine’s built-in related field functionality. In short, we added a Location field to the Member Institutions weblog that that pulls its data from the Member Locations weblog, linking the two together (click to zoom):

With the two weblogs tied together, we then needed to create four templates: one to display the generated map and three (one for each layer of the map) that contained the data required for the bullets and information boxes. As an example, the BC template contains the following code (click to zoom):

As you can see, the exp:weblog:entries tag prints out a list of cities and the reverse_related_entries tag calls all the Members located within those cities. On the template that displays the map, the jQuery provided by New Media Campaigns pulls in all this data, plots the cities on the map, and displays information boxes listing the members for each city when you click on a bullet. You can also zoom in on the BC and Ontario maps to see the cities and members in those areas.

Overall, both we and Shastri are quite happy with this solution. Not only can they show where their members are located, they can use ExpressionEngine to make changes and update the map themselves.

For a more detailed explanation of the jQuery involved, check out New Media Campaigns’ blog where they plan on discussing the techniques involved. For a similar example, see their earlier article Building an interactive map with jQuery instead of Flash.

Posted by Eric in Tips & Tutorials | Permalink