Skip to content

Instantly share code, notes, and snippets.

@wboykinm

wboykinm/index.html

Created December 27, 2012 04:55
Show Gist options
  • Save wboykinm/4385557 to your computer and use it in GitHub Desktop.
Save wboykinm/4385557 to your computer and use it in GitHub Desktop.
Download ZIP
Getting there on MECMaps en francais
Raw
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;
/*height:160px;*/
padding:15px;
opacity:0.9;
}
#zoom {
top: 50px;
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
<link rel="stylesheet" href="http://geosprocket.com/assets/bootstrap/css/bootstrap-cosmo.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
<![endif]-->
</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="http://programmemec.ma/" target="_blank">Accueil MEC</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div id="map"></div>
<div id="footer">
<div class="container">
<div class="featurette">
<img class="featurette-image pull-right" src="http://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>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
<script src="http://geosprocket.com/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
// create layer selector
function createSelector(layer) {
var sql = new cartodb.SQL({ user: 'dai' });
var $options = $('#layer_selector li');
$options.click(function(e) {
// get the area of the selected layer
var $li = $(e.target);
var crop = $li.attr('data');
// deselect all and select the clicked one
$options.removeClass('selected');
$li.addClass('selected');
// create query based on data from the layer
var query = "select * from ag_survey_2011";
if(crop !== 'tout') {
query = "select * from ag_survey_2011 where " + crop + " > 0 ";
}
// change the query in the layer to update the map
layer.setQuery(query);
});
}
function main() {
cartodb.createVis('map', 'http://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) {
// layer 0 is the base layer, layer 1 is cartodb layer
createSelector(layers[1])
})
.error(function(err) {
console.log(err);
});
}
window.onload = main;
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment