oriolbx/README.md

## README.md

      
    Raw
  

              README.md
            
          
    The tile aggregation is being used to aggregate the point geometries depending on the zoom level.
In the Named Map definition, it has been defined the aggregation by:
"aggregation": {
            "placement": "point-sample",
            "columns": {
                "total": {
                    "aggregate_function": "sum",
                    "aggregated_column": "counter"
                }
            },
            "resolution": 32,
            "threshold": 1
            }
Where it is defined the resolution (size of the cell of the grid used to aggregate the points),
placement (position of the aggregated point within the grid), the name of the column that will have the result of the aggregation (total)
and the column and the operation used to make the aggregation.
In the SQL query, all fields of the dataset are selected, but also the "counter" field is selected by adding the value 1 to each row. This counter field that it is added on the SQL query, it is used to count the number of geometries when using the sum operation defined on the aggregation parameter of the map configuration JSON file.
Then in the CartoCSS , the total column (the column that contains the result of the aggregation) is being used to define
the size of the aggregated points using TurboCARTO ramp() function and the labels of the aggregated points.
In this section of the CARTO developer center can be found more information about the map aggregation.

  
## index.html
<!DOCTYPE html>
<html>

<head>
    <title>Named Map + tile aggregation = Cluster </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;
            position: relative;
        }


    </style>

    <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>

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


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

    <script>
        var map = L.map('map', { center: [36, 0], zoom: 2 });
        function main() {
            L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
                attribution: 'Stamen and CartoDB attribution'
            }).addTo(map);

            cartodb.createLayer(map, {
                user_name: 'oboix',
                type: 'namedmap',
                named_map: {
                    name: 'tile_agg_labels4',
                    layers: [{
                        layer_name: 'l'
                    }
                    ]
                }
            },
                { https: true })
                .addTo(map)
        }
        window.onload = main;

    </script>

</body>

</html>

## map_config.json
{
  "version": "0.0.1",
  "name": "tile_agg_labels4",
  "layergroup": {
    "version": "1.5.0",
    "layers": [
      {
        "type": "mapnik",
        "options": {
          "cartocss_version": "2.1.1",
          "cartocss": "Map { buffer-size: 256; } #layer { marker-fill: red; marker-width: ramp([total], 5,20 , quantiles);} #layer::labels {text-name: [total]; text-face-name: 'DejaVu Sans Book'; text-size: 10; text-fill: #FFFFFF; text-label-position-tolerance: 0; text-halo-radius: 1; text-halo-fill: #6F808D; text-allow-overlap: true; text-placement: point; text-placement-type: dummy; }",
          "sql": "select *, 1 as counter from stormevents_locations_2014",
          "aggregation": {
            "placement": "point-sample",
            "columns": {
                "total": {
                    "aggregate_function": "sum",
                    "aggregated_column": "counter"
                }
            },
            "resolution": 32,
            "threshold": 1
            }
        }
      }
    ]
  },
  "view": {
    "zoom": 3,
    "center": {
      "lng": 0,
      "lat": 0
    }
  }
}
	<!DOCTYPE html>
	<html>

	<head>
	<title>Named Map + tile aggregation = Cluster </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;
	position: relative;
	}


	</style>

	<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
	</head>

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


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

	<script>
	var map = L.map('map', { center: [36, 0], zoom: 2 });
	function main() {
	L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
	attribution: 'Stamen and CartoDB attribution'
	}).addTo(map);

	cartodb.createLayer(map, {
	user_name: 'oboix',
	type: 'namedmap',
	named_map: {
	name: 'tile_agg_labels4',
	layers: [{
	layer_name: 'l'
	}
	]
	}
	},
	{ https: true })
	.addTo(map)
	}
	window.onload = main;

	</script>

	</body>

	</html>
	{
	"version": "0.0.1",
	"name": "tile_agg_labels4",
	"layergroup": {
	"version": "1.5.0",
	"layers": [
	{
	"type": "mapnik",
	"options": {
	"cartocss_version": "2.1.1",
	"cartocss": "Map { buffer-size: 256; } #layer { marker-fill: red; marker-width: ramp([total], 5,20 , quantiles);} #layer::labels {text-name: [total]; text-face-name: 'DejaVu Sans Book'; text-size: 10; text-fill: #FFFFFF; text-label-position-tolerance: 0; text-halo-radius: 1; text-halo-fill: #6F808D; text-allow-overlap: true; text-placement: point; text-placement-type: dummy; }",
	"sql": "select *, 1 as counter from stormevents_locations_2014",
	"aggregation": {
	"placement": "point-sample",
	"columns": {
	"total": {
	"aggregate_function": "sum",
	"aggregated_column": "counter"
	}
	},
	"resolution": 32,
	"threshold": 1
	}
	}
	}
	]
	},
	"view": {
	"zoom": 3,
	"center": {
	"lng": 0,
	"lat": 0
	}
	}
	}