Vjylku

How should I handle players who ignore the session zero agreement?

Macro expansion inside href

Cat is tipping over bed-side lamps during the night

Is this ordinary workplace experiences for a job in Software Engineering?

Why don't key signatures indicate the tonic?

Is the child responsible for the Parent PLUS Loan when the parent has passed away?

Hilchos Shabbos English Sefer

Why did the villain in the first Men in Black movie care about Earth's Cockroaches?

Changing the laptop's CPU. Should I reinstall Linux?

What happens when I Twin Life Transference?

TikZ graph edges not drawn nicely

Is there a lava-breathing lizard creature (that could be worshipped by a cult) in 5e?

What is a DAG (Graph Theory)?

How much mayhem could I cause as a fish?

How can I play a serial killer in a party of good PCs?

Is there any risk in sharing info about technologies and products we use with a supplier?

How can the probability of a fumble decrease linearly with more dice?

What language shall they sing in?

Play Zip, Zap, Zop

Limits of a density function

Why avoid shared user accounts?

What makes papers publishable in top-tier journals?

What is the wife of a henpecked husband called?

Existence of Riemann surface, holomorphic maps

Toggling off/on heatlayer using geojson file

Identify with Layer Togglingtoggling a list of paths in LeafletLoad external geojson file into leaflet mapToggle geojson labels using control with leafletToggling Leaflet LegendsIssue in loading external geojson file into leaflet map?Setting geoJson as a varible using JavascriptToggling Leaflet map on click?Toggling leaflet controls ON and OFF?Import local GeoJSON file into Leaflet

0

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.

$.getJSON("data/Heatmap.geojson",function(data){

   var locations = data.features.map(function(eq) {

   // the heatmap plugin wants an array of each location

   var location = eq.geometry.coordinates.reverse();

   location.push(0.5);

   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'

       } 

   });

   //map.addLayer(heat);



   function toggleHeatlayer() {

     var checkBox = document.getElementById("command");

     if (checkBox==true) {

       map.addLayer(heat);

     } else {

       map.removeLayer(heat);

     }

   }



 });

And this is my HTML code:

<form><input id="command" type="checkbox" onClick= "toggleHeatlayer();" class="regular-checkbox"/><font color=white>Heatmap</font></form>

leaflet javascript heat-map

share|improve this question

edited 6 mins ago

mreyes0211

asked 11 mins ago

mreyes0211mreyes0211

113

add a comment | 

0

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.

$.getJSON("data/Heatmap.geojson",function(data){

   var locations = data.features.map(function(eq) {

   // the heatmap plugin wants an array of each location

   var location = eq.geometry.coordinates.reverse();

   location.push(0.5);

   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'

       } 

   });

   //map.addLayer(heat);



   function toggleHeatlayer() {

     var checkBox = document.getElementById("command");

     if (checkBox==true) {

       map.addLayer(heat);

     } else {

       map.removeLayer(heat);

     }

   }



 });

And this is my HTML code:

<form><input id="command" type="checkbox" onClick= "toggleHeatlayer();" class="regular-checkbox"/><font color=white>Heatmap</font></form>

leaflet javascript heat-map

share|improve this question

edited 6 mins ago

mreyes0211

asked 11 mins ago

mreyes0211mreyes0211

113

add a comment | 

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.

$.getJSON("data/Heatmap.geojson",function(data){

   var locations = data.features.map(function(eq) {

   // the heatmap plugin wants an array of each location

   var location = eq.geometry.coordinates.reverse();

   location.push(0.5);

   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'

       } 

   });

   //map.addLayer(heat);



   function toggleHeatlayer() {

     var checkBox = document.getElementById("command");

     if (checkBox==true) {

       map.addLayer(heat);

     } else {

       map.removeLayer(heat);

     }

   }



 });

And this is my HTML code:

<form><input id="command" type="checkbox" onClick= "toggleHeatlayer();" class="regular-checkbox"/><font color=white>Heatmap</font></form>

leaflet javascript heat-map

share|improve this question

edited 6 mins ago

mreyes0211

asked 11 mins ago

mreyes0211mreyes0211

113

$.getJSON("data/Heatmap.geojson",function(data){

   var locations = data.features.map(function(eq) {

   // the heatmap plugin wants an array of each location

   var location = eq.geometry.coordinates.reverse();

   location.push(0.5);

   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'

       } 

   });

   //map.addLayer(heat);



   function toggleHeatlayer() {

     var checkBox = document.getElementById("command");

     if (checkBox==true) {

       map.addLayer(heat);

     } else {

       map.removeLayer(heat);

     }

   }



 });

<form><input id="command" type="checkbox" onClick= "toggleHeatlayer();" class="regular-checkbox"/><font color=white>Heatmap</font></form>

share|improve this question

edited 6 mins ago

mreyes0211

asked 11 mins ago

mreyes0211mreyes0211

113

share|improve this question

edited 6 mins ago

mreyes0211

asked 11 mins ago

mreyes0211mreyes0211

113

asked 11 mins ago

mreyes0211mreyes0211

113

asked 11 mins ago

mreyes0211mreyes0211

113