I created a heatlayer using a geojson file. However, I am having trouble with toggling it on and off with a checkbox. Since the toggleHeatlayer function is within another function, it becomes undefined when I run it (my html code can't read it). If I place it outside of getjson function then it can't read the variable "heat" because that's defined inside the getjson function.

   var locations = data.features.map(function(eq) {
   // the heatmap plugin wants an array of each location
   var location = eq.geometry.coordinates.reverse();
   return location; // e.g. [50.5, 30.5, 0.2], // lat, lng, intensity
   var heat = L.heatLayer(locations, { 
       minOpacity: 0.3,
       radius: 20,
       gradient: {
           0.1: 'purple',
           0.2: 'cyan',
           0.3: '#2b83ba',
           0.4: 'green',
           0.6: 'yellow',
           0.8: 'orange',
           0.9: '#d7191c',
           1: 'red'

   function toggleHeatlayer() {
     var checkBox = document.getElementById("command");
     if (checkBox==true) {
     } else {


And this is my HTML code:

<form><input id="command" type="checkbox" onClick= "toggleHeatlayer();" class="regular-checkbox"/><font color=white>Heatmap</font></form>
  • Use checkBox.value instead. – IvanSanchez Feb 27 at 12:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.