ramiroaznar/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Block based on Oriol's layer selector with buttons createLayer().

  
## index.html
<!DOCTYPE html>
<html>
  <head>

    <title>setCartoCSS with CARTO.js</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #layer_selector {
        position: absolute;
        top: 20px;
        right: 20px;
        padding-left: 30px;
      }
      #layer_selector ul {
        padding: 0; margin: 0;
        list-style-type: none;
      }
      #layer_selector li {
        border-bottom: 1px solid #999;
        padding: 15px 30px;
        font-family: "Helvetica", Arial;
        font-size: 13px;
        background-color: #FFF;
        text-decoration: none;

      }
      #layer_selector li:hover {
        background-color: #F0F0F0;
        cursor: pointer;
      }
      #layer_selector li.selected {
        background-color: #F0F0F0;
      }
      a:-webkit-any-link {
        color: black;
        text-decoration: none !important;
        cursor: auto;
      }

    </style>

    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  </head>
  <body>
    <div id="map"></div>
    <!-- Different way to create the botton list -->
    <div id='layer_selector'>
      <ul>
      <li><a href="#spain" id="spain" class="button spain">Spain</a></li>
      <li><a href="#france" id="france" class="button france">France</a></li>
      <li><a href="#portugal" id="portugal" class="button portugal">Portugal</a></li>
      <li><a href="#italy" id="italy" class="button italy">Italy</a></li>
      <li><a href="#greece" id="greece" class="button greece">Greece</a></li>
      <li><a href="#all" id="all" class="button all">All</a></li>

    </ul>
  </div>


    <!-- include cartodb.js library -->
    <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>

    <script>

      function main() {

        var map = L.map('map', {
                  zoomControl: true,
                  center: [40, 20],
                  zoom: 3
                });

       L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'}).addTo(map);

        var sublayers = [];

        cartodb.createLayer(map, 'https://team.cartodb.com/u/oboix/api/v2/viz/e64f2796-6cd6-11e5-bb1b-0ecfd53eb7d3/viz.json')
          .addTo(map)
          .on('done', function(layer) {

            var subLayerOptions = {
              sql: "SELECT * FROM european_1",
              cartocss: "#european_1{polygon-fill: #fc9f58; line-color: white; }"
            }

            var sublayer = layer.getSubLayer(0);

            sublayer.set(subLayerOptions);

            sublayers.push(sublayer);

        });


      var LayerActions = {
          spain: function(){
            sublayers[0].setCartoCSS("#european_1{polygon-fill: #fc9f58; line-color: white; } #european_1[admin='Spain']{polygon-fill: #c8fc55; line-color: white; }");
            return true;
          },
          france: function(){
            sublayers[0].setCartoCSS("#european_1{polygon-fill: #fc9f58; line-color: white; } #european_1[admin='France']{polygon-fill: #c8fc55; line-color: white; }");
            return true;
          },
          italy: function(){
            sublayers[0].setCartoCSS("#european_1{polygon-fill: #fc9f58; line-color: white; } #european_1[admin='Italy']{polygon-fill: #c8fc55; line-color: white; }");
            return true;
          },
          portugal: function(){
            sublayers[0].setCartoCSS("#european_1{polygon-fill: #fc9f58; line-color: white; } #european_1[admin='Portugal']{polygon-fill: #c8fc55; line-color: white; }");
            return true;
          },
          greece: function(){
            sublayers[0].setCartoCSS("#european_1{polygon-fill: #fc9f58; line-color: white; } #european_1[admin='Greece']{polygon-fill: #c8fc55; line-color: white; }");
            return true;
          },
          all: function(){
            sublayers[0].setCartoCSS("#european_1{polygon-fill: #fc9f58; line-color: white; }");
            return true;
          }
        }

         $('.button').click(function() {
            $('.button').removeClass('selected');
            $(this).addClass('selected');

            LayerActions[$(this).attr('id')]();
        });

    }

        window.onload = main;
    </script>
  </body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>

	<title>setCartoCSS with CARTO.js</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

	<style>
	html, body, #map {
	height: 100%;
	padding: 0;
	margin: 0;
	}
	#layer_selector {
	position: absolute;
	top: 20px;
	right: 20px;
	padding-left: 30px;
	}
	#layer_selector ul {
	padding: 0; margin: 0;
	list-style-type: none;
	}
	#layer_selector li {
	border-bottom: 1px solid #999;
	padding: 15px 30px;
	font-family: "Helvetica", Arial;
	font-size: 13px;
	background-color: #FFF;
	text-decoration: none;

	}
	#layer_selector li:hover {
	background-color: #F0F0F0;
	cursor: pointer;
	}
	#layer_selector li.selected {
	background-color: #F0F0F0;
	}
	a:-webkit-any-link {
	color: black;
	text-decoration: none !important;
	cursor: auto;
	}

	</style>

	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
	</head>
	<body>
	<div id="map"></div>
	<!-- Different way to create the botton list -->
	<div id='layer_selector'>
	<ul>
	<li><a href="#spain" id="spain" class="button spain">Spain</a></li>
	<li><a href="#france" id="france" class="button france">France</a></li>
	<li><a href="#portugal" id="portugal" class="button portugal">Portugal</a></li>
	<li><a href="#italy" id="italy" class="button italy">Italy</a></li>
	<li><a href="#greece" id="greece" class="button greece">Greece</a></li>
	<li><a href="#all" id="all" class="button all">All</a></li>

	</ul>
	</div>


	<!-- include cartodb.js library -->
	<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>

	<script>

	function main() {

	var map = L.map('map', {
	zoomControl: true,
	center: [40, 20],
	zoom: 3
	});

	L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'}).addTo(map);

	var sublayers = [];

	cartodb.createLayer(map, 'https://team.cartodb.com/u/oboix/api/v2/viz/e64f2796-6cd6-11e5-bb1b-0ecfd53eb7d3/viz.json')
	.addTo(map)
	.on('done', function(layer) {

	var subLayerOptions = {
	sql: "SELECT * FROM european_1",
	cartocss: "#european_1{polygon-fill: #fc9f58; line-color: white; }"
	}

	var sublayer = layer.getSubLayer(0);

	sublayer.set(subLayerOptions);

	sublayers.push(sublayer);

	});


	var LayerActions = {
	spain: function(){
	sublayers[0].setCartoCSS("#european_1{polygon-fill: #fc9f58; line-color: white; } #european_1[admin='Spain']{polygon-fill: #c8fc55; line-color: white; }");
	return true;
	},
	france: function(){
	sublayers[0].setCartoCSS("#european_1{polygon-fill: #fc9f58; line-color: white; } #european_1[admin='France']{polygon-fill: #c8fc55; line-color: white; }");
	return true;
	},
	italy: function(){
	sublayers[0].setCartoCSS("#european_1{polygon-fill: #fc9f58; line-color: white; } #european_1[admin='Italy']{polygon-fill: #c8fc55; line-color: white; }");
	return true;
	},
	portugal: function(){
	sublayers[0].setCartoCSS("#european_1{polygon-fill: #fc9f58; line-color: white; } #european_1[admin='Portugal']{polygon-fill: #c8fc55; line-color: white; }");
	return true;
	},
	greece: function(){
	sublayers[0].setCartoCSS("#european_1{polygon-fill: #fc9f58; line-color: white; } #european_1[admin='Greece']{polygon-fill: #c8fc55; line-color: white; }");
	return true;
	},
	all: function(){
	sublayers[0].setCartoCSS("#european_1{polygon-fill: #fc9f58; line-color: white; }");
	return true;
	}
	}

	$('.button').click(function() {
	$('.button').removeClass('selected');
	$(this).addClass('selected');

	LayerActions[$(this).attr('id')]();
	});

	}

	window.onload = main;
	</script>
	</body>
	</html>