openlayers toggle visibility of layer I hope I'm not breaking any rules, but I wanted to cross-post this --- it is in the stackexchange for 'geographic information systems', but now I think the problem may be more on the Drupal side.

https://gis.stackexchange.com/questions/41223/openlayers-toggle-visibility-of-layer

I think the problem I'm having is in two things:


I'm not sure how best to get a handle on the map object in jQuery.
There seems to be a separate issue where strangely the click event is being fired twice.


EDIT: What I'm in effect trying to do is have the switchers below the map behave in the same way as the switchers in the right-hand-side grey switcher widget supplied by the openlayers library itself. See the screenshot.



I'm copying the question here, for the use of search engines etc.

I'm using OpenLayers in Drupal and am stuck while trying to make a layer toggle on and off (as it does from the right-side layer switcher).

See this map.
http://dev.lambeth.coop/map

Click on food growing projects.

EDIT: I've changed the code to show the Drupal-specific elements.

(function ($) {
  Drupal.behaviors.openlayers_switcher = {
    attach: function(context, settings) {
      $(document).ready(function() {
        $('[id^=openlayers-switcher-block--]').click(function(e) {
          $(this).toggleClass('active');
          // 27 is the length of 'openlayers-switcher-block--'
          // layername is the string following that.
          var layername = e.target.id.substring(27);
          var ol = $('.openlayers-map').data('openlayers');
          var layers = ol.openlayers.getLayersByName(layername);

          // this doesn't work
          // if (layers[0].visibility) {
            // layers[0].setVisibility(false);
          // }
          // else {
            // layers[0].setVisibility(true);
          // }
        });
      });
    }
  }
}(jQuery));


When I try to toggle visibility - the visibility doesn't change.

EDIT: So it appears that the entire click function is being called twice.

I've tried putting these lines (in various combinations) at the beginning of the function, as these have been suggested in google searches for 'click events firing twice' etc.

$('[id^=openlayers-switcher-block--]').click(function(e) {
  e.preventDefault();
  e.stopPropagation();


... but these don't help - I still get the function called twice.

In any case, I'm new to openlayers and would be grateful for a way forward!

Thanks!
@Duncanmoo: You're quite right, the response to this was incredible. It's nice to have the opportunity to explain how I came up with the current working solution.

The solution has a number of parts and is not entirely elegant, so feedback and advice is still very welcome!

Here is my custom drupal module:

https://github.com/LambethCouncil/opencouncil/blob/master/sites/all/modules/custom/openlayers_switcher/openlayers_switcher.module

The default html generated by openlayers for the switchers wasn't very easily changed with css, so I have hacked the openlayers.js file to give it some structure (for example wrapping each switcher in an anchor tag).

Take a look here for the amendments I made (search for lambeth.coop):

https://github.com/LambethCouncil/opencouncil/blob/master/sites/all/modules/custom/openlayers_switcher/OpenLayers-2.11/OpenLayers.js

... a very important hack here was to add the click event to show/hide the layers (at time of writing this is line 2850):

// bind the click event to the aSwitcherBlock a element
OpenLayers.Event.observe(aSwitcherBlock,"click",OpenLayers.Function.bindAsEventListener(this.onInputClick,context));

... this meant I could by-pass all the horrible jQuery problems I was experiencing and made me very happy!

... I would like to do the same with the openlayers-2.12 js file but got stuck. I'd love to find a way to do this - currently I'm stuck on openlayers-2.11 which is the old version as far as the Drupal Openlayers module is concerned. So that's a bit dumb.

Finally, see here for a method of taking the entire layer-switcher out of the default right-hand-side-of-map position and assigning it to a div outside the map:

http://drupal.org/node/1475316#comment-6945728