title: Leaflet - How to initiate stopLocate() function using switch statement in leaflet?
body: <p>I'm building an app that user can use to search the awesome place to visit via category button and searchbox that lies outside of the map. So, when user visit  the app/site, the app initially track the user location. But when user start to click the button, the app initiate the <code>stopLocate()</code> function. This function only been initiate when user start to click the category button or search through searchbox</p>
  
  <p>This is the code
        index.html</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;  
  
     &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
     &lt;head&gt;
  
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;BookSmart&lt;/title&gt;
      &lt;link rel="stylesheet" href="Booking services/css/main.css" /&gt;
  
  
  
  
      &lt;link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-
       0.7.5/leaflet.css" /&gt;
      &lt;script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"&gt;&lt;/script&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, 
       maximum-scale=1.0, user-scalable=no" /&gt;
  
  
       &lt;/head&gt;
  
      &lt;body&gt;
      &lt;div id="header"&gt;
          &lt;p id="logo_text"&gt;BookSmart&lt;br /&gt;Services Booking Platform&lt;/p&gt;
          &lt;div id="button"&gt;   
              &lt;form&gt;
                  &lt;input name="upload" type="button" value="Upload" /&gt;
              &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;  
      &lt;div id="nav"&gt;
      &lt;nav&gt;
        &lt;ul class="nav nav-pills pull-right"&gt;
        &lt;li role="presentation"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li role="presentation"&gt;&lt;a href="service_page.php"&gt;Services&lt;/a&gt;&lt;/li&gt;
          &lt;li role="presentation"&gt;&lt;a href="profile.php"&gt;Profile&lt;/a&gt;&lt;/li&gt;
          &lt;li role="presentation"&gt;&lt;a href="community.php"&gt;Community&lt;/a&gt;&lt;/li&gt;
          &lt;li role="presentation"&gt;&lt;a href="#"&gt;Upload&lt;/a&gt;&lt;/li&gt;
  
        &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;/div&gt;
      &lt;div class="map-wrap"&gt;
      &lt;div id="map" style="height: 400px; width: 1325px; border: 1px solid  
       #AAA;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
       &lt;div class="col-lg-6"&gt;
          &lt;div class="input-group"&gt;
              &lt;span class="input-group-btn"&gt;
                      &lt;button class="btn btn-default" id="btn1" data-     
          toggle="modal" data-target="#mymodal" 
          formaction="category.js" type="button"&gt;Category&lt;/button&gt;
              &lt;input type="text" class="form-control" size="192"    
          placeholder="Search a desired services..."&gt;
                  &lt;span class="input-group-btn"&gt;
                      &lt;button class="btn btn-default" id="btn2" 
          type="button"&gt;Search!&lt;/button&gt;
                  &lt;/span&gt;
            &lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
      &lt;script&gt;
  
      $(document).ready(function(){
  
      var map = L.map('map').setView([4.210484, 101.975766], 13);
  
          L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
              attribution: '$copy; &lt;a href="http://osm.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors',
              maxZoom: 18
          }).addTo(map);
  
      map.locate({setView: true ,maxZoom: 16});
  
      function onLocationFound(e) {
          var radius = e.accuracy / 2;
  
          L.marker(e.latlng, radius).addTo(map)
              .bindPopup("You are within " + radius + " meters from this point").openPopup();
  
          L.circle(e.latlng, radius).addTo(map);
      }
  
      map.on('locationfound', onLocationFound);
  
      function onLocationError(e) {
          alert(e.message);
      }
  
      map.on('locationerror', onLocationError);
  
      var marker = L.marker([])
      });
  
      &lt;/script&gt;
  
      &lt;script&gt;
       for (var i = 0; i &lt; locations.length; i++){
          var onLocationFound = true;
          switch(onLocationFound){
              case 1:
                  if(!onLocationFound = true){
                  var btn1 = document.getElementById('btn1'){
                      map.on(btn1, 'click', function(
                  {
                          this.innerHTML="Category";
                          this.className="btn btn-primary";
                          map.stopLocate({setView: false, maxzoom: 16});
                  }
                          return onLocationFound = false;
                )
              )
              }
              }
              };
              break;
              case 2: 
                  if(!onLocationFound = true){
                  var btn2 = document.getElementById('btn2'){
                      map.on(btn2, 'click', function(
                      {
                          this.innerHTML = "Search";
                          this.className="btn btn-primary";
                          map.stopLocate({setView: false, maxzoom: 16});
                      }
                          return onLocationFound = false;
                )
              )
              }
              }
                  };
              default: map.locate({setView: true, watch: true, maxzoom: 13});
        }
        };
  
  &lt;/script&gt;
  
  
  
  
      &lt;/body&gt;
  
  
  
  
     &lt;/html&gt;
  </code></pre>
  
  <p>Let's be frank. I'm really new to Javascript. I'd learn it due to the leaflet. So my code is really worse. And of course it didn't work. It turns blank. What i wish to do is to initiate <code>stopLocate()</code> when user click categories or search button, and of course initiate the categories which is the Jquery popup containing list of category and of course this wasn't work at all. Other variable that initiate <code>stopLocate()</code> is when user click search button that search markers by attribute and this do not working well too. But my real problem is how to initiate <code>stopLocate()</code> when user clicking two of this button. Could anyone help on this? Thanks in advance.</p>