Contextual Filters in Openlayers Example

Introduction

One of the recent comments to come through was about implementing dynamic filtering on the Openlayers. Filtering is setup the same way as you normally would for views that only caveat is the the filtering will happen on the Openlayers Display Overlay but the rendered out will be to happen on a page or block display. The example I will be using to demonstrate Contextual Filtering on Openlayers will be a map, which displays different types of restaurants in a fictitious place called Springfield. I'll use a couple of categories of restaurant, Indian & Thai and provide a side-bar which allows you to select either type.

Pre-requirsite

Read and view some of the views contextual filters (views arguments) tutorials available on the net and of course you will need to have done this one

Drupal Topics Covered

• Openlayers
• Geofield
• Views contextual Filers
• Taxonomy Terms

Method

• I'll create a new map via Openlayers, then a Openlayers view and setup a map at the location of springfield_restaurants. All of the steps are discussed here
• I'll create a new content type and add a geofield for the restaurant and a taxonomy term to specify the type of restaurant, also I'll add a new taxonomy vocabulary called Restaurant Type, which I'll assign the taxonomy terms too.
• Now I'm going to create a couple of Springfield restaurant content types to generate data for the following setup.
• Once I have the initial map setup, I can then start planing on filtering the restaurants to taxonomy:term name type. Now I want to filter by taxonomy name instead of term id, this has a advantage navigating the site with a name instead of attempting to find the term id, though it is better practice to use term id.
• To be able to use extra taxonomy contextual filters we will need to add a Relationship on the Openlayers Display Overlay Display and select the 'taxonomy terms on node'. The select your vocabulary in my case it will be restaurant type.
• Now add the 'Taxonomy term: Name'. this has been provided by the Relationship we just setup. Below is how I set up my settings for the 'Taxonomy term: name' contextual filter

• Now go back to the path defined in the page view and enter your term name to check the contextual filters are operating correctly. In my case I'll enter the 'thai' argument after /springfield_restaurant path. Also you will notice that without any term arguments we get all the dots showing, this is because we selected 'Display all results for the specified field' in the contextual filter
• Now lets create a menu bar that provides the restaurants type in the sidebar. First we will create a new view based on taxonomy terms, here are my initial views settings

• Fill in a block name
• Add the 'Taxonomy term: vocabulary' to the filter criteria and select your vocabulary type.
• That should be it for this view, here are my settings.

• Now go into the Block settings and add the new block view to the sidebar.
• Save that then configure the block and select the 'Show block on specific pages' and select where you want the menu to be displayed. Below are my settings to display the main map and then the following contextual field arguments

• Now when we go to the restaurant page we see the menu, but unfortunately the links go the to content pages themselves, we want them to select the restaurant types on the map instead. So we will go back into the block display and rewrite the results of the taxonomy term: name link. I've used this technique several times on previous tutorials, so I won't go into detail for this.
• Once that has been saved go back to the map page and test the menu links. That should now be behaving as we intended, below is an example of what you should have completed

Conclusion

The new skills you would have picked up if you followed the previous Openlayers tutorials are using views contextual filters to control what terms are display on a map. There are probably a dozen ways in Drupal you could achieve this, but this is the method that instinctively came to my mind.

For any questions or comments about the tutorial post a comment at the end of this page

Bye for now and remember don't forget to flush your cache.