sabman/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Dinamic choropleth map with time range slider

Basic operations:

Layer definition: the layer is the result of a JOIN between two tables, one with the polygons (spanish provinces) and another one with information of all the feature films shot in Spain per province listed in imdb (http://www.imdb.com/interfaces), including year of release.
Time range slider: when slided, the layer changes it parameters.

Other features:

Tooltip information box with the name of the province and the number of films for the hovered province in the selected time range.
Plain color backgroung.
Fixed map (no zoom and no dragging).


## index.html
<!doctype html>
<head>
    <title>Choropleth map with time range slider</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://www.w3schools.com/lib/w3data.js"></script>
    <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">

	  <!-- jQuery -->
  	<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'>
  	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script type="cartocss/text" id="choro_basic">
		/** choropleth visualization */
		#ign_spanish_adm2_provinces{
	  		polygon-fill: #7f0000;
	  		polygon-opacity: 1;
	  		line-width: 0.2;
		}
		#ign_spanish_adm2_provinces [ count <= 2000] {
	   		polygon-fill: #b30000;
		}
		#ign_spanish_adm2_provinces [ count <= 1000] {
	   		polygon-fill: #d7301f;
		}
		#ign_spanish_adm2_provinces [ count <= 500] {
	   		polygon-fill: #ef6548;
		}
		#ign_spanish_adm2_provinces [ count <= 150] {
	   		polygon-fill: #fc8d59;
		}
		#ign_spanish_adm2_provinces [ count <= 100] {
	   		polygon-fill: #fdbb84;
		}
		#ign_spanish_adm2_provinces [ count <= 60] {
	   		polygon-fill: #fdd49e;
		}
		#ign_spanish_adm2_provinces [ count <= 30] {
	   		polygon-fill: #fee8c8;
		}
		#ign_spanish_adm2_provinces [ count <= 1] {
	   		polygon-fill: #fff7ec;
		}
		#ign_spanish_adm2_provinces [ count <= 0] {
	   		polygon-fill: #FFFFB2;
		}
	</script>

	<style>

    /* basic elements */
		html, body, #map {
			height: 100%;
			width:100%;
			padding: 0;
			margin: 0;
		}

		/* map bakcground color, visible when there's not a base map */
		#map {
	        background-color: #abc;
	    }

	    /* tooltip style */
	    div.cartodb-tooltip-content-wrapper {
	    	margin: 0;
	    	padding: 0;
	    	color: #000;
	    	height: 30px;
	    	background-color:rgba(255, 255, 255, 0.7);
	    }

      /* legend style */
	    div.cartodb-legend {
	    	right: 10%;
	    }

	    /* time range slider style */
	    #filter-year {
        position: absolute;
        display: block;
        left: 10%;
        height: 40px;
        padding: 0;
        margin-bottom: 0;
        width: 464.667px;
        box-shadow: rgba(0,0,0,.2) 0 0 4px 2px;
        background: #fff;
        border-radius: 4px;
        border: 1px solid #999;
        text-align: left;
        z-index: 105;
      }

    #filter-year {
      bottom: 50px;
		}

		#filter-year ul {
			margin: 0;
			padding: 0;
			list-style: none;
			cursor: default;
		}

		#filter-year ul li {
			display: inline-block;
			vertical-align: top;
			height: 40px;
			width: auto;
			line-height: 40px;
			border-right: 1px solid #E5E5E5;
		}

		#filter-year ul li.last {
			border-right: 0;
			right: 0;
		}

		#filter-year ul li p {
			width: 120px;
			height: 40px;
			margin: 0;
			padding: 0 5px 0 0;
			line-height: 40px;
			font-size: 13px;
			font-weight: 700;
			font-family: Helvetica,Arial;
			text-align: center;
			color: #999;
		}

		#filter-year ul li div {
			width: 174px;
		}

		#filter-year ul li div.slider {
			vertical-align: center;
			margin-top: 17px;
			margin-left: 15px;
			margin-right: 15px;
			height: 4px;
		}

		#filter-year ul li div span.ui-slider-handle {
			width: 9px;
			height: 10px;
			background: url(../img/slider.png) no-repeat -98px -18px #fff;
			border: 1px solid #555;
			border-radius: 2px;
			-webkit-border-radius: 2px;
			-moz-border-radius: 2px;
			-o-border-radius: 2px;
			outline: 0;
		}

	 </style>

  </head>
<body>
	<!-- MAPA -->
	<div id="map"></div>

	<!-- FILTROS DEL MAPA - CREADOS IN SITU -->
	<div id="filter-year" class="leaflet-container">
		<ul>
			<li class="start-date"><p><span id="startDate"></span></p></li>
			<li><div id="slider-range" class="slider"></div></li>
			<li class="last"><p><span id="endDate"></span></p></li>
		</ul>
	</div>

	<!-- LEYENDA DEL MAPA - SACADA DEL EDITOR -->
	<div class='cartodb-legend choropleth'>
	<ul>
		<li class="min">0</li>
		<li class="max">2000</li>
		<li class="graph count_441">
			<div class="colors">
				<div class="quartile" style="background-color:#fff7ec"></div>
				<div class="quartile" style="background-color:#fee8c8"></div>
				<div class="quartile" style="background-color:#fdd49e"></div>
				<div class="quartile" style="background-color:#fdbb84"></div>
				<div class="quartile" style="background-color:#fc8d59"></div>
				<div class="quartile" style="background-color:#ef6548"></div>
				<div class="quartile" style="background-color:#d7301f"></div>
				<div class="quartile" style="background-color:#b30000"></div>
				<div class="quartile" style="background-color:#7f0000"></div>
			</div>
		</li>
	</ul>
	</div>

	<!-- Scripts del mapa -->
    <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>

    <script>

	function main() {

    	// Define el mapa
    	var map_object = new L.Map('map', {
    		center: [38.5, -4],
    		zoom: 6,
    		zoomControl: false
    	});

  		// Define las variables básicas
    	var tableName = "rodajesspainporprovinciasimdb";
    	var poligonTableName = "ign_spanish_adm2_provinces_displaced_canary";
        var userName = "victor-aertsen";

        // source layer: squel join of a two tables, one with polygons (provincias) and another with points (films)
        var layerSource = {
        	user_name: userName,
            type: 'cartodb',
            sublayers: [{
            	sql: "SELECT m.cartodb_id, m.the_geom, m.the_geom_webmercator, count(e.provincia), e.provincia FROM ign_spanish_adm2_provinces_displaced_canary m JOIN rodajesspainporprovinciasimdb e ON m.nameunit = e.provincia WHERE (e.ano >= 1900) AND (e.ano <= 2020) GROUP BY e.provincia, m.cartodb_id",
                cartocss: $("#choro_basic").html()
             }]
        }

        // add layer to map
  		cartodb.createLayer(map_object, layerSource)
  			.addTo(map_object)
  			.done(function(layer) {

				// define sublayer
				var choroLayer = layer.getSubLayer(0);

				// map behaviour options
				map_object.dragging.disable();
		        map_object.touchZoom.disable();
		        map_object.doubleClickZoom.disable();
		        map_object.scrollWheelZoom.disable();

    			// map interactivity options
    			choroLayer.setInteraction(true);
    			choroLayer.setInteractivity(['provincia', 'count', 'cartodb_id']);

				// slider variables
				var inicio = 1900;
				var fin = 2016;
				$('#startDate').html(inicio);
            	$('#endDate').html(fin);

            	// define slider
				$('#slider-range').slider({
      				range: true,
      				min: inicio,
      				max: fin,
      				range: true,
      				values: [ inicio, fin ],
      				step: 1,
      				slide: function( event, ui ) {
        				$('#startDate').html(ui.values[0]);
            			$('#endDate').html(ui.values[1]);
        			},
        			stop: function(event, ui) {
          				// realizar el query
          				inicio = ui.values[0];
          				fin = ui.values[1];
          				var nuevoQuery = "SELECT m.cartodb_id, m.the_geom, m.the_geom_webmercator, count(e.provincia), e.provincia FROM ign_spanish_adm2_provinces_displaced_canary m JOIN rodajesspainporprovinciasimdb e ON m.nameunit = e.provincia WHERE (e.ano >= " + inicio + ") AND (e.ano <= " + fin + ") GROUP BY e.provincia, m.cartodb_id";
          				choroLayer.setSQL(nuevoQuery);

          			}
        		});


    			// define tootltip
				var tooltip = layer.leafletMap.viz.addOverlay({
					type: 'tooltip',
					layer: choroLayer,
					template: '<div class="cartodb-tooltip-content-wrapper"><div class="cartodb-tooltip-content">{{provincia}}: {{count}}</div></div>',
					width: 200,
					position: 'bottom|right',
					fields: [{ provincia: 'provincia', count: 'count' }]
				});

				// add tooltip to map object
				$('body').append(tooltip.render().el);


  			})
  			.error(function(err) {
    			console.log("Error: " + err);
  			});

  	}

	// initiates the map
  	window.onload = main;

	</script>

</body>
</html>
	<!doctype html>
	<head>
	<title>Choropleth map with time range slider</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="http://www.w3schools.com/lib/w3data.js"></script>
	<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/styles.css">

	<!-- jQuery -->
	<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'>
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

	<script type="cartocss/text" id="choro_basic">
	/** choropleth visualization */
	#ign_spanish_adm2_provinces{
	polygon-fill: #7f0000;
	polygon-opacity: 1;
	line-width: 0.2;
	}
	#ign_spanish_adm2_provinces [ count <= 2000] {
	polygon-fill: #b30000;
	}
	#ign_spanish_adm2_provinces [ count <= 1000] {
	polygon-fill: #d7301f;
	}
	#ign_spanish_adm2_provinces [ count <= 500] {
	polygon-fill: #ef6548;
	}
	#ign_spanish_adm2_provinces [ count <= 150] {
	polygon-fill: #fc8d59;
	}
	#ign_spanish_adm2_provinces [ count <= 100] {
	polygon-fill: #fdbb84;
	}
	#ign_spanish_adm2_provinces [ count <= 60] {
	polygon-fill: #fdd49e;
	}
	#ign_spanish_adm2_provinces [ count <= 30] {
	polygon-fill: #fee8c8;
	}
	#ign_spanish_adm2_provinces [ count <= 1] {
	polygon-fill: #fff7ec;
	}
	#ign_spanish_adm2_provinces [ count <= 0] {
	polygon-fill: #FFFFB2;
	}
	</script>

	<style>

	/* basic elements */
	html, body, #map {
	height: 100%;
	width:100%;
	padding: 0;
	margin: 0;
	}

	/* map bakcground color, visible when there's not a base map */
	#map {
	background-color: #abc;
	}

	/* tooltip style */
	div.cartodb-tooltip-content-wrapper {
	margin: 0;
	padding: 0;
	color: #000;
	height: 30px;
	background-color:rgba(255, 255, 255, 0.7);
	}

	/* legend style */
	div.cartodb-legend {
	right: 10%;
	}

	/* time range slider style */
	#filter-year {
	position: absolute;
	display: block;
	left: 10%;
	height: 40px;
	padding: 0;
	margin-bottom: 0;
	width: 464.667px;
	box-shadow: rgba(0,0,0,.2) 0 0 4px 2px;
	background: #fff;
	border-radius: 4px;
	border: 1px solid #999;
	text-align: left;
	z-index: 105;
	}

	#filter-year {
	bottom: 50px;
	}

	#filter-year ul {
	margin: 0;
	padding: 0;
	list-style: none;
	cursor: default;
	}

	#filter-year ul li {
	display: inline-block;
	vertical-align: top;
	height: 40px;
	width: auto;
	line-height: 40px;
	border-right: 1px solid #E5E5E5;
	}

	#filter-year ul li.last {
	border-right: 0;
	right: 0;
	}

	#filter-year ul li p {
	width: 120px;
	height: 40px;
	margin: 0;
	padding: 0 5px 0 0;
	line-height: 40px;
	font-size: 13px;
	font-weight: 700;
	font-family: Helvetica,Arial;
	text-align: center;
	color: #999;
	}

	#filter-year ul li div {
	width: 174px;
	}

	#filter-year ul li div.slider {
	vertical-align: center;
	margin-top: 17px;
	margin-left: 15px;
	margin-right: 15px;
	height: 4px;
	}

	#filter-year ul li div span.ui-slider-handle {
	width: 9px;
	height: 10px;
	background: url(../img/slider.png) no-repeat -98px -18px #fff;
	border: 1px solid #555;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-o-border-radius: 2px;
	outline: 0;
	}

	</style>

	</head>
	<body>
	<!-- MAPA -->
	<div id="map"></div>

	<!-- FILTROS DEL MAPA - CREADOS IN SITU -->
	<div id="filter-year" class="leaflet-container">
	<ul>
	<li class="start-date"><p><span id="startDate"></span></p></li>
	<li><div id="slider-range" class="slider"></div></li>
	<li class="last"><p><span id="endDate"></span></p></li>
	</ul>
	</div>

	<!-- LEYENDA DEL MAPA - SACADA DEL EDITOR -->
	<div class='cartodb-legend choropleth'>
	<ul>
	<li class="min">0</li>
	<li class="max">2000</li>
	<li class="graph count_441">
	<div class="colors">
	<div class="quartile" style="background-color:#fff7ec"></div>
	<div class="quartile" style="background-color:#fee8c8"></div>
	<div class="quartile" style="background-color:#fdd49e"></div>
	<div class="quartile" style="background-color:#fdbb84"></div>
	<div class="quartile" style="background-color:#fc8d59"></div>
	<div class="quartile" style="background-color:#ef6548"></div>
	<div class="quartile" style="background-color:#d7301f"></div>
	<div class="quartile" style="background-color:#b30000"></div>
	<div class="quartile" style="background-color:#7f0000"></div>
	</div>
	</li>
	</ul>
	</div>

	<!-- Scripts del mapa -->
	<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>

	<script>

	function main() {

	// Define el mapa
	var map_object = new L.Map('map', {
	center: [38.5, -4],
	zoom: 6,
	zoomControl: false
	});

	// Define las variables básicas
	var tableName = "rodajesspainporprovinciasimdb";
	var poligonTableName = "ign_spanish_adm2_provinces_displaced_canary";
	var userName = "victor-aertsen";

	// source layer: squel join of a two tables, one with polygons (provincias) and another with points (films)
	var layerSource = {
	user_name: userName,
	type: 'cartodb',
	sublayers: [{
	sql: "SELECT m.cartodb_id, m.the_geom, m.the_geom_webmercator, count(e.provincia), e.provincia FROM ign_spanish_adm2_provinces_displaced_canary m JOIN rodajesspainporprovinciasimdb e ON m.nameunit = e.provincia WHERE (e.ano >= 1900) AND (e.ano <= 2020) GROUP BY e.provincia, m.cartodb_id",
	cartocss: $("#choro_basic").html()
	}]
	}

	// add layer to map
	cartodb.createLayer(map_object, layerSource)
	.addTo(map_object)
	.done(function(layer) {

	// define sublayer
	var choroLayer = layer.getSubLayer(0);

	// map behaviour options
	map_object.dragging.disable();
	map_object.touchZoom.disable();
	map_object.doubleClickZoom.disable();
	map_object.scrollWheelZoom.disable();

	// map interactivity options
	choroLayer.setInteraction(true);
	choroLayer.setInteractivity(['provincia', 'count', 'cartodb_id']);

	// slider variables
	var inicio = 1900;
	var fin = 2016;
	$('#startDate').html(inicio);
	$('#endDate').html(fin);

	// define slider
	$('#slider-range').slider({
	range: true,
	min: inicio,
	max: fin,
	range: true,
	values: [ inicio, fin ],
	step: 1,
	slide: function( event, ui ) {
	$('#startDate').html(ui.values[0]);
	$('#endDate').html(ui.values[1]);
	},
	stop: function(event, ui) {
	// realizar el query
	inicio = ui.values[0];
	fin = ui.values[1];
	var nuevoQuery = "SELECT m.cartodb_id, m.the_geom, m.the_geom_webmercator, count(e.provincia), e.provincia FROM ign_spanish_adm2_provinces_displaced_canary m JOIN rodajesspainporprovinciasimdb e ON m.nameunit = e.provincia WHERE (e.ano >= " + inicio + ") AND (e.ano <= " + fin + ") GROUP BY e.provincia, m.cartodb_id";
	choroLayer.setSQL(nuevoQuery);

	}
	});


	// define tootltip
	var tooltip = layer.leafletMap.viz.addOverlay({
	type: 'tooltip',
	layer: choroLayer,
	template: '<div class="cartodb-tooltip-content-wrapper"><div class="cartodb-tooltip-content">{{provincia}}: {{count}}</div></div>',
	width: 200,
	position: 'bottom\|right',
	fields: [{ provincia: 'provincia', count: 'count' }]
	});

	// add tooltip to map object
	$('body').append(tooltip.render().el);


	})
	.error(function(err) {
	console.log("Error: " + err);
	});

	}

	// initiates the map
	window.onload = main;

	</script>

	</body>
	</html>