I need to control the opacity of more than one instance of the HeatMap Layers created by leaflet.js , heatmap.
(source code https://github.com/Leaflet/Leaflet.heat/blob/gh-pages/src/HeatLayer.js)
I found one answer here.
It only works if I want the entire heatMap layer to change; but now the problem is I have more than one heatLayer and want to control opacity on each individual one.
I have tried using _leaflet_id because the canvas created has no id and I do not know how to assign one with this plugin.
However, when I try using _leaflet_id I get a uncaught exception "number is not a function"
The number for opacity is being set by a slider here:
/*slide controls for opacity - currently on canvas object*/
if( testID == 'oSlider' ) {
var oHandle = ui.values[0]
var opacityNum = (oHandle/100)
if( comboBox === 'A' ) {
( aHeat._leaflet_id ).css({ "opacity":opacityNum });
}
else if( comboBox === 'B' ) {
( bHeat._leaflet_id ).css({ "opacity":opacityNum });
}
};
Any ideas on how I might control the opacity on individual heatmap canvases?
UPDATE:
Here is my attempt to traverse the DOM and set the multiple canvas objects to later change the opacity on them. So far this only works, when the first canvas is set. The second appears to re-write all of them all over again.
function addDataSet() {
var dataSourceCmb = document.getElementById("dataSourceCmb").value;
/* A-canvas Add --- Start */
if(dataSourceCmb === 'A') {
if(typeof(aHeat)==='undefined' || aHeat.undefined===true)
{
aHeat = L.heatLayer(aPoints,{maxZoom:13,radius:10,blur:5,gradient: {0.2: "#FF00FF",.4: "#00FFFF" , 0.6: "#00FF00", 0.8: "#FFFF00", 1.0: "#FF0000"} })
.addTo(map), draw= true;
$(document.getElementsByTagName('canvas')).each(function(i, obj){
console.log("A Canvas Before Add: " + $(document.getElementsByTagName('canvas')).attr('id'));
if ($(document.getElementsByTagName('canvas')).attr('id') != true) {
$(this).attr('id','aCanvas');
console.log("A Canvas After Add: " + $(document.getElementsByTagName('canvas')).attr('id'));
}
})
}
}
/* A-canvas Add --- End */
/* B-canvas Add --- START */
else if(dataSourceCmb === 'B') {
if(typeof(bHeat)==='undefined' || bHeat.undefined===true) {
bHeat = L.heatLayer(bPoints,{maxZoom:13,radius:10,blur:5,gradient: {0.2: "#FF00FF",.4: "#00FFFF" , 0.6: "#00FF00", 0.8: "#FFFF00", 1.0: "#FF0000"} })
.addTo(map), draw= true;
$(document.getElementsByTagName('canvas')).each(function(i, obj){
console.log("B Canvas Before Add: " + $(document.getElementsByTagName('canvas')).attr('id'));
if ($(document.getElementsByTagName('canvas')).attr('id') != true) {
$(this).attr('id','bCanvas');
console.log("B Canvas After Add: " + $(document.getElementsByTagName('canvas')).attr('id'));
/* console.log($(document.getElementsByTagName('canvas')).attr('id'));*/
}
})
}
}
/* B-canvas Add --- End */
/* C-canvas Add --- START */
else if(dataSourceCmb === 'C') {
if(typeof(cHeat)==='undefined' || cHeat.undefined===true ){
cHeat = L.heatLayer(cPoints,{maxZoom:13,radius:10,blur:5,gradient: {0.2: "#FF00FF",.4: "#00FFFF" , 0.6: "#00FF00", 0.8: "#FFFF00", 1.0: "#FF0000"} })
.addTo(map), draw= true;
$(document.getElementsByTagName('canvas')).each(function(i, obj){
console.log("C Canvas Before Add: " + $(document.getElementsByTagName('canvas')).attr('id'));
if ($(document.getElementsByTagName('canvas')).attr('id') != true) {
$(this).attr('id','cCanvas');
console.log("C Canvas After Add: " + $(document.getElementsByTagName('canvas')).attr('id'));
/* console.log($(document.getElementsByTagName('canvas')).attr('id'));*/
}
})
}
}
/* C-canvas Add --- End */
$(document.getElementsByTagName('canvas')).each(function(i, obj){
if ($(document.getElementsByTagName('canvas')).attr('id') != true) {
console.log("no canvas id set for canvas: "+i);
}
else {
console.log($(document.getElementsByTagName('canvas')).attr('id')+" canvas no: "+i);
}
})
console.log("aCanvas width: " + document.getElementById("aCanvas").width)
console.log("bCanvas width: " + document.getElementById("bCanvas").width)
console.log("cCanvas width: " + document.getElementById("cCanvas").width)
}
When aCanvas is set it fails the $(document.getElementsByTagName('canvas')).attr('id') != true test, but I get a width back and the opacity slider I made controls the opacity. However, when bCanvas is set; it re-names aCanvas, and fails the id test on both canvases, and gives a width for bCanvas. Then the opacity slider complains that aCanvas is null and does not set any values.
Not sure what i'm doing wrong here.
Here is the slider control btw:
<script>
/* adjust intesity, radius, blur based on zoom-level; it should be more intense at higher zoom levels */
/* maxZoom: the lower the number the more intense (gives the zoom level to be the maximum intensity */
/* radius: the radius of each point; the more they overlap the more intense the color */
/* blur: the amount of blurring to each point to allow for more overlap; the larger the more blur */
$(document).ready(function() {
$( ".slider-vertical" ).each(function(){
$this = $(this);
$(".slider",$this).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 100,
values: [60],
slide: function( event, ui ) {
$(this).parent().find(".amount").html( ui.values[0] );
var testID = $(this).attr('id')
var dataSourceCmb = document.getElementById("dataSourceCmb").value
/*slide controls for radius (range 0.55-50.55) */
/*slide controls for maxZoom/aka Intensity (range 4-24) */
/*slide controls for blur*/
/*slide controls for opacity - currently on canvas object*/
if( testID == 'oSlider' ) {
var oHandle = ui.values[0]
var opacityNum = (oHandle/100)
if( dataSourceCmb === 'A' ){
document.getElementById("aCanvas").style.opacity=opacityNum;
console.log(document.getElementById("aCanvas").style.opacity);
}
else if( dataSourceCmb === 'B' ){
document.getElementById("bCanvas").style.opacity=opacityNum;
}
else if( dataSourceCmb === 'C' ){
document.getElementById("cCanvas").style.opacity=opacityNum;
}
};
/* slide controls for hue */
}
});
$( "#amount" ).html( $( ".slider" ).slider( "values",0 ) );
});
});
</script>
Here are the html controls btw:
<div id="sliderControls" class="leaflet-control">
<div id="rParent" class="slider-vertical">
<b style="margin-left:100px">Radius:</b>
<span id="radius" class="amount">0</span>
<div id="rSlider" class="slider"></div>
</div>
<div id="iParent" class="slider-vertical">
<b style="margin-left:100px">Intensity:</b>
<span id="intensity" class="amount">0</span>
<div id="iSlider" class="slider"></div>
</div>
<div id="bParent" class="slider-vertical">
<b style="margin-left:100px">Blur:</b>
<span id="blur" class="amount">0</span>
<div id="bSlider" class="slider"></div>
</div>
<div id="oParent" class="slider-vertical">
<b style="margin-left:100px">Opacity:</b>
<span id="opacity" class="amount">0</span>
<div id="oSlider" class="slider"></div>
</div>
<div id="hParent" class="slider-vertical">
<b style="margin-left:100px">Hue:</b>
<span id="hue" class="amount">0</span>
<div id="hSlider" class="slider"></div>
</div>
</div>
