Created
September 26, 2017 11:15
-
-
Save ramiroaznar/efdae38bdad8cb734860a866a9f9953a to your computer and use it in GitHub Desktop.
CARTO.js | close sublayer popups when opening other different sublayer popup
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> | |
| <title>CARTO.js | close popup when opening another</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="https://cartodb.com/assets/favicon.ico" /> | |
| <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" /> | |
| <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script> | |
| <style> | |
| html, body, #map { | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| button { | |
| top: 20px; | |
| bottom: auto; | |
| position: absolute; | |
| z-index: 100; | |
| left: 20px; | |
| background-color: white; | |
| width: 100px; | |
| height: 40px; | |
| border-radius: 5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- map div --> | |
| <div id="map"></div> | |
| <!-- infowindow div --> | |
| <script type="infowindow/html" id="iw_template_world"> | |
| <div class="cartodb-popup v2" id="world"> | |
| <a href="#close" class="cartodb-popup-close-button close">x</a> | |
| <div class="cartodb-popup-content-wrapper"> | |
| <div class="cartodb-popup-content"> | |
| <h3>{{name}}</h3> | |
| <p>{{pop2005}} inhabitants</p> | |
| </div> | |
| <div class="cartodb-popup-tip-container"></div> | |
| </div> | |
| </script> | |
| <script type="infowindow/html" id="iw_template_cities"> | |
| <div class="cartodb-popup v2" id="cities"> | |
| <a href="#close" class="cartodb-popup-close-button close">x</a> | |
| <div class="cartodb-popup-content-wrapper"> | |
| <div class="cartodb-popup-content"> | |
| <h3>{{name}}</h3> | |
| <h4>{{adm0name}}</h4> | |
| <p>{{pop_max}} inhabitants</p> | |
| </div> | |
| <div class="cartodb-popup-tip-container"></div> | |
| </div> | |
| </script> | |
| <script type="text/cartocss" id="styleWorld"> | |
| #layer { | |
| polygon-fill: ramp([pop_norm], colorbrewer(Greys), jenks); | |
| polygon-opacity: ramp([pop_norm], range(0.2,0.7), jenks); | |
| line-color: ramp([pop_norm], colorbrewer(Greys), jenks); | |
| line-opacity: ramp([pop_norm], range(0.4,0.9), jenks); | |
| } | |
| </script> | |
| <script type="text/sql" id="queryWorld"> | |
| SELECT | |
| * | |
| FROM | |
| world_borders | |
| </script> | |
| <script type="text/cartocss" id="styleCities"> | |
| #layer { | |
| marker-width: 10; | |
| marker-fill: ramp([featurecla], (#5F4690, #1D6996, #38A6A5, #0F8554, #73AF48, #EDAD08, #E17C05, #CC503E, #94346E), ("Populated place", "Admin-1 capital", "Admin-0 capital", "Admin-1 region capital", "Scientific station", "Admin-0 region capital", "Admin-0 capital alt", "Historic place", "Meteorological Station"), "="); | |
| marker-fill-opacity: 0.7; | |
| marker-allow-overlap: true; | |
| marker-line-width: 0; | |
| } | |
| </script> | |
| <script type="text/sql" id="queryCities"> | |
| SELECT | |
| * | |
| FROM | |
| populated_places WHERE pop_max > 700000 | |
| </script> | |
| <script> | |
| function main() { | |
| // get styles & query | |
| var styleCities = $("#styleCities").text(), | |
| queryCities = $("#queryCities").text(), | |
| styleWorld = $("#styleWorld").text(), | |
| queryWorld = $("#queryWorld").text(), | |
| // declare map variable | |
| map = L.map('map', { | |
| zoomControl: false, | |
| center: [41, -3], | |
| zoom: 3 | |
| }); | |
| // add 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">CARTO</a>'}).addTo(map); | |
| // add cartodb layer | |
| cartodb.createLayer(map, { | |
| user_name: 'ramirocartodb', | |
| type: 'cartodb', | |
| sublayers: [ | |
| { | |
| sql: queryWorld, | |
| cartocss: styleWorld, | |
| }, | |
| { | |
| sql: queryCities, | |
| cartocss: styleCities, | |
| } | |
| ] | |
| }, {https:true}).addTo(map) | |
| .done(function(layer){ | |
| console.log(layer); | |
| // declare sublayer variable | |
| var worldLayer = layer.getSubLayer(0), | |
| cityLayer = layer.getSubLayer(1); | |
| console.log(worldLayer); | |
| console.log(cityLayer); | |
| // set layer interactivity | |
| worldLayer.setInteractivity("name, pop2005"); | |
| worldLayer.setInteraction(true); | |
| cityLayer.setInteractivity("name, adm0name, pop_max"); | |
| cityLayer.setInteraction(true); | |
| // add popups | |
| cdb.vis.Vis.addInfowindow( | |
| map, worldLayer, ["name", "pop2005"], | |
| { | |
| infowindowTemplate: $('#iw_template_world').html() | |
| }); | |
| cdb.vis.Vis.addInfowindow( | |
| map, cityLayer, ["name", "adm0name", "pop_max"], | |
| { | |
| infowindowTemplate: $('#iw_template_cities').html() | |
| }); | |
| worldLayer.on('featureClick',function(e,latlng,pos,data){ | |
| $('.cartodb-infowindow #cities' ).css('visibility', 'hidden'); | |
| return false; | |
| }); | |
| cityLayer.on('featureClick',function(e,latlng,pos,data){ | |
| $('.cartodb-infowindow #world' ).css('visibility', 'hidden'); | |
| return false; | |
| }); | |
| }); | |
| } | |
| window.onload = main; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment