Add a layer that shows a bubble map of education centers. The point is calculated using simply the centroid of the grouped features.
SELECT
int4(row_number() OVER (ORDER BY pro)) AS cartodb_id,
ST_Centroid(ST_Union(the_geom_webmercator)) AS the_geom_webmercator,
count(*) as count,
pro
FROM registro_centros_es
GROUP BY pro| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>Education centers in Spain</title> | |
| <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.14/themes/css/cartodb.css" /> | |
| <link rel="stylesheet" href="http://aratcliffe.github.io/Leaflet.tooltip/dist/leaflet.tooltip.css"> | |
| <style type="cartocss/text" id="cartocss-schools"> | |
| #registro_centros_es{ | |
| marker-fill-opacity: 0.8; | |
| marker-line-color: #FFF; | |
| marker-line-width: 2; | |
| marker-line-opacity: 1; | |
| marker-placement: point; | |
| marker-multi-policy: largest; | |
| marker-type: ellipse; | |
| marker-fill: #5CA2D1; | |
| marker-allow-overlap: true; | |
| marker-clip: false; | |
| } | |
| #registro_centros_es [ count <= 3292] {marker-width: 25.0; } | |
| #registro_centros_es [ count <= 1790] {marker-width: 23.3; } | |
| #registro_centros_es [ count <= 847] {marker-width: 21.7; } | |
| #registro_centros_es [ count <= 670] {marker-width: 20.0; } | |
| #registro_centros_es [ count <= 470] {marker-width: 18.3; } | |
| #registro_centros_es [ count <= 445] {marker-width: 16.7; } | |
| #registro_centros_es [ count <= 374] {marker-width: 15.0; } | |
| #registro_centros_es [ count <= 312] {marker-width: 13.3; } | |
| #registro_centros_es [ count <= 236] {marker-width: 11.7; } | |
| #registro_centros_es [ count <= 77] {marker-width: 10.0; } | |
| #registro_centros_es::labels[zoom>6] { | |
| text-name: [pro]; | |
| text-face-name: 'Lato Bold'; | |
| text-size: 11; | |
| text-label-position-tolerance: 10; | |
| text-fill: #fff; | |
| text-halo-fill: darken(#5CA2D1,20%); | |
| text-halo-radius: 1.5; | |
| text-dy: -10; | |
| text-allow-overlap: true; | |
| text-placement: point; | |
| text-placement-type: simple; | |
| } | |
| </style> | |
| <style> | |
| html, body, #map { | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.14/cartodb.js"></script> | |
| <script src="http://aratcliffe.github.io/Leaflet.tooltip/dist/leaflet.tooltip.js"></script> | |
| <script> | |
| $( document ).ready(function() { | |
| //Create the leaflet map | |
| var map = L.map('map', { | |
| zoomControl: true, | |
| center: [37.3876,-7.141], | |
| zoom: 5, | |
| minZoom: 5, | |
| maxZoom:8 | |
| }); | |
| //Add basemap | |
| L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner-background/{z}/{x}/{y}.png', { | |
| attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.' | |
| }).addTo(map); | |
| //Add the layer | |
| cartodb.createLayer(map, { | |
| user_name: 'vehrka', | |
| type: 'cartodb', | |
| sublayers: [ | |
| { | |
| sql: "SELECT int4(row_number() OVER (ORDER BY pro)) AS cartodb_id, ST_Centroid(ST_Union(the_geom_webmercator)) AS the_geom_webmercator, count(*) as count, pro FROM registro_centros_es GROUP BY pro", | |
| cartocss: $("#cartocss-schools").html(), | |
| interactivity: "pro, count" | |
| }] | |
| }).addTo(map).done(function(layer) { | |
| // enable events on the layer | |
| layer.setInteraction(true); | |
| // marker and tooltip objects | |
| var marker = L.marker(new L.LatLng(0,0)).addTo(map); | |
| marker.setOpacity(0); | |
| var tooltip = L.tooltip({target: marker, map: map, html: ""}); | |
| // move the marker and configure the tooltip | |
| layer.on('featureOver', function(e, latlng, pos, data, layerNumber) { | |
| $('body').css('cursor', 'pointer'); | |
| marker.setLatLng(new L.LatLng(latlng[0],latlng[1])); | |
| tooltip.setTarget(marker); | |
| tooltip.setHtml('<p>' + data.count + ' centros en ' + data.pro + '</p>'); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |