How to use leaflet.js heat with pane? - leaflet

Question

I want to show/hide Leaflet.heat(https://github.com/Leaflet/Leaflet.heat) layer, and new pane should somehow do this.
But is there any support for panes on Leaflet.heat?
This code does not work.
var heatPane = map.createPane("heat");
var heat = L.heatLayer([], {
radius: 10,
maxZoom: 6,
pane: "heat"
}).addTo(map);
heat.addLatLng([44,7])
heat.addLatLng([44,7])
UPD: I can use heat._heat._canvas.style.display = "none" to hide heat layer, but I don't think it is a good practice.
Thanks.

Answer 1

Is seems current release version of leaflet-heat.js does not support using pane option. You can use beta/development version if you want and you can achieve your requirements by just setting style on the pane.
Check out the code below:
document.onreadystatechange = function(e){
if(document.readyState != 'complete') return;
var map = L.map('map').setView([44, 7], 12);
var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {}).addTo(map);
var heatPane = map.createPane("heat");
var heat = L.heatLayer([[44, 7], [44, 7], [44, 7], [44, 7]], {
radius: 10,
maxZoom: 6,
pane: "heat"
}).addTo(map);
document.getElementById("btnShow").onclick = function(){
heatPane.style.display = 'block';
};
document.getElementById("btnHide").onclick = function(){
heatPane.style.display = 'none';
};
};
#map {
width: 400px;
height: 400px;
}
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.3.4/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v1.3.4/leaflet.js"></script>
<!-- <script src="http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"></script> -->
<script src="http://leaflet.github.io/Leaflet.heat/src/HeatLayer.js"></script>
<script src="http://mourner.github.io/simpleheat/simpleheat.js"></script>
<div>
<button id="btnHide">Hide</button>
<button id="btnShow">Show</button>
</div>
<div id="map"></div>
P.S: You can uncomment the code and use release version of the script but it will not work because current release version of leaflet-heat draws canvas on default map layer.