ramiroaznar/README.md

## README.md

      
    Raw
  

              README.md
            
          
    To know more about the 'Overlapping Points Problem' and how to solve it with this solution check the CartoDB post written by Chris Whong, Stacking Chips - Showing Many Points that Share the Same Location.

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Stacking Points with 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" />
  <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>

  <style>
    html, body,#map {
      width:100%;
      height:100%;
      padding: 0;
      margin: 0;
    }
    .cartodb-tooltip{
      width: 300px;
      max-width: none!important;
      border-radius: 25px;
    }

   div.cartodb-tooltip-content-wrapper{
      padding: 10px;
      color: #000;
      max-width:none;
      background-color: white;

   }

   div.cartodb-tooltip-content-wrapper img{
      width: 100px;
      position: relative;
      left: 70px;
   }
  </style>
</head>

<body>

  <div id='map'></div>

  <script type="text/SQL" id="sql_template">
    WITH
      m AS (
        SELECT array_agg(cartodb_id) id_list, the_geom_webmercator, ST_Y(the_geom_webmercator) y
        FROM ramirocartodb.overlapping_points
        GROUP BY the_geom_webmercator
        ORDER BY y DESC
      ),
      f AS (
        SELECT  generate_series(1, array_length(id_list,1)) p, unnest(id_list) cartodb_id, the_geom_webmercator
        FROM m
      )
    SELECT  ST_Translate(f.the_geom_webmercator,0,f.p*50) the_geom_webmercator, f.cartodb_id, q.city, q.country
    FROM f, ramirocartodb.overlapping_points q
    WHERE f.cartodb_id = q.cartodb_id
  </script>

  <script type="text/javascript">
    function main() {

      var map;

      //  center and zoom level
      var options = {
        zoomControl: false,
        center: [40.42, -3.70],
        zoom: 14,
      };

      var map = new L.Map('map', options);

      L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
      }).addTo(map);

      // add layer
      urlLayer = "https://team.cartodb.com/u/ramirocartodb/api/v2/viz/af48f60a-e6a7-11e5-88f8-0e31c9be1b51/viz.json"
      cartodb.createLayer(map, urlLayer)
        .addTo(map)
        .on('done', function(layer) {

          // set sql query
          var query = $('#sql_template').text();
          var subLayerOptions = {
            sql: query
          }
          var sublayer = layer.getSubLayer(0);
          layer.getSubLayer(0).set(subLayerOptions);


          // tooltip definition with createLayer
          sublayer.setInteractivity('cartodb_id, city');
          var testTooltip = layer.leafletMap.viz.addOverlay({
            type: 'tooltip',
            layer: sublayer,
            template: '<div class="cartodb-tooltip-content-wrapper"><h3>Id:</h3><p>{{cartodb_id}}</p><h3>City:</h3><p>{{city}}</p></div>',
            width: 200,
            position: 'bottom|right',
            fields: [{ id: 'cartodb_id', city:'city' }]
          });
          $('body').append(testTooltip.render().el);

        });

    }
    window.onload = main;
  </script>
</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<title>Stacking Points with 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" />
	<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
	<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>

	<style>
	html, body,#map {
	width:100%;
	height:100%;
	padding: 0;
	margin: 0;
	}
	.cartodb-tooltip{
	width: 300px;
	max-width: none!important;
	border-radius: 25px;
	}

	div.cartodb-tooltip-content-wrapper{
	padding: 10px;
	color: #000;
	max-width:none;
	background-color: white;

	}

	div.cartodb-tooltip-content-wrapper img{
	width: 100px;
	position: relative;
	left: 70px;
	}
	</style>
	</head>

	<body>

	<div id='map'></div>

	<script type="text/SQL" id="sql_template">
	WITH
	m AS (
	SELECT array_agg(cartodb_id) id_list, the_geom_webmercator, ST_Y(the_geom_webmercator) y
	FROM ramirocartodb.overlapping_points
	GROUP BY the_geom_webmercator
	ORDER BY y DESC
	),
	f AS (
	SELECT generate_series(1, array_length(id_list,1)) p, unnest(id_list) cartodb_id, the_geom_webmercator
	FROM m
	)
	SELECT ST_Translate(f.the_geom_webmercator,0,f.p*50) the_geom_webmercator, f.cartodb_id, q.city, q.country
	FROM f, ramirocartodb.overlapping_points q
	WHERE f.cartodb_id = q.cartodb_id
	</script>

	<script type="text/javascript">
	function main() {

	var map;

	// center and zoom level
	var options = {
	zoomControl: false,
	center: [40.42, -3.70],
	zoom: 14,
	};

	var map = new L.Map('map', options);

	L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
	}).addTo(map);

	// add layer
	urlLayer = "https://team.cartodb.com/u/ramirocartodb/api/v2/viz/af48f60a-e6a7-11e5-88f8-0e31c9be1b51/viz.json"
	cartodb.createLayer(map, urlLayer)
	.addTo(map)
	.on('done', function(layer) {

	// set sql query
	var query = $('#sql_template').text();
	var subLayerOptions = {
	sql: query
	}
	var sublayer = layer.getSubLayer(0);
	layer.getSubLayer(0).set(subLayerOptions);


	// tooltip definition with createLayer
	sublayer.setInteractivity('cartodb_id, city');
	var testTooltip = layer.leafletMap.viz.addOverlay({
	type: 'tooltip',
	layer: sublayer,
	template: '<div class="cartodb-tooltip-content-wrapper"><h3>Id:</h3><p>{{cartodb_id}}</p><h3>City:</h3><p>{{city}}</p></div>',
	width: 200,
	position: 'bottom\|right',
	fields: [{ id: 'cartodb_id', city:'city' }]
	});
	$('body').append(testTooltip.render().el);

	});

	}
	window.onload = main;
	</script>
	</body>
	</html>