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 class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Hydrologie <b class="caret"></b></a>
<ul id="layer_selector" class="dropdown-menu">
<li><a href="#" data="null">Irrigation</a></li>
<li><a href="#" data="null">Eaux Souterraines</a></li>
</ul>
</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_autre'>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="null">Bourses</a></li>
<li><a href="#" data="null">Formations</a></li>
<li><a href="#" data="null">Stations Meteorologiques</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);
});
}
var layers = [];
function main() {
var map = L.map('map', {
zoomControl: true,
center: [34.161818161230386, -5.0537109375],
zoom: 7
})
L.tileLayer("//a.tiles.mapbox.com/v3/dai.map-jfzz54yc,landplanner.maroc_prov,landplanner.map-dbrgj328/{z}/{x}/{y}.png", {
attribution: "<a href='//mapbox.com/about/maps' target='_blank'>Terms & Feedback</a>",
order: 0,
id: 10645
}).addTo(map);
cartodb.createLayer(map, '//dai.cartodb.com/api/v1/viz/11371/viz.json')
.done(function(layer){
createSelector(layer);
layer.infowindow.set('template', $('#infowindow_template').html());
map.addLayer(layer);
layers.push(layer);
});
cartodb.createLayer(map, '//dai.cartodb.com/api/v1/viz/11371/viz.json', {tile_style: "#{{table_name}}{marker-width: 10; marker-fill: blue;}"})
.done(function(layer){
createSelector(layer);
layer.infowindow.set('template', $('#infowindow_template').html());
map.addLayer(layer);
layers.push(layer);
});
$('body').click(function(){
console.log('click')
if (layers[1].isVisible()){
layers[1].hide();
}else{
layers[1].show();
}
})
}
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">
<hr>
<h4>{{content.data.libelle}}</h4>
<h4>Population: {{content.data.pop}}<br>
Superficie moyenne plantee de cultures: 9999</h4>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
</html>