ramiroaznar · January 30, 2018 14:34
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>SQL Slider with CARTO.js v4</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="https://cartodb.com/assets/favicon.ico" />

    <!-- leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

    <!-- underscore -->
    <script src="https://fastcdn.org/Underscore.js/1.8.3/underscore-min.js"></script>

    <!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <!-- carto.js -->
    <script src="https://cartodb-libs.global.ssl.fastly.net/carto.js/v4.0.0-beta.10/carto.min.js"></script>

    <style>
      html,
      body {
        height: 100%;
        padding: 0;
        margin: 0;
        position: relative;
      }
      
      #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }

      .slider-container{
        display: table-cell;
        position: absolute;
        top: 20px;
        right: 20px;
        height: 20px;
        z-index: 9999;

        vertical-align: middle;
        background: white;
        padding: 10px;
      }
      .slider-container label, .slider-container input{
        vertical-align:middle;
      }
      .slider-container label{
        width: 50px;
      }
    </style>

 </head>
 <body>

    <!-- map div -->
    <div id="map"></div>

    <div class="slider-container">
      <label for="slider-cities">500 cities</label>
      <input id="slider-cities" type="range" min="5" max="1000" step="5" value="500">
    </div>

    <script type="text/cartocss" id="style">
      #layer {
        marker-width: 7;
        marker-fill: ramp([featurecla], cartocolor(Bold), category);
        marker-fill-opacity: 0.7;
        marker-line-width: 0;
        marker-type: ellipse;
        marker-allow-overlap: true;
      }
      #layer::labels{
        text-name: [name];
        text-face-name: 'DejaVu Sans Book';
        text-size: 10;
        text-label-position-tolerance: 10;
        text-fill: #000;
        text-halo-fill: #FFF;
        text-halo-radius: 1;
        text-dy: -10;
        text-allow-overlap: false;
        text-placement: point;
        text-placement-type: simple;
      }
    </script>

    <script type="text/sql" id="query">
      SELECT 
        *
      FROM 
        populated_places
      WHERE
        pop_max > 1000000
      LIMIT
        <%= cities %>
    </script>

    <script>
      function main() {
        // get styles, query, legend & slider
        const style = $("#style").text();
        const query = _.template($('#query').html());
        const slider_container = $('#slider-container');
        const slider = $('#slider-cities');

        console.log(query)

        // add map variable
        map = L.map('map', { 
            zoomControl: false,
            center: [41, -25],
            zoom: 3
        });

        // add Voyager Basemap
        L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
          maxZoom: 18,
          zIndex: 0
        }).addTo(map);

        // add client
        const client = new carto.Client({
          apiKey: 'API_KEY',
          username: 'ramirocartodb'
        });

        // define layer configuration
        const citiesSource = new carto.source.SQL(query({cities:500})),
              citiesStyle = new carto.style.CartoCSS(style),
              citiesLayer = new carto.layer.Layer(citiesSource, citiesStyle);

        window.citiesLayer = citiesLayer;

        // add layer to Leaflet map
        client.addLayer(citiesLayer);
        client.getLeafletLayer().addTo(map);

        // change sql query with slider value
        slider.on('change', function(e) {
          let value = e.target.value;
          let label = $("label").text(value);
          console.log(value);
          citiesSource.setQuery(query({cities: value}))
        });

        // stop dragging when clicking on slider
        slider_container.on('mousedown', function () {
            map.dragging.disable();
            console.log("hola");
        });

        }
      window.onload = main;
    </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>SQL Slider with CARTO.js v4</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="https://cartodb.com/assets/favicon.ico" />

	<!-- leaflet -->
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
	<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

	<!-- underscore -->
	<script src="https://fastcdn.org/Underscore.js/1.8.3/underscore-min.js"></script>

	<!-- jquery -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

	<!-- carto.js -->
	<script src="https://cartodb-libs.global.ssl.fastly.net/carto.js/v4.0.0-beta.10/carto.min.js"></script>

	<style>
	html,
	body {
	height: 100%;
	padding: 0;
	margin: 0;
	position: relative;
	}

	#map {
	height: 100%;
	padding: 0;
	margin: 0;
	}

	.slider-container{
	display: table-cell;
	position: absolute;
	top: 20px;
	right: 20px;
	height: 20px;
	z-index: 9999;

	vertical-align: middle;
	background: white;
	padding: 10px;
	}
	.slider-container label, .slider-container input{
	vertical-align:middle;
	}
	.slider-container label{
	width: 50px;
	}
	</style>

	</head>
	<body>

	<!-- map div -->
	<div id="map"></div>

	<div class="slider-container">
	<label for="slider-cities">500 cities</label>
	<input id="slider-cities" type="range" min="5" max="1000" step="5" value="500">
	</div>

	<script type="text/cartocss" id="style">
	#layer {
	marker-width: 7;
	marker-fill: ramp([featurecla], cartocolor(Bold), category);
	marker-fill-opacity: 0.7;
	marker-line-width: 0;
	marker-type: ellipse;
	marker-allow-overlap: true;
	}
	#layer::labels{
	text-name: [name];
	text-face-name: 'DejaVu Sans Book';
	text-size: 10;
	text-label-position-tolerance: 10;
	text-fill: #000;
	text-halo-fill: #FFF;
	text-halo-radius: 1;
	text-dy: -10;
	text-allow-overlap: false;
	text-placement: point;
	text-placement-type: simple;
	}
	</script>

	<script type="text/sql" id="query">
	SELECT
	*
	FROM
	populated_places
	WHERE
	pop_max > 1000000
	LIMIT
	<%= cities %>
	</script>

	<script>
	function main() {
	// get styles, query, legend & slider
	const style = $("#style").text();
	const query = _.template($('#query').html());
	const slider_container = $('#slider-container');
	const slider = $('#slider-cities');

	console.log(query)

	// add map variable
	map = L.map('map', {
	zoomControl: false,
	center: [41, -25],
	zoom: 3
	});

	// add Voyager Basemap
	L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
	maxZoom: 18,
	zIndex: 0
	}).addTo(map);

	// add client
	const client = new carto.Client({
	apiKey: 'API_KEY',
	username: 'ramirocartodb'
	});

	// define layer configuration
	const citiesSource = new carto.source.SQL(query({cities:500})),
	citiesStyle = new carto.style.CartoCSS(style),
	citiesLayer = new carto.layer.Layer(citiesSource, citiesStyle);

	window.citiesLayer = citiesLayer;

	// add layer to Leaflet map
	client.addLayer(citiesLayer);
	client.getLeafletLayer().addTo(map);

	// change sql query with slider value
	slider.on('change', function(e) {
	let value = e.target.value;
	let label = $("label").text(value);
	console.log(value);
	citiesSource.setQuery(query({cities: value}))
	});

	// stop dragging when clicking on slider
	slider_container.on('mousedown', function () {
	map.dragging.disable();
	console.log("hola");
	});

	}
	window.onload = main;
	</script>

	</body>
	</html>