openlayers-8.x-4.x-dev/src/Plugin/Control/LayerSwitcher/js/LayerSwitcher.js

Drupal.openlayersPluginManager.register({
  fs: 'openlayers.Control:LayerSwitcher',
  init: function(data) {
console.log('layerswitcher - init');
    var element = jQuery(data.opt.element);
console.log(data);
console.log(element);
console.log(element[0]);
console.log('layerswitcher - LS1');
    jQuery('input[name=layer]', element).change(function() {
      data.map.getLayers().forEach(function(layer, index, array) {
        // If this layer is exposed in the control check its state.
        if (jQuery('input[value=' + layer.mn + ']', element).length) {
          var visible = jQuery('input[value=' + layer.mn + ']', element).is(':checked');
console.log(visible);
          // If the layer has the zoom activity property get a valid zoom level.
          var zoomActivity = layer.get('zoomActivity');
          if (visible && zoomActivity !== undefined && zoomActivity[data.map.getView().getZoom()] === undefined) {
            var firstActiveZoomLevel = zoomActivity[Object.keys(zoomActivity)[0]];
            data.map.getView().setZoom(firstActiveZoomLevel);
          }
          layer.setVisible(visible);
        }
      });
    });
console.log('layerswitcher - LS2');
    // Register visibility change events. The layerswitcher check's if it's ok
    // to be visible first. This e.g. ensures that the zoomActivity feature of
    // layers respects the layerswitcher state.
    data.map.getLayers().forEach(function(layer, index) {
      // If this layer is exposed in the control check its state.
      if (jQuery('input[value=' + layer.mn + ']', element).length) {
        layer.on('change:visible', function (e) {
          var visibility = e.target.get(e.key);
          // Keep invisible if layer isn't activated in layerswitcher.
          if (visibility && !jQuery('input[value=' + e.target.mn + ']', element).is(':checked')) {
            e.target.setVisible(false);
            if (e.stopPropagation !== undefined) {
              e.stopPropagation();
            }
            if (e.preventDefault !== undefined) {
              e.preventDefault();
            }
          }
          else if (jQuery('input[value=' + layer.mn + ']', element).prop('checked') != visibility) {
            jQuery('input[value=' + layer.mn + ']', element)
              .prop('checked', visibility)
              .change();
          }
        });
      }
    });
console.log('layerswitcher - LS3');
    // Show/hide layers according to inital input field settings.
    jQuery.each(jQuery('input[name=layer]', element), function(i, el) {
      jQuery(el).change();
     return false;
    });
console.log('layerswitcher - LS4');
console.log(element);
console.log(element[0]);    
    return new ol.control.Control({
      element: element[0]
//      element: '<p>My first paragraph.</p>'
    });
  }
});