Skip to content

Instantly share code, notes, and snippets.

@wboykinm

wboykinm/index.html

Created December 27, 2012 17:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save wboykinm/4390101 to your computer and use it in GitHub Desktop.
Save wboykinm/4390101 to your computer and use it in GitHub Desktop.
Download ZIP
MECMaps w/ commune-level SQL switch
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;
}
.modal {
z-index:99999;
}
</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='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="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>
<!--SQL LAYER SWITCHER-->
<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_2011_commune3";
if(crop !== 'tout') {
query = "select * from ag_2011_commune3 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/11371/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>
<!--TOOLTIPS-->
<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="http://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>
<!-- content.data contains the field info -->
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment