1

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).

3

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.

  • Thanks, @ramiroaznar, this was very helpful. How do I add different styles to each option? – user2192778 Apr 12 '16 at 15:11
  • You have to use the setCartoCSSmethod within each function: sublayers[0].setCartoCSS("#layer{...}");. ;-) – ramiroaznar Apr 12 '16 at 18:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.