index.html
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
#footer {
position:absolute;
bottom:0px;
left:0px;
right:0px;
background:#fff;
z-index:999;
overflow:auto;
padding:15px;
opacity:0.9;
}
#zoom {
top: 50px;
}
.modal {
z-index:99999;
}
</style>
<link rel="stylesheet" href="//libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
<link rel="stylesheet" href="//geosprocket.com/assets/bootstrap/css/bootstrap-cosmo.css" />
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a href="#myModal" role="button" data-toggle="modal" class="brand">MECCartes</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="#">Affaires</a></li>
<li><a href="#contact">Irrigation</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Type de Culture <b class="caret"></b></a>
<ul id="layer_selector" class="dropdown-menu">
<li><a href="#" data="tout" class="selected">Tout</a></li>
<li class="divider"></li>
<li><a href='#' data='mean_autres'>Autres</a></li>
<li><a href='#' data='mean_bett'>Betterave</a></li>
<li><a href='#' data='mean_ble'>Ble</a></li>
<li><a href='#' data='mean_canal'>Canal</a></li>
<li><a href='#' data='mean_clem'>Clementier</a></li>
<li><a href='#' data='mean_eau'>Eau</a></li>
<li><a href='#' data='mean_foret'>Foret</a></li>
<li><a href='#' data='mean_fourr'>Fourrage</a></li>
<li><a href='#' data='mean_fruitd'>Fruit Dive</a></li>
<li><a href='#' data='mean_fruits'>Fruits</a></li>
<li><a href='#' data='mean_habi'>Habitat</a></li>
<li><a href='#' data='mean_incul'>Inculte</a></li>
<li><a href='#' data='mean_jache'>Jachere</a></li>
<li><a href='#' data='mean_legum'>Legumineuse</a></li>
<li><a href='#' data='mean_luze'>Luzerne</a></li>
<li><a href='#' data='mean_mais'>Mais</a></li>
<li><a href='#' data='mean_marai'>Maraichage</a></li>
<li><a href='#' data='mean_navel'>Navel</a></li>
<li><a href='#' data='mean_oliv'>Olivier</a></li>
<li><a href='#' data='mean_orge'>Orge</a></li>
<li><a href='#' data='mean_oued'>Oued</a></li>
<li><a href='#' data='mean_parc'>Parcours</a></li>
<li><a href='#' data='mean_pdt'>Pomme de Terre</a></li>
<li><a href='#' data='mean_route'>Route</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Autres Activites <b class="caret"></b></a>
<ul id="layer_selector" class="dropdown-menu">
<li><a href="#" data="ble">Bourses</a></li>
<li><a href="#" data="fourr">Formations</a></li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Trouver">
</form>
<ul class="nav pull-right">
<li class="divider-vertical"></li>
<li><a href="//programmemec.ma/" target="_blank">Accueil MEC</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="map"></div>
<div id="footer">
<div class="container">
<div class="featurette">
<img class="featurette-image pull-right" src="//dai.geosprocket.com/img/usaid-300.png">
<p><strong>Explorer l'environnement economique du Maroc. </strong><br><br>Cette carte est une fenetre sur le travail de la MEC. Utilisez-le pour trouver des idees et des explications dans l'entreprise, de l'agriculture et des ressources naturelles des provinces de l'Oriental et Doukkala-Abda.</p>
</div>
</div>
</div>
</body>
<script src="//libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
<script src="//geosprocket.com/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
function createSelector(layer) {
var sql = new cartodb.SQL({ user: 'dai' });
var $options = $('#layer_selector li');
$options.click(function(e) {
var $li = $(e.target);
var crop = $li.attr('data');
$options.removeClass('selected');
$li.addClass('selected');
var query = "select * from ag_2011_commune3";
if(crop !== 'tout') {
query = "select * from ag_2011_commune3 where " + crop + " > 0 ";
}
layer.setQuery(query);
});
}
function main() {
cartodb.createVis('map', '//dai.cartodb.com/api/v1/viz/11371/viz.json', {
tiles_loader: true,
center_lat: 34.161818161230386,
center_lon: -5.0537109375,
zoom: 7
})
.done(function(vis, layers) {
createSelector(layers[1])
})
.error(function(err) {
console.log(err);
});
}
window.onload = main;
</script>
<script type="infowindow/html" id="infowindow_template">
<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">
<img style="width: 100%" src="//chart.apis.google.com/chart?chs=270x200&cht=p3&chco=A6CEE3|1F78B4|B2DF8A|33A02C|FB9A99|E31A1C|FDBF6F&chd=t:{{content.data.sum_white}},{{content.data.sum_black}},{{content.data.sum_amind}},{{content.data.sum_asian}},{{content.data.sum_hawpac}},{{content.data.sum_tworac}},{{content.data.sum_other}}&chdl=White|Black|American+Indian|Asian|Hawaiian%2FPacific+Native|Multiracial|Other&chdlp=b&chp=2&chl={{content.data.sum_white}}|{{content.data.sum_black}}|{{content.data.sum_amind}}|{{content.data.sum_asian}}|{{content.data.sum_hawpac}}|{{content.data.sum_tworac}}|{{content.data.sum_other}}&chds=a&chma=5,5,10,5|5"></src>
<hr>
<h4>Ward {{content.data.ward}}</h4>
<h4>Total Population: {{content.data.sum_totalp}}</h4>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
</html>