I want to make an interactive map where the end user can filter the data

Question

I've been looking at services like CartoDB and Mapbox for making and hosting some interactive maps. However, it doesn't seem like they provide the option for the end user to filter through the data themselves. Does you know of any out-of-the-box solutions for creating this kind of functionality? Or perhaps CartoDB ad Mapbox do this and I just don't know how.

When I talk about filtering, I mean this. Say a map shows soccer fields around the USA. The user can then toggle between different parts of the data and see only what they're interested in (outdoor fields, indoor fields, grassy fields, turf fields, etc).

Answer 1

You can do that with CartoDB.js. Here you have a working example with a layer selector using buttoms and here another one using a dropdown menu. Applying the first example (where fields is the table, type is the column with two categories -outdoor and indoor-) to your needs. You should first create a div like this:

<div id='layer_selector'>
  <ul>
  <li><a href="#outdoor" id="outdoor" class="button outdoor">Outdoor Fields</a></li> 
  <li><a href="#indoor" id="indoor" class="button indoor">Indoor Fields</a></li>  
  <li><a href="#all" id="all" class="button all">All</a></li>
</ul>

Then after creating the layer you should set the following actions (you can add different or the same styles):

      var LayerActions = {
      outdoor: function(){
        sublayers[0].setSQL("SELECT * FROM fields WHERE type ILIKE 'outdoor' ");
        return true;
      },
      indoor: function(){
        sublayers[0].setSQL("SELECT * FROM fields WHERE type ILIKE 'indoor' ");
        return true;
      }
      all: function(){
        sublayers[0].setSQL("SELECT * FROM fields");
        return true;
      }
    }

     $('.button').click(function() {
        $('.button').removeClass('selected');
        $(this).addClass('selected');
        LayerActions[$(this).attr('id')]();
    });
} 

For more info about toggle map views check the documentation here.