title: Leaflet custom layer control
body: <p>I am trying to replace the default leaflet layer control with a custom one.</p>
  
  <p>I have followed another post about creating a custom layer control.</p>
  
  <p>Im able to pass the layer name through and I have checked this with console.log.</p>
  
  <p>However unchecking the checkbox does not remove the layer.</p>
  
  <pre><code>  var firstLayer = omnivore.kml( 'localtions.kml' )
  .on( 'ready', function() {
      map.fitBounds( firstLayer.getBounds() );
  
      firstLayer.eachLayer( function( layer ) {
  
          if ( layer instanceof L.Marker ) {
              layer.setIcon( layerIcon );
          }
  
  
          layer.on( 'click', function( e ) {
              document.getElementById( "location_img" ).innerHTML = '&lt;img src="img/large/logo.png" height="60"&gt;&lt;br&gt;';
              document.getElementById( "location_name" ).innerHTML = layer.feature.properties.name;
              $( "#feature_info" ).stop();
              $( "#feature_info" ).fadeIn( "fast" );
  
              console.log( layer.feature.properties.name );
              $( "#feature_info" ).fadeOut( 5000 );
  
          } );
      } );
  } )
  .addTo( map );
  
      &lt;div id="layercontrol"&gt;
        &lt;label&gt;&lt;input type="checkbox" data-layer="firstLayer"&gt;First Layer&lt;/label&gt;
        &lt;/div&gt;
  
      &lt;script&gt;
            $('div#layercontrol input[type="checkbox"]').on('change', function() {    
          var checkbox = $(this);
          var layer = checkbox.data().layer; 
  
          console.log(layer);
  
          // toggle the layer
          $('#checkbox').change(function() {
        if ($(this).is(':checked')) {
              map.addLayer(layer);
          } else {
              map.removeLayer(layer);
          }
  
      })
      });
      &lt;/script&gt;
  </code></pre>