Skip to content

Instantly share code, notes, and snippets.

@wboykinm

wboykinm/index.html

Created December 28, 2012 18:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wboykinm/4400560 to your computer and use it in GitHub Desktop.
Save wboykinm/4400560 to your computer and use it in GitHub Desktop.
Download ZIP
Style parameter-passing
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<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]-->
<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;
}
.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="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);
});
}
var layers = [];
function main() {
var map = L.map('map', {
zoomControl: true,
center: [34.161818161230386, -5.0537109375],
zoom: 7
})
// add a nice baselayer from mapbox
L.tileLayer("http://a.tiles.mapbox.com/v3/dai.map-jfzz54yc,landplanner.maroc_prov,landplanner.map-dbrgj328/{z}/{x}/{y}.png", {
attribution: "<a href='http://mapbox.com/about/maps' target='_blank'>Terms & Feedback</a>",
order: 0,
id: 10645
}).addTo(map);
cartodb.createLayer(map, 'http://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);
});
//Use some other layer Viz JSON url here.
cartodb.createLayer(map, 'http://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>
<!--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">
<!-- content.data contains the field info -->
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment