Leaflet Custom Layer Control

I am trying to replace the default leaflet layer control with a custom one. I have followed another post about creating a custom layer control. Im able to pass the layer name throu

Solution 1:

You look to have 2 nested change functions on the checkbox - probably not what you want. Try this....

<div id="layercontrol">
 <label><input type="checkbox" data-layer="firstLayer">First Layer</label>
</div>

<script>
      $('div#layercontrol input[type="checkbox"]').on('change', function() {    
    var checkbox = $(this);
    var layer = checkbox.data().layer; 

    console.log(layer);

    // toggle the layer

  if ($(this).is(':checked')) {
        map.addLayer(layer);
    } else {
        map.removeLayer(layer);
    }


});
</script>