As of now, we have a map that you can toggle between layers using the "layer selector".

We want to instead have buttons on the map that, by clicking on one, you can switch between layers. In our's, each layer has a different year's data with different lines and we want buttons for each of the three years.

We looked at this tutorial: https://docs.cartodb.com/tutorials/toggle_map_view/ It appears to be out of date. It directed us towards the "basic interactivity" tutorial for under "CartoDB.js is from the ground up". We want to be able to style the map by the end user in the same way that the tutorial suggests. The tutorial uses a template to edit that seems straight forward enough. We want to edit our map similarly. However, we can't find the javascript that we should edit. If we copy the cartodb.js file under "publish", it gives some but not all of our customizations in an html file and nothing shows up if we try to bring it from a text editor into safari.

How can we create buttons and, more importantly, WHERE do we do that?

  • As per the Tour there should be only one question per question.
    – PolyGeo
    Jun 24, 2016 at 17:56

1 Answer 1


First, I highly recommend you to cover all CartoDB Map Academy courses related to CartoDB.js. Secondly, in order to add buttons to your visualization you need to insert into your <body> tag of your html file something like this:

<div id="layer_selector" class="cartodb-infobox">
    <li id="abc" class="selected">All</li>
    <li id="efg">Layer 1</li>
    <li id="hij">Layer 2</li>

Third, you have to create a function such as createSelector(layer) made in this working example. Basically, it uses jQuery and CartoDB.js.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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