title: jQuery button not calling and removing GeoJson Layer on Leaflet map
body: <p>I am trying to create a button using jquery that will turn a geoJSON layer in Leaflet on and off. The tileLayer pops up in my html page and my geoJSON file shows on my map. The button I created shows just above the map I created as well The bind pop up function works too.</p>
  
  <p>However whenever I click the button, the console in google chrome tells me this (this is what happens when I clicked my button three times, if I continute it keeps telling t.onRemove is not a function:</p>
  
  <pre><code>    leaflet.js:6 Uncaught TypeError: Cannot read property 'call' of undefined
          at e.whenReady (leaflet.js:6)
          at e.addLayer (leaflet.js:6)
          at HTMLDivElement.&lt;anonymous&gt; (Leaflet.html:62)
          at HTMLDivElement.dispatch (jquery.min.js:3)
          at HTMLDivElement.q.handle (jquery.min.js:3)
  
      leaflet.js:6 Uncaught TypeError: t.onRemove is not a function
          at e.removeLayer (leaflet.js:6)
          at HTMLDivElement.&lt;anonymous&gt; (Leaflet.html:60)
          at HTMLDivElement.dispatch (jquery.min.js:3)
          at HTMLDivElement.q.handle (jquery.min.js:3)
  
     leaflet.js:6 Uncaught TypeError: t.onRemove is not a function
          at e.removeLayer (leaflet.js:6)
          at HTMLDivElement.&lt;anonymous&gt; (Leaflet.html:60)
          at HTMLDivElement.dispatch (jquery.min.js:3)
          at HTMLDivElement.q.handle (jquery.min.js:3)
  </code></pre>
  
  <p>I have all my source jquery and javascript imported.
  I followed this tutorial and have the code written exactly as he does:
  <a href="https://www.youtube.com/watch?v=Qhj_vIKrASc" rel="nofollow noreferrer">https://www.youtube.com/watch?v=Qhj_vIKrASc</a></p>
  
  <p>He has a line of code that I don't and I think this may be the problem. He puts it just after my button div I created called layerButt.</p>
  
  <pre><code>&lt;button id="blank&gt;&lt;a href="index_blank.html"&gt;
  </code></pre>
  
  <p>Here is a copy of my code. I am not that experienced of a coder and have been trying to get this to work for 4 days now. I greatly appreciate your help.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Leaflet Loading GeoJSON&lt;/title&gt;
  
  &lt;meta charset="UTF-8"&gt;
  &lt;link rel="stylesheet" href="css/layerbutton.css" /&gt; 
  &lt;link rel="stylesheet" href="leaflet/leaflet.css" /&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Roboto+Slab'      rel='stylesheet'
  text='text/css'&gt;
  &lt;link rel="stylesheet"    href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" /&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;My map&lt;/h1&gt;
  &lt;div id='mapdiv' style='height:500px;'&gt;here lies a map.&lt;/div&gt;
  &lt;div id="tileBar"&gt; 
  &lt;div class="layerButt" id="pointButt"&gt;&lt;h3&gt; TTC On/Off&lt;/h3&gt;&lt;/div&gt; 
  &lt;/div&gt;
  &lt;script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"&gt;&lt;/script&gt;
  &lt;script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/ttc.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  // &lt;script&gt; powers up script
      var mymap = L.map('mapdiv').setView([43,-79],8);
  
      L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v10/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic3BhdGlhbGFydHMiLCJhIjoiY2l3c2NlcnJkMTR1YTJ5dGJzYTJuZ3oyMSJ9.qIr2uFfZbZzrDHaJBccYeQ', {
      attribution: 'Map data &amp;copy; &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contributors, &lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, Imagery © &lt;a href="http://mapbox.com"&gt;Mapbox&lt;/a&gt;',
      minZoom: 6,
      maxZoom: 16,
  //choose project id/dataset from map box studio
      id: 'n/a,(and chose not to add this, the tile layer opens )
  //accessToken id from map box account
      accessToken: n/a (I chose not to add this, the tile layer does open)
  
  }).addTo(mymap); 
  
  function attach (feature,layer) {
      layer.bindPopup("&lt;h1 class='infoHeader'&gt; Toronto TTC Subway Name&lt;/h1&gt;&lt;p     class='infoHeader'&gt;" + feature.properties.SBWAY_NAME +"&lt;/p&gt;");
  };
  
      L.geoJSON(ttc,{
  
          onEachFeature: attach
  
  }).addTo(mymap);
  
  
  // closes script 
  &lt;/script&gt;
  
  &lt;script&gt;
  
  $("#pointButt").click(function(){
  
      if(mymap.hasLayer(ttc)){
          mymap.removeLayer(ttc);
      } else {
          mymap.addLayer(ttc);
      };
  
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the code to my css</p>
  
  <pre><code>html, body, #mapdiv{
      height: 100%;
      width: 100%;
  }
  
  .layerButt{
      padding: 5px;
      background-color: orange;
      color: black;
      font-size: 22px; 
      font-family: Roboto Slab;
      width: auto;
      height: auto;
      cursor: pointer;
      margin: 5px;
  }
  
  #tileBar {
      height: auto;
      width: 100%;
      position: absolute;
      top:0;
      background-color: black;
  }
  </code></pre>
  
  <p>Your time is greatly appreciated.</p>
  
  <p>Regards.</p>