index.html
<!DOCTYPE html>
<html>
<head>
<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" />
<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;
}
.leaflet-control-zoom {
top: 50px;
}
.modal {
z-index:99999;
}
div.cartodb-popup h4 {
color: #333;
}
</style>
</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 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: (" + crop + ")*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>