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;
}
</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 id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">MECCartes Base de Donnees</h3>
</div>
<div class="modal-body">
<p>Collectees sur pres de cinq ans, cette information sur le projet MEC a ete mis a disposition par le biais d'un partenariat avec l'Agence Americaine pour le Developpement International, la DAI et le Gouvernement du Maroc. Le dossier complet est disponible en telechargement ici (ZIP 50 MB):</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Telecharger</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
<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='autres'>Autres</a></li>
<li><a href='#' data='bett'>Betterave</a></li>
<li><a href='#' data='ble'>Ble</a></li>
<li><a href='#' data='canal'>Canal</a></li>
<li><a href='#' data='clem'>Clementier</a></li>
<li><a href='#' data='eau'>Eau</a></li>
<li><a href='#' data='foret'>Foret</a></li>
<li><a href='#' data='fourr'>Fourrage</a></li>
<li><a href='#' data='fruitd'>Fruit Dive</a></li>
<li><a href='#' data='fruits'>Fruits</a></li>
<li><a href='#' data='habi'>Habitat</a></li>
<li><a href='#' data='incul'>Inculte</a></li>
<li><a href='#' data='jache'>Jachere</a></li>
<li><a href='#' data='legum'>Legumineuse</a></li>
<li><a href='#' data='luze'>Luzerne</a></li>
<li><a href='#' data='mais'>Mais</a></li>
<li><a href='#' data='marai'>Maraichage</a></li>
<li><a href='#' data='navel'>Navel</a></li>
<li><a href='#' data='oliv'>Olivier</a></li>
<li><a href='#' data='orge'>Orge</a></li>
<li><a href='#' data='oued'>Oued</a></li>
<li><a href='#' data='parc'>Parcours</a></li>
<li><a href='#' data='pdt'>Pomme de Terre</a></li>
<li><a href='#' data='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_survey_2011";
if(crop !== 'tout') {
query = "select * from ag_survey_2011 where " + crop + " > 0 ";
}
layer.setQuery(query);
});
}
function main() {
cartodb.createVis('map', '//dai.cartodb.com/api/v1/viz/11330/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>
</html>