Листовка пользовательского слоя управления

Question

Я пытаюсь заменить элемент управления слоя листов по умолчанию на пользовательский.

Я проследил еще один пост о создании пользовательского элемента управления слоями.

Я могу передать имя слоя черези я проверил это с console.log.

Однако снятие флажка не удаляет слой.

  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 = '<img src="img/large/logo.png" height="60"><br>';
            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 );

    <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
        $('#checkbox').change(function() {
      if ($(this).is(':checked')) {
            map.addLayer(layer);
        } else {
            map.removeLayer(layer);
        }

    })
    });
    </script>

Answer 1

Похоже, у вас есть 2 вложенных change функции на флажке - вероятно, не то, что вы хотите.Попробуйте это ....

<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>