New layerAction structure for MECMaps

<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}}{line-color:#222;line-width:1.2;polygon-fill:white;polygon-opacity:0.7;} "
    }

//Irrigation data table
      //Note: doesn't need "tile_style" since it's only covering one style
      cartodb.createLayer(map, 'https://dai.cartodb.com/api/v1/viz/11478/viz.json')
        .done(function(layer){
          //createSelector(layer);
          layer.infowindow.set('template', $('#infowindow_template_irrigation').html());
          map.addLayer(layer);
          layers.push(layer);
       });

//Business climate table data: "Affaires" 
      //Note: doesn't need "tile_style" since it's only covering one style
      cartodb.createLayer(map, 'https://dai.cartodb.com/api/v1/viz/11479/viz.json')
        .done(function(layer){
          //createSelector(layer);
          layer.infowindow.set('template', $('#infowindow_template').html());
          map.addLayer(layer);
          layers.push(layer);
        });  
      
      //Grants and trainings table data: "Autres Activites -> Bourses & Formations" 
      //Note: doesn't need "tile_style" since it's only covering one style
      cartodb.createLayer(map, 'https://dai.cartodb.com/api/v1/viz/11538/viz.json')
        .done(function(layer){
          //createSelector(layer);
          layer.infowindow.set('template', $('#infowindow_template').html());
          map.addLayer(layer);
          layers.push(layer);
        });
          
      // add a reference overlay from mapbox      
      L.tileLayer('https://a.tiles.mapbox.com/v3/landplanner.map-dbrgj328/{z}/{x}/{y}.png', {
        attribution: 'OpenStreetmap'
      }).addTo(map);

$('.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="#autre" id="autre" class="button autre">Autres</a> 
      <a href="#bett" id="bett" class="button bett">Betterave</a>
      <a href="#ble" id="ble" class="button ble">Ble</a> 
      <a href="#canal" id="canal" class="button canal">Canal</a>
      <a href="#clem" id="clem" class="button clem">Clementier</a>      
      <a href="#eau" id="eau" class="button eau">Eau</a> 
      <a href="#foret" id="foret" class="button foret">Foret</a> 
      <a href="#fourr" id="fourr" class="button fourr">Fourrage</a>
      <a href="#fru_1" id="fru_1" class="button fru_1">Fruit Dive</a>
      <a href="#fruit" id="fruit" class="button fruit">Fruits</a> 
      <a href="#habi" id="habi" class="button habi">Habitat</a> 
      <a href="#incul" id="incul" class="button incul">Inculte</a>
      <a href="#jache" id="jache" class="button jache">Jachere</a>
      <a href="#legum" id="legum" class="button legum">Legumineuse</a> 
      <a href="#luze" id="luze" class="button luze">Luzerne</a>
      <a href="#mais" id="mais" class="button mais">Mais</a>
      <a href="#marai" id="marai" class="button marai">Maraichage</a>      
      <a href="#navel" id="navel" class="button navel">Navel</a> 
      <a href="#oliv" id="oliv" class="button oliv">Olivier</a>
      <a href="#orge" id="orge" class="button orge">Orge</a> 
      <a href="#oued" id="oued" class="button oued">Oued</a>
      <a href="#parc" id="parc" class="button parc">Parcours</a> 
      <a href="#pdt" id="pdt" class="button pdt">Pomme de Terre</a> 
      <a href="#route" id="route" class="button route">Route</a>

<a href="#irrig" id="irrig" class="button irrig">Irrigation - unwired</a> 
      <a href="#affaires" id="affaires" class="button affaires">Affaires - unwired</a>
      <a href="#bourses" id="bourses" class="button bourses">Bourses - unwired</a> 
      
  </div>
</body>

-->

</html>

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

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