place the layer switcher outside the map

Hey @joeysantiago. Well, what you should do is just create a new layer switcher behavior that allows for that. You can put it in a custom module. This way you can maintain code easier on your project. But yes, this is the best way to go.

Thank you for this very useful thread!

Here's a Drupal 7 solution which I am working on.

Once again this is the dirty way to do it, hacking the openlayers module itself.

sites/all/modules/openlayers/plugins/behaviors/openlayers_behavior_layerswitcher.js

/**
 * Layer Switcher Behavior
 */
Drupal.openlayers.addBehavior('openlayers_behavior_layerswitcher', function (data, options) {
  options.ascending = !! options.ascending;

  // Add these lines to move the switcher to an external div
  // (in this case the id of the external div is openlayers-switcher-block)
  options['div'] = OpenLayers.Util.getElement('openlayers-switcher-block');
  Drupal.openlayers.addControl(data.openlayers, 'LayerSwitcher', options);

  // Maximize if needed.
  if (!! options.maximizeDefault == true) {
    data.openlayers.getControlsByClass('OpenLayers.Control.LayerSwitcher')[0].maximizeControl();
  }
});

I'd be grateful for pointers on how to do this properly using a new layerswitcher behavior.

I'm not sure how to implement a new behavior, so my first thought was to override the js file using hook_js_alter().
I ran into this error:
Uncaught TypeError: Cannot call method 'addBehavior' of undefined
... in other words, Drupal.openlayers is not yet defined.
... so that's why for now, I'm unfortunately hacking the openlayers module itself.

For completeness, here is the rest of my custom openlayers_switcher module, it basically provides a block with the div for my layerswitcher to go into.

/**
 * Implementation of hook_block_info().
 *
 * Provides a block which will contain the layer switcher icons.
 *
 * You will need to put this block in the correct region by going to:
 * Structure > Blocks in your browser.
 */
function openlayers_switcher_block_info() {
  $blocks['openlayers-switcher-block'] = array(
    'info' => t('openlayers-switcher-block'),
  );
  return $blocks;
}

/**
 * Implementation of hook_block_view().
 *
 * Renders a block which will contain the layer switcher icons.
 */
function openlayers_switcher_block_view($delta = '') {
  $block = array();
  switch ($delta) {
    case 'openlayers-switcher-block':
      $block = array(
        'content' => array(
          '#markup' => _openlayers_switcher_content(),
        )
      );
      break;
  }
  return $block;
}

/**
 * custom html block
 * @return string
 *
 * Returns an empty div which will contain the layer switcher.
 */
function _openlayers_switcher_content() {
  return "<div id='openlayers-switcher-block'></div>";
}

/**
 * Implements hook_openlayers_map_preprocess_alter().
 *
 * Ensures that the layerswitcher is maximized - this is important as we are 
 * moving it to a div which is outside the map.
 */
function openlayers_switcher_openlayers_map_preprocess_alter(&$map = array()) {
  $map['behaviors']['openlayers_behavior_layerswitcher']['maximizeDefault'] = 1;
}

I had the same issue of wanting to provide a div id for displaying the layerswitcher outside the map, and thank you michaellenahanu for sharing your module! I solved it in a similar manner, except I added a textfield in the layerswitcher fieldset of the behavior tab in the openlayers map edit screen. This way you can set different div ids for the layerswitcher per map. Here's the patch.

Great patch ! committed !

You can also check this module, it might help: http://drupal.org/project/olebs

Thank you, Pol, and thanks for sharing your olebs module. I tried it out and it works great, especially with chosen.