Beautiful, Easy Maps in Drupal using Views and Mapstraction

I've been asked about the Archdiocese of St. Louis's online parish search mapping functionality enough times that I finally made a quick video walkthrough of how it was done. The video below explains it all—basically, we use the Location module to attach addresses to nodes and geocode (get lat/lon) the addresses, and we use Views + Mapstraction to make the spiffy maps all over the site.

The functionality was originally set up by the kind folks at Palantir, and tweaked a bit over time by me to make what you see today.

You can watch the video in HD on Vimeo, to see fine details. (Recorded with iShowU HD).


Victor's picture

How did you go about doing the proximity search here? is it part of the mapstraction? or did you use something else?
Did you consider using openlayers? Any thoughts on what you think of that?

Open Source Catholic's picture

Proximity search is achieved through the location module - it has a 'proximity' filter that allows users to search by zip code. It's a little annoying though, and I'm thinking of doing something different. See:

I've only glanced through the OpenLayers docs, but I don't know if it would be the best fit here—Google Maps is a lot more familiar with many people, and has some nice features (through Mapstraction) that I don't want to give up.

Advancing the faith.

Mo's picture

Thank you for showing how this sort of maps can be created with Drupal.

A few other things on the Archdiocese of St. Louis site I would love to know how they are done. Please consider these as future blog topics.

** What do you use to create the mega menu dropdown on the top menu?

on the parish node page (eg

** How is the "Mass times" list created? I see there are multiple days, then each day can have multiple time slots. How do you make CCK do that? And how is the theming done?

** There is a map at the bottom, how is that done? Views attach of a Mapstraction view?


BTW, there is a tiny little problem with the comment form here.: when you preview the comment, the Homepage field is over on top the the preview. You should probably use float instead of position: absolute.

Open Source Catholic's picture

Lots of good questions in there! I'll answer a few right here:

1. Mega dropdown menus are all custom coded (in a 'nav.php' file, that's included through our theme's page.tpl.php). I put a little effort into working with the menu system for this, but gave up after a bit of time... since main nav doesn't change much, the nav.php file is maintainable... just not ideal.

2. Mass times list (and search functions) are all custom code. It was a pain to get all that done - and I'm planning on redoing it anyways. When I do, I'll be blogging about it. Don't worry :-)

3. Map at the bottom is done through Views Attach (handy little module!).

Advancing the faith.

Mike 's picture

How would I go about expanding this search to perform a proximity search by specific address? Is this possible?

Open Source Catholic's picture

You would need to write a custom views filter that allows for geocoding of addresses, and passes that lat/lon to the map. Unfortunately, I have not found anything prewritten for this feature :(

Advancing the faith.

Anonymous's picture

Here is "The Locator" for the Diocese of Arlington, one can search by location, by desired Mass/Confession/Adoration time, by Language, etc...

These are very useful tools for parishioners! Thanks for the post.

Open Source Catholic's picture

Nice use of the Google Maps API, there!

Advancing the faith.

Shyne's picture

Nice map you've got there! I've been trying to do the same for my project. I succesfully retrieved the lat&long and i'm able to display them in my view. They appear when i set the style to html-list, table etc.. But twhen i put mapstraction , and i go on the page it should display. Its blank. I can see in that a request is being made to for a second or so. But then nothing appears. Could you suggest some help?


Open Source Catholic's picture

You might want to check your error logs and your site's status report. Another thing to check is whether you have an API key for Google Maps set correctly.

Advancing the faith.

Ross Nelson's picture

How did you get the map to recenter and zoom based on the filter or resulting points? I don't seem to have any clear options for that functionality.

Jeff Geerling's picture

I think Mapstraction has a flag you can set to center the map and zoom automatically based on what's in the map; I haven' been doing much mapping work in the past year, though, so I could be wrong. I do know that Google's APIs allow map centering and zooming, though, based on the map's contents.

Developer from St. Louis, MO. My personal website.