Skip to content

Instantly share code, notes, and snippets.

@jsanz

jsanz/README.md

Last active November 16, 2017 16:41
Show Gist options
  • Save jsanz/39d5d9f39ae7bf82ec32 to your computer and use it in GitHub Desktop.
Save jsanz/39d5d9f39ae7bf82ec32 to your computer and use it in GitHub Desktop.
Download ZIP
CartoDB.js: create a map from a custom viz.json
Raw
README.md

On this example I pass a vizjson object that defines a leaflet map with a layer, legend, tooltip and infowindows.

Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CartoDB.js | map from custom viz.json</title>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.14/themes/css/cartodb.css" />
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.14/cartodb.js"></script>
</head>
<body>
<div id="map"></div>
<script>
$( document ).ready(function() {
var viz = {
"map_provider": "leaflet",
"bounds": [
[
35.94243575255426,
-16.2158203125
],
[
44.41808794374849,
11.7333984375
]
],
"center": "[40.3130432088809, -2.2412109375]",
"zoom": 6,
"layers": [
{
"options": {
"order": 0,
"visible": true,
"name": "Toner Background",
"urlTemplate": "https://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>.",
},
"type": "tiled"
},
{
"type": "layergroup",
"options": {
"user_name": "vehrka",
"layer_definition": {
"version": "1.0.1",
"layers": [
{
"children": [],
"type": "CartoDB",
"infowindow": {
"fields": [
{
"name": "count",
"title": true,
"position": 1
}
],
"template_name": "infowindow_dark",
"template": "<div class=\"cartodb-popup dark v2\">\n <a href=\"#close\" class=\"cartodb-popup-close-button close\">x</a>\n <div class=\"cartodb-popup-content-wrapper\">\n <div class=\"cartodb-popup-content\">\n {{#content.fields}}\n {{#title}}<h4>{{title}}</h4>{{/title}}\n {{#value}}\n <p {{#type}}class=\"{{ type }}\"{{/type}}>{{{ value }}}</p>\n {{/value}}\n {{^value}}\n <p class=\"empty\">null</p>\n {{/value}}\n {{/content.fields}}\n </div>\n </div>\n <div class=\"cartodb-popup-tip-container\"></div>\n</div>\n",
"alternative_names": {
"pro": "Provincia",
"count": "Centros"
},
"width": 226,
"maxHeight": 180
},
"tooltip": {
"fields": [
{
"name": "pro",
"title": true,
"position": 0
},
{
"name": "count",
"title": true,
"position": 1
}
],
"template_name": "tooltip_dark",
"template": "<div class=\"cartodb-tooltip-content-wrapper dark\">\n <div class=\"cartodb-tooltip-content\">\n {{#fields}}\n {{#title}}\n <h4>{{title}}</h4>\n {{/title}}\n <p>{{{ value }}}</p>\n {{/fields}}\n </div>\n</div>",
"alternative_names": {
"pro": "Provincia",
"count": "Centros"
},
"maxHeight": 180
},
"legend": {
"type": "bubble",
"show_title": false,
"title": "",
"template": "<div class='cartodb-legend bubble'>\t\n <h4>Education center count</h4>\n\n<ul>\n\t\n\t<li>\n\n\t77\n\t\n\t</li>\n\t\n\t<li class=\"graph\" style=\"background: rgb(92, 162, 209);\">\n\n\t\t<div class=\"bubbles\"></div>\n\t\n\t</li>\n\t\n\t<li>\n\n\t3292\n\t\n\t</li>\n\n</ul>\n\n</div>",
"visible": true,
"items": [
{
"name": "Left label",
"visible": true,
"value": 77,
"legend_type": "bubble",
"type": "text",
"sync": false
},
{
"name": "Right Label",
"visible": true,
"value": 3292,
"legend_type": "bubble",
"type": "text",
"sync": false
},
{
"name": "Color",
"visible": true,
"value": "#5CA2D1",
"type": "color"
}
]
},
"order": 1,
"visible": true,
"options": {
"sql": "SELECT \nint4(row_number() OVER (ORDER BY pro)) AS cartodb_id,\nST_Centroid(ST_Union(the_geom_webmercator)) AS the_geom_webmercator,\ncount(*) as count,\npro\nFROM registro_centros_es\nGROUP BY pro",
"layer_name": "registro_centros_es",
"cartocss": "/** bubble visualization */\n\n#registro_centros_es{\n marker-fill-opacity: 0.8;\n marker-line-color: #FFF;\n marker-line-width: 2;\n marker-line-opacity: 1;\n marker-placement: point;\n marker-multi-policy: largest;\n marker-type: ellipse;\n marker-fill: #5CA2D1;\n marker-allow-overlap: true;\n marker-clip: false;\n}\n#registro_centros_es [ count <= 3292] {\n marker-width: 25.0;\n}\n#registro_centros_es [ count <= 1790] {\n marker-width: 23.3;\n}\n#registro_centros_es [ count <= 847] {\n marker-width: 21.7;\n}\n#registro_centros_es [ count <= 670] {\n marker-width: 20.0;\n}\n#registro_centros_es [ count <= 470] {\n marker-width: 18.3;\n}\n#registro_centros_es [ count <= 445] {\n marker-width: 16.7;\n}\n#registro_centros_es [ count <= 374] {\n marker-width: 15.0;\n}\n#registro_centros_es [ count <= 312] {\n marker-width: 13.3;\n}\n#registro_centros_es [ count <= 236] {\n marker-width: 11.7;\n}\n#registro_centros_es [ count <= 77] {\n marker-width: 10.0;\n}\n\n\n#registro_centros_es::labels {\n text-name: [pro];\n text-face-name: 'Lato Bold';\n text-size: 13;\n text-label-position-tolerance: 10;\n text-fill: #000;\n text-halo-fill: #FFF;\n text-halo-radius: 1.5;\n text-dy: -15;\n text-allow-overlap: true;\n text-placement: point;\n text-placement-type: simple;\n}",
"cartocss_version": "2.1.1",
"interactivity": "cartodb_id,pro,count"
}
}
]
}
}
}
],
};
cartodb.createVis('map',viz);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment