| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="initial-scale=1.0" /> | |
| <meta charset="utf-8" /> | |
| <!-- Include Carto.js --> | |
| <script src="https://cartodb-libs.global.ssl.fastly.net/carto.js/v4.0.0-beta.4/carto.min.js"></script> | |
| <!-- Include Leaflet --> | |
| <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script> |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> | |
| <style> | |
| html, | |
| body, |
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",
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Named Maps test | CartoDB</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> |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset='utf-8' /> | |
| <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
| <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script> | |
| <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' /> | |
| <style> | |
| body { margin:0; padding:0; } | |
| #map { position:absolute; top:0; bottom:0; width:100%; } |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Named Maps test | CartoDB</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> |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Named Maps test | CartoDB</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> |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width"> | |
| <!-- Include Carto.js --> | |
| <script src="https://libs.cartocdn.com/carto.js/v4.1.8/carto.min.js"></script> | |
| <!-- Include Leaflet --> | |
| <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script> |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Hello World!</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!--add required stylesheets--> | |
| <!--make sure you add bootstrap 3.3.7 rather than 4.0.0--> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> | |
| <!--leaflet css--> |
| /* | |
| Main script that initialize app | |
| */ | |
| // Define global variables | |
| let container = d3.select('#scroll'); | |
| let graphic = container.select('.scroll__graphic'); | |
| let chart = graphic.select('.chart'); | |
| let text = container.select('.scroll__text'); | |
| let step = text.selectAll('.step'); |