On this map we create two CartodB layers, one of them is built with two sublayers. In order to control when they are added to the map, we save the promises objects and use the jQuery.when function to execute the code to add the layers to the map when both promises are executed.
Last active
March 27, 2017 16:13
-
-
Save jsanz/94e802930460ba850f8f to your computer and use it in GitHub Desktop.
CartoDB.js examples: several createLayer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title></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="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" /> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script> | |
| <script> | |
| $( document ).ready(function() { | |
| //Create the leaflet map | |
| var map = L.map('map', { | |
| zoomControl: true, | |
| center: [39.583,2.670], | |
| zoom: 12 | |
| }); | |
| var basemap = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{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); | |
| // Promise for the first layer | |
| var nucleos = cartodb.createLayer(map, {user_name: 'ignspaintest', | |
| type: 'cartodb', | |
| sublayers: [ | |
| { | |
| sql: 'SELECT * FROM nucleos_pobl_btn100', | |
| cartocss: '#layer{polygon-fill: #D6301D;polygon-opacity: 0.7;}' | |
| } | |
| ] | |
| }); | |
| // Promise for the second layer | |
| var overlay = cartodb.createLayer(map, {user_name: 'ignspaintest', | |
| type: 'cartodb', | |
| sublayers: [ | |
| { | |
| sql: 'SELECT * FROM rios_btn25', | |
| cartocss: '#rios_btn25{line-color: #2E5387;line-width: 2;line-opacity: 0.7;}' | |
| }, | |
| { | |
| sql: 'SELECT * FROM aloj_ocio_btn100', | |
| cartocss: '#aloj_ocio_btn100{marker-fill-opacity: 0.9; marker-line-color: #FFF; marker-line-width: 1.5; marker-width: 10; marker-fill: #3B007F; }' | |
| } | |
| ] | |
| }); | |
| // When both are done, add them to the map; | |
| $.when(nucleos,overlay).done(function(lnucleos,loverlay){ | |
| lnucleos.addTo(map); | |
| loverlay.addTo(map); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment