Last active
August 29, 2015 14:13
-
-
Save juanignaciosl/902887c060856db3236b to your computer and use it in GitHub Desktop.
Creating sublayers
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> | |
| <!-- saved from url=(0093)http://cartodb.github.io/cartodb.js/examples/tutorials/tutorial-toggle_map_view-template.html --> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.11/themes/css/cartodb.css"> | |
| <script src="./tutorial-toggle_map_view-template_files/cartodb.js"></script><style></style> | |
| <style> | |
| html, body {width:100%; height:100%; padding: 0; margin: 0;} | |
| #map { width: 100%; height:100%; background: black;} | |
| #menu { position: absolute; top: 5px; right: 10px; width: 400px; height:60px; background: transparent; z-index:10;} | |
| #menu a { | |
| margin: 15px 10px 0 0; | |
| float: right; | |
| vertical-align: baseline; | |
| width: 70px; | |
| padding: 10px; | |
| text-align: center; | |
| font: bold 11px "Helvetica",Arial; | |
| line-height: normal; | |
| color: #555; | |
| border-radius: 4px; | |
| border: 1px solid #777777; | |
| background: #ffffff; | |
| text-decoration: none; | |
| cursor: pointer; | |
| } | |
| #menu a.selected, | |
| #menu a:hover { | |
| color: #F84F40; | |
| } | |
| </style> | |
| <script> | |
| var map; | |
| function init(){ | |
| // initiate leaflet map | |
| map = new L.Map('map', { | |
| center: [20,-20], | |
| zoom: 3 | |
| }) | |
| L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', { | |
| attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms & Feedback</a>' | |
| }).addTo(map); | |
| var layerUrl = 'http://documentation.cartodb.com/api/v2/viz/9af23dd8-ea10-11e2-b5ac-5404a6a683d5/viz.json'; | |
| var theLayer; | |
| var sublayers = []; | |
| cartodb.createLayer(map, layerUrl) | |
| .addTo(map) | |
| .on('done', function(layer) { | |
| theLayer = layer; | |
| // change the query for the first layer | |
| var subLayerOptions = { | |
| sql: "SELECT * FROM ne_10m_populated_places_simple", | |
| cartocss: "#ne_10m_populated_places_simple{marker-fill: #F84F40; marker-width: 8; marker-line-color: white; marker-line-width: 2; marker-clip: false; marker-allow-overlap: true;}" | |
| } | |
| var sublayer = layer.getSubLayer(0); | |
| sublayer.set(subLayerOptions); | |
| sublayers.push(sublayer); | |
| }).on('error', function() { | |
| //log the error | |
| }); | |
| //we define the queries that will be performed when we click on the buttons, by modifying the SQL of our layer | |
| var LayerActions = { | |
| all: function(){ | |
| sublayers[0].setSQL("SELECT * FROM ne_10m_populated_places_simple"); | |
| return true; | |
| }, | |
| capitals: function(){ | |
| sublayers[0].setSQL("SELECT * FROM ne_10m_populated_places_simple WHERE featurecla = 'Admin-0 capital'"); | |
| theLayer.createSubLayer({ | |
| sql: "SELECT * FROM ne_10m_populated_places_simple WHERE megacity = 1", | |
| cartocss: '#table_name {marker-fill: #F00000;}' | |
| }); | |
| return true; | |
| }, | |
| megacities: function() { | |
| sublayers[0].set({ | |
| sql: "SELECT * FROM ne_10m_populated_places_simple WHERE megacity = 1", | |
| //as it is said, you can also add some CartoCSS code to make your points look like you want for the different queries | |
| // cartocss: "#ne_10m_populated_places_simple{ marker-fill: black; }" | |
| }); | |
| return true; | |
| } | |
| } | |
| $('.button').click(function() { | |
| $('.button').removeClass('selected'); | |
| $(this).addClass('selected'); | |
| //this gets the id of the different buttons and calls to LayerActions which responds according to the selected id | |
| LayerActions[$(this).attr('id')](); | |
| }); | |
| } | |
| </script> | |
| </head> | |
| <body onload="init()" data-feedly-mini="yes" cz-shortcut-listen="true"> | |
| <div id="map" class="leaflet-container leaflet-fade-anim" tabindex="0" style="position: relative;"><div class="leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);"><div class="leaflet-tile-pane"><div class="leaflet-layer"><div class="leaflet-tile-container"></div><div class="leaflet-tile-container leaflet-zoom-animated"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/3.png" style="height: 256px; width: 256px; left: 578px; top: 467px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/4.png" style="height: 256px; width: 256px; left: 578px; top: 723px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/3(1).png" style="height: 256px; width: 256px; left: 834px; top: 467px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/2.png" style="height: 256px; width: 256px; left: 578px; top: 211px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/3(2).png" style="height: 256px; width: 256px; left: 322px; top: 467px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/2(1).png" style="height: 256px; width: 256px; left: 322px; top: 211px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/4(1).png" style="height: 256px; width: 256px; left: 322px; top: 723px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/2(2).png" style="height: 256px; width: 256px; left: 834px; top: 211px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/4(2).png" style="height: 256px; width: 256px; left: 834px; top: 723px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/3(3).png" style="height: 256px; width: 256px; left: 1090px; top: 467px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/5.png" style="height: 256px; width: 256px; left: 578px; top: 979px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/3(4).png" style="height: 256px; width: 256px; left: 66px; top: 467px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/1.png" style="height: 256px; width: 256px; left: 578px; top: -45px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/1(1).png" style="height: 256px; width: 256px; left: 322px; top: -45px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/2(3).png" style="height: 256px; width: 256px; left: 66px; top: 211px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/2(4).png" style="height: 256px; width: 256px; left: 1090px; top: 211px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/4(3).png" style="height: 256px; width: 256px; left: 1090px; top: 723px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/4(4).png" style="height: 256px; width: 256px; left: 66px; top: 723px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/5(1).png" style="height: 256px; width: 256px; left: 834px; top: 979px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/1(2).png" style="height: 256px; width: 256px; left: 834px; top: -45px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/5(2).png" style="height: 256px; width: 256px; left: 322px; top: 979px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/5(3).png" style="height: 256px; width: 256px; left: 66px; top: 979px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/1(3).png" style="height: 256px; width: 256px; left: 1090px; top: -45px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/5(4).png" style="height: 256px; width: 256px; left: 1090px; top: 979px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/1(4).png" style="height: 256px; width: 256px; left: 66px; top: -45px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/3(5).png" style="height: 256px; width: 256px; left: 1346px; top: 467px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/3(6).png" style="height: 256px; width: 256px; left: -190px; top: 467px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/4(5).png" style="height: 256px; width: 256px; left: -190px; top: 723px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/4(6).png" style="height: 256px; width: 256px; left: 1346px; top: 723px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/2(5).png" style="height: 256px; width: 256px; left: 1346px; top: 211px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/2(6).png" style="height: 256px; width: 256px; left: -190px; top: 211px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/5(5).png" style="height: 256px; width: 256px; left: -190px; top: 979px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/1(5).png" style="height: 256px; width: 256px; left: 1346px; top: -45px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/1(6).png" style="height: 256px; width: 256px; left: -190px; top: -45px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/5(6).png" style="height: 256px; width: 256px; left: 1346px; top: 979px;"></div></div></div><div class="leaflet-objects-pane"><div class="leaflet-shadow-pane"></div><div class="leaflet-overlay-pane"></div><div class="leaflet-marker-pane"></div><div class="leaflet-popup-pane"></div></div></div><div class="leaflet-control-container"><div class="leaflet-top leaflet-left"><div class="leaflet-control-zoom leaflet-bar leaflet-control"><a class="leaflet-control-zoom-in" href="http://cartodb.github.io/cartodb.js/examples/tutorials/tutorial-toggle_map_view-template.html#" title="Zoom in">+</a><a class="leaflet-control-zoom-out" href="http://cartodb.github.io/cartodb.js/examples/tutorials/tutorial-toggle_map_view-template.html#" title="Zoom out">-</a></div></div><div class="leaflet-top leaflet-right"></div><div class="leaflet-bottom leaflet-left"></div><div class="leaflet-bottom leaflet-right"><div class="leaflet-control-attribution leaflet-control"><a href="http://leafletjs.com/" title="A JS library for interactive maps">Leaflet</a> | Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms & Feedback</a></div></div></div></div> | |
| <div id="menu"> | |
| <a href="#megacities" id="megacities" class="button megacities">MEGACITIES</a> | |
| <a href="#capitals" id="capitals" class="button capitals">CAPITALS</a> | |
| <a href="#all" id="all" class="button all">ALL CITIES</a> | |
| </div> | |
| </body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment