On this example we add and remove a layer from a Google Maps Instance.
The thing is you need to explicitely disable the interaction and then execute the off() method in order to completely detach the layer from the map object, otherwise events will still be triggered and you'll have more than one infowindows and several log lines on the console.
via @jsanz
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>GMs and IW | CartoDB.js</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> | |
| html, body, #map { | |
| height: 100%; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .controls{ | |
| position: absolute; | |
| top:20px; | |
| right: 20px; | |
| background: white; | |
| z-index: 100; | |
| padding: 20px; | |
| width: 70px; | |
| text-align: center; | |
| } | |
| .controls span{ | |
| color: blue; | |
| cursor: pointer; | |
| } | |
| </style> | |
| | |
| <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" /> | |
| </head> | |
| <body> | |
| <div class="controls"> | |
| <span class="toggle">Add</span> | |
| </div> | |
| <div id="map"> | |
| </div> | |
| | |
| <!-- include google maps library + visualization--> | |
| <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=visualization"></script> | |
| | |
| <!-- include cartodb.js library --> | |
| <script src="http://libs.cartocdn.com.s3.amazonaws.com/cartodb.js/v3/3.15/cartodb.uncompressed.js"></script> | |
| | |
| <script> | |
| var map, sublayer, isRemoveLayer=false; | |
| function main() { | |
| // Map center | |
| var myOptions = { | |
| zoom: 3, | |
| center: new google.maps.LatLng(40, 0), | |
| disableDefaultUI: true, | |
| mapTypeId: google.maps.MapTypeId.SATELLITE | |
| } | |
| // Render basemap | |
| map = new google.maps.Map(document.getElementById("map"), myOptions); | |
| var urlLayer = "https://team.cartodb.com/u/ramirocartodb/api/v2/viz/d3b411a0-e521-11e5-bf3f-0e31c9be1b51/viz.json"; | |
| /* Add a layer to the map */ | |
| var addLayer = function(){ | |
| console.log("Add Layer"); | |
| cartodb.createLayer(map, urlLayer) | |
| .addTo(map) | |
| .done(function(layer){ | |
| sublayer = layer.getSubLayer(0); | |
| // Attach a simple log | |
| layer.getSubLayer(0).on('featureClick',function(){ | |
| console.log("Click at " + Math.random()); | |
| }); | |
| $('.toggle').html("Remove"); | |
| }); | |
| }; | |
| /* Remove a layer from the map */ | |
| var removeLayer = function(){ | |
| console.log("Remove Layer"); | |
| map.overlayMapTypes.clear(); | |
| /* | |
| If you don't add these two lines you get multiple | |
| instances of the layer receiving events | |
| */ | |
| sublayer.setInteraction(false); | |
| sublayer.off(); | |
| sublayer = null; // this is optional | |
| $('.toggle').html("Add"); | |
| } | |
| $('.toggle').click(function(){ | |
| if (isRemoveLayer){ | |
| removeLayer(); | |
| } else { | |
| addLayer(); | |
| } | |
| isRemoveLayer = ! isRemoveLayer; | |
| }); | |
| } | |
| window.onload = main; | |
| </script> | |
| </body> | |
| </html> |
