Thread

Hi,

I have a bunch of case studies (EE entries), and I want to have users be able to “filter” them down by clicking on a map of the U.S states. In other words, Case Study 1 is assigned to Texas, while Case Study 2 and Case Study 3 are assigned to California. Clicking on California should filter the full list down to Case Study 2 and 3.

The landing page for this section will look/work something like this static HTML/JS example (uses the brilliant ImageMapster):

Static Map Example

In other words:
1. States that have entries assigned to them are highlighted in purple.
2. Only those states’ imagemap areas are linked to URLs that will do the job of filtering the entries.

My first instinct is to implement U.S. States as EE categories. I can then have a category template that filters the list down for each state. But it feels inefficient for every state to have an EE loop that checks to see whether it should output the href attribute. It would look something like this:

<area {exp:channel:entries channel="case_studies" category="5" disable="member_data" dynamic="off" limit="1" }
     {if count > 0} href="{site_url}/about-us/case-studies-filter/category/alabama" {/if}{/exp:channel:entries} 
data-state="AL" data-full="Alabama" shape="poly" coords="453,353,452,342,450,329,450,318,451,296,451,284,451,279,457,278,476,277,484,276,484,278,484,279,485,281,487,287,489,295,490,299,491,302,492,308,494,312,495,314,496,317,497,317,497,319,496,323,496,325,496,326,497,329,497,333,497,335,497,336,498,336,499,339,494,339,489,339,470,341,463,342,463,344,464,346,466,347,467,353,461,355,460,355,461,353,461,353,459,348,458,348,457,351,456,353,455,353,453,353">

And that’s just Alabama. Is there any way around running {exp:channel:entries} 50 times? Logically I really do have to hard-code the <area> tags because they have specific rectangular or polygon coordinates, and each time I output an area I have to decide whether the href should be included, based on whether there are entries assigned to that state.

Is there a better way? Thank you!

Hi James,

This is a very cool project and sounds very interesting. Here is what I would do:

1) Setup a channel for your states (Enter each state with it’s coords, data-state, data-full etc. here)
2) Setup the states as categories (Keep the states category names the same as what you have in your states channel.)
3) Setup a channel for your case studies as you normally do and attach the state categories to this channel.

The reason for setting up a state channel is so you can enter the link and coords and other fields you want to use for each of your states without having to hard code it in the source code. Once you have this in place I would use 2 templates to load your data:

Template-1:
- This template will be the one that will loop over all your active categories that are actually attached to at least 1 case study entry. You will have something like this:

{exp:channel:categories channel="case_studies" show_empty="no" parent_only="yes" style="linear"}
{category_name}

{/exp:channel:categories}

This will only display categories that are attached to a case study.

Template-2:
- This is the template you will embed in the loop above to return the correct <area coords…> info based on the state category you pass to it. You will need to pass it the category name from your loop to be used in the channel search parameter. This is why I mentioned at the top that the category names have to match the state channel names. It will look something like this:

<area
{exp:channel:entries channel="states" search:title="={embed:state_name}" limit="1" dynamic="no" status="not closed"}

href="{your_url_field}" 
data-state="{your_data_state_field}" 
data-full="{your_data_full_field}" 
shape="{your_shape_field}" 
coords="{your_coords_field}"

{/exp:channel:entires}
>

Now change your Template-1 to something like this:

...some html code up here

{exp:channel:categories channel="case_studies" show_empty="no" parent_only="yes" style="linear"}

{embed="template-group/template-2" state_name="{category_name}"}

{/exp:channel:categories}

...some html code down here

Now this will return only the states you have a case study entry for. I hope that helps.

Mike

Cool, thanks so much! Doubling up the Categories and Entries is a clever way to do it.

The only catch I see is that I need to (a) output multiple areas per State (e.g. Hawaii) and (b) I need to loop through all the state categories whether they have entries or not (i.e. I need to draw the Florida shape and leave it “unactivated”  (by leaving off the href) even if it has no case studies.

(a) I think can be solved by creating multiple area entries (HI1, HI2, HI3, etc.) and setting a limit of 10 or whatever on the inner loop.

(b) I think can be solved by just using a category loop with show_empty set to “yes” but then test the category each time to see if it’s empty. If it’s empty, I still output all the areas entries with their various attributes, I just leave off the href attribute.

I’ll let you know how it goes!

Hi James,

I’m not sure I follow. If you are displaying the map as an image like you have it here then why do you need to display <area…> tags with empty href?

Mike

Hang on, you’re totally right. I got so caught up in trying to output all the areas I didn’t realize they weren’t actually necessary with the whole image there.

Thanks!