Old school D3 from simpler times

All examples By author By category About

wboykinm

Full window Github gist

layerActions structure for layer switch

<html>
<head>
  <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
     
  <script src="https://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
	<style>
    html, body {width:100%; height:100%; padding: 0; margin: 0;}
    #map {width: 100%; height:100%; background: black; z-index:1;}
    #menu { position: absolute; top: 5px; right: 10px; width: 400px; height:60px; background: transparent; z-index:10;}
    #menu a { 
              margin: 15px 10px 0 0;
              float: right;
              vertical-align: baseline;
              width: 70px;
              padding: 10px;
              text-align: center;
              font: bold 11px "Helvetica",Arial;
              line-height: normal;
              color: #555;
              border-radius: 4px;
              border: 1px solid #777777;
              background: #ffffff;
              text-decoration: none;
              cursor: pointer;
            }
    #menu a.selected,
    #menu a:hover { 
              color: #F84F40;
            }
	</style>
	<script>
  var map;
  function init(){
    // initiate leaflet map
    map = new L.Map('map', { 
      center: [34.161818161230386, -5.0537109375],
      zoom: 7
    })

L.tileLayer('https://d.tiles.mapbox.com/v3/landplanner.map-f3ddon0s/{z}/{x}/{y}.png', {
      attribution: 'MapBox'
    }).addTo(map);
    
    var layerUrl = 'https://dai.cartodb.com/api/v1/viz/11371/viz.json';
    var layerOptions = {
      query: "SELECT * FROM {{table_name}}",
      tile_style: "#{{table_name}}{marker-fill: #F84F40; marker-width: 8; marker-line-color: white; marker-line-width: 2; marker-clip: false; marker-allow-overlap: true;} "
    }

var layers = [];
    var LayerActions = {
      mais: function(){
        var crop = "mean_mais"; 
        layers[0].setCartoCSS("#{{table_name}}{line-color:#222;line-width:1.2;polygon-opacity:0.9;[" + crop + "<0.5]{polygon-fill:#FFFFFF;}[" + crop + ">=0.5][" + crop + "<0.75]{polygon-fill:#BCB8FF;}[" + crop + ">=0.75][" + crop + "<1]{polygon-fill:#9991FF;}[" + crop + ">=1][" + crop + "<1.5]{polygon-fill:#5B4FFF;}[" + crop + ">=1.5][" + crop + "<2]{polygon-fill:#392BFF;}[" + crop + ">=2]{polygon-fill:#1300FF;}}");
        return true;
      },
      clem: function(){
        var crop = "mean_clem"; 
        layers[0].setCartoCSS("#{{table_name}}{line-color:#222;line-width:1.2;polygon-opacity:0.9;[" + crop + "<0.5]{polygon-fill:#FFFFFF;}[" + crop + ">=0.5][" + crop + "<0.75]{polygon-fill:#BCB8FF;}[" + crop + ">=0.75][" + crop + "<1]{polygon-fill:#9991FF;}[" + crop + ">=1][" + crop + "<1.5]{polygon-fill:#5B4FFF;}[" + crop + ">=1.5][" + crop + "<2]{polygon-fill:#392BFF;}[" + crop + ">=2]{polygon-fill:#1300FF;}}");
        return true;
      },
ble: function(){
        var crop = "mean_ble"; 
        layers[0].setCartoCSS("#{{table_name}}{line-color:#222;line-width:1.2;polygon-opacity:0.9;[" + crop + "<0.5]{polygon-fill:#FFFFFF;}[" + crop + ">=0.5][" + crop + "<0.75]{polygon-fill:#BCB8FF;}[" + crop + ">=0.75][" + crop + "<1]{polygon-fill:#9991FF;}[" + crop + ">=1][" + crop + "<1.5]{polygon-fill:#5B4FFF;}[" + crop + ">=1.5][" + crop + "<2]{polygon-fill:#392BFF;}[" + crop + ">=2]{polygon-fill:#1300FF;}}");
        return true;
      },
orge: function(){
        var crop = "mean_orge"; 
        layers[0].setCartoCSS("#{{table_name}}{line-color:#222;line-width:1.2;polygon-opacity:0.9;[" + crop + "<0.5]{polygon-fill:#FFFFFF;}[" + crop + ">=0.5][" + crop + "<0.75]{polygon-fill:#BCB8FF;}[" + crop + ">=0.75][" + crop + "<1]{polygon-fill:#9991FF;}[" + crop + ">=1][" + crop + "<1.5]{polygon-fill:#5B4FFF;}[" + crop + ">=1.5][" + crop + "<2]{polygon-fill:#392BFF;}[" + crop + ">=2]{polygon-fill:#1300FF;}}");
        return true;
      },capitals: function(){

return true;
      },
      megacities: function(){

return true;
      }
    }

cartodb.createLayer(map, layerUrl, layerOptions)
      .on('done', function(layer) {
        map.addLayer(layer);
layer.infowindow.set('template', $('#infowindow_template_crop').html());
        layers.push(layer);
      }).on('error', function() {
        //log the error
      });

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

})

}
	</script>
</head>
<body onload="init()">
  <div id='map'></div>
  <div id='menu'>
      <a href="#orge" id="orge" class="button orge">Orge</a> 
      <a href="#ble" id="ble" class="button ble">Ble</a> 
      <a href="#clem" id="clem" class="button ">Clementier</a>
      <a href="#mais" id="mais" class="button mais">Mais</a>
  </div>
</body>

<script type="infowindow/html" id="infowindow_template_crop">
    <div class="cartodb-popup">
 
      <a href="#close" class="cartodb-popup-close-button close">x</a>
 
       <div class="cartodb-popup-content-wrapper">
         <div class="cartodb-popup-content">
     
           <hr>
           <h4>{{content.data.libelle}}</h4>
           <h4>Nombre moyen de hectares cultives avec:</h4><hr>
           <img style="width:nning of the last recession and 42 months 100%" src="https://chart.apis.google.com/chart?chs=270x200&amp;cht=p&amp;chco=0033CC|3300CC|9900CC|CC0099|0099CC|0A47FF|4775FF|CC0033|00CC99|FFD147|FFC20A|CC3300|00CC33|33CC00|99CC00|CC9900|004D66|0029A3|0038E0|66001A|00664D|E0A800|A37A00|661A00&amp;chd=t:{{content.data.mean_autre}},{{content.data.mean_bett}},{{content.data.mean_ble}},{{content.data.mean_canal}},{{content.data.mean_clem}},{{content.data.mean_eau}},{{content.data.mean_foret}},{{content.data.mean_fourr}},{{content.data.mean_fru_1}},{{content.data.mean_fruit}},{{content.data.mean_habi}},{{content.data.mean_incul}},{{content.data.mean_jache}},{{content.data.mean_legum}},{{content.data.mean_luze}},{{content.data.mean_mais}},{{content.data.mean_marai}},{{content.data.mean_navel}},{{content.data.mean_oliv}},{{content.data.mean_orge}},{{content.data.mean_oued}},{{content.data.mean_parc}},{{content.data.mean_pdt}},{{content.data.mean_route}}&amp;chdl=Autres|Betterave|Ble|Canal|Clementier|Eau|Foret|Fourrage|Fruit+Dive|Fruits|Habitat|Inculte|Jachere|Legumineuse|Luzerne|Mais|Maraichage|Navel|Olivier|Orge|Oued|Parcours|Pomme+de+Terre|Route&amp;chdlp=b&amp;chp=2&amp;chl={{content.data.mean_autre}}|{{content.data.mean_bett}}|{{content.data.mean_ble}}|{{content.data.mean_canal}}|{{content.data.mean_clem}}|{{content.data.mean_eau}}|{{content.data.mean_foret}}|{{content.data.mean_fourr}}|{{content.data.mean_fru_1}}|{{content.data.mean_fruit}}|{{content.data.mean_habi}}|{{content.data.mean_incul}}|{{content.data.mean_jache}}|{{content.data.mean_legum}}|{{content.data.mean_luze}}|{{content.data.mean_mais}}|{{content.data.mean_marai}}|{{content.data.mean_navel}}|{{content.data.mean_oliv}}|{{content.data.mean_orge}}|{{content.data.mean_oued}}|{{content.data.mean_parc}}|{{content.data.mean_pdt}}|{{content.data.mean_route}}&amp;chds=a&amp;chma=5,5,10,5|5"><hr><h4><em>Les donnees recueillies en 2011</ em></h4>
           
         </div>
       </div>
       <div class="cartodb-popup-tip-container"></div>
    </div>
  </script>

</html>

Modified http://libs.cartocdn.com/cartodb.js/v2/cartodb.js to a secure url

https://libs.cartocdn.com/cartodb.js/v2/cartodb.js