VictorVelarde · May 17, 2016 15:49
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
    <title>Poligonos en el tiempo | CartoDB.js</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
    <style>
        html,
        body,
        #map {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        
        #slider {
            position: absolute;
            bottom: 40px;
            right: 40px;
            left: 40px;
            width: 300px;
        }
        
        #legend {
            font-family: serif;
            font-size: 27px;
            position: absolute;
            bottom: 80px;
            left: 40px;
        }
    </style>
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
 </head>

 <body>
    <div id="map"></div>
    <div id="slider"></div>
    <div id="legend"></div>


    <!-- include cartodb.js library -->
    <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <script>
        function changeLegend(anyo) {
            $('#legend').html("Teselas en " + anyo)
        }

        function addTimeSlider(sublayer) {
            var sql = cartodb.SQL({
                    user: 'victorvelarde'
                })
                // fetch time range
            sql.execute('select max(fecha), min(fecha) from cartodb_query', function (data) {
                var range = data.rows[0];
                var max = new Date(range.max).getTime()
                var min = new Date(range.min).getTime()
                    // update slider with range
                $("#slider").slider({
                    min: min,
                    max: max,
                    value: min,
                    step: 1,
                    slide: function (event, ui) {
                        // give feedback to the user on slide change
                        changeLegend(ui.value);
                    },
                    stop: function (event, ui) {
                        // when user selects the dates, update the layer with the range
                        var start = ui.value;
                        // build sql
                        sublayer.setSQL("select * from cartodb_query where fecha = '" + start + "'");
                    }
                });
                changeLegend(min);
            });
        }

        function main() {
            var map = new L.Map('map', {
                zoomControl: false,
                center: [43.42, -3.79],
                zoom: 13
            });
            //var url = 'https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png';
            var url = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
            //var url = 'http://{s}.api.cartocdn.com/base-light/{z}/{x}/{y}.png';
            L.tileLayer(url, {
                attribution: 'CartoDB · OSM data'
            }).addTo(map);
            cartodb.createLayer(map, 'https://victorvelarde.cartodb.com/api/v2/viz/6bea399e-1c3c-11e6-a0bd-0ef24382571b/viz.json', {
                    legends: false
                })
                .addTo(map)
                .on('done', function (layer) {
                    // add time slider on change
                    addTimeSlider(layer.getSubLayer(0));
                }).on('error', function () {
                    cartodb.log.log("some error occurred");
                });
        }
        // you could use $(window).load(main);
        window.onload = main;
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Poligonos en el tiempo \| CartoDB.js</title>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
	<style>
	html,
	body,
	#map {
	height: 100%;
	padding: 0;
	margin: 0;
	}

	#slider {
	position: absolute;
	bottom: 40px;
	right: 40px;
	left: 40px;
	width: 300px;
	}

	#legend {
	font-family: serif;
	font-size: 27px;
	position: absolute;
	bottom: 80px;
	left: 40px;
	}
	</style>
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	</head>

	<body>
	<div id="map"></div>
	<div id="slider"></div>
	<div id="legend"></div>


	<!-- include cartodb.js library -->
	<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

	<script>
	function changeLegend(anyo) {
	$('#legend').html("Teselas en " + anyo)
	}

	function addTimeSlider(sublayer) {
	var sql = cartodb.SQL({
	user: 'victorvelarde'
	})
	// fetch time range
	sql.execute('select max(fecha), min(fecha) from cartodb_query', function (data) {
	var range = data.rows[0];
	var max = new Date(range.max).getTime()
	var min = new Date(range.min).getTime()
	// update slider with range
	$("#slider").slider({
	min: min,
	max: max,
	value: min,
	step: 1,
	slide: function (event, ui) {
	// give feedback to the user on slide change
	changeLegend(ui.value);
	},
	stop: function (event, ui) {
	// when user selects the dates, update the layer with the range
	var start = ui.value;
	// build sql
	sublayer.setSQL("select * from cartodb_query where fecha = '" + start + "'");
	}
	});
	changeLegend(min);
	});
	}

	function main() {
	var map = new L.Map('map', {
	zoomControl: false,
	center: [43.42, -3.79],
	zoom: 13
	});
	//var url = 'https://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png';
	var url = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
	//var url = 'http://{s}.api.cartocdn.com/base-light/{z}/{x}/{y}.png';
	L.tileLayer(url, {
	attribution: 'CartoDB · OSM data'
	}).addTo(map);
	cartodb.createLayer(map, 'https://victorvelarde.cartodb.com/api/v2/viz/6bea399e-1c3c-11e6-a0bd-0ef24382571b/viz.json', {
	legends: false
	})
	.addTo(map)
	.on('done', function (layer) {
	// add time slider on change
	addTimeSlider(layer.getSubLayer(0));
	}).on('error', function () {
	cartodb.log.log("some error occurred");
	});
	}
	// you could use $(window).load(main);
	window.onload = main;
	</script>
	</body>

	</html>