index.html
<html>
<head>
<link rel="stylesheet" href="//libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
<script src="//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(){
map = new L.Map('map', {
center: [34.161818161230386, -5.0537109375],
zoom: 7
})
L.tileLayer('//d.tiles.mapbox.com/v3/landplanner.map-f3ddon0s/{z}/{x}/{y}.png', {
attribution: 'MapBox'
}).addTo(map);
var layerUrl = '//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() {
});
$('.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="//chart.apis.google.com/chart?chs=270x200&cht=p&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&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}}&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&chdlp=b&chp=2&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}}&chds=a&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>