title: Swapping between layers in leaflet heat map
body: <p>I want to swap between layers in leaflet dynamically. So i think hide layers. Here is my code</p>
  
  <pre><code>    &lt;div id="map"&gt;&lt;/div&gt; 
      &lt;div&gt;
          &lt;button  onclick='fun1()'&gt;yellowhide&lt;/button&gt; 
          &lt;button  onclick='fun2()'&gt;redhide&lt;/button&gt; 
      &lt;/div&gt;   
  
      &lt;script&gt; 
      //same lat long means overlapping
      addressPoints1= [     [-37.8210922667, 175.2209316333, "2"],     [-37.8210819833, 175.2213903167, "3"],     [-37.8210881833, 175.2215004833, "3"],     [-37.8211946833, 175.2213655333, "1"]]      addressPoints2= [     [-37.8210922667, 175.2209316333, "2"],     [-37.8210819833, 175.2213903167, "3"],     [-37.8210881833, 175.2215004833, "3"],     [-37.8211946833, 175.2213655333, "1"]]       
      var tiles=L.tileLayer('http://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {      attribution: '',        id: 'examples.map-20v6611k'     })   var map = L.map('map', {       center: [-37.87, 175.475],      zoom: 16,       layers: [tiles]     });     var heat1 = L.heatLayer(addressPoints1,{        gradient: {1:"red"}         }).addTo(map); var heat2 = L.heatLayer(addressPoints2,{     gradient: {1:"yellow"}  }).addTo(map);      
  
  
  
      function fun1(){ console.log("hide yellow layer");
        $('.heat2').hide(); } function fun2(){ console.log("hide red layer");
        $('.heat1').hide();   
      } 
  </code></pre>
  
  <p>but it's not working.</p>