Take the 2-minute tour ×
Drupal Answers is a question and answer site for Drupal developers and administrators. It's 100% free, no registration required.

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.

http://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.

openlayers-switcher

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!

share|improve this question
    
Hi, it seems that you solved your issue, some people went to serious effort on the other thread answering your question, can you post what you solution was as I see from the URL that those layers are now toggling on and off. –  Duncanmoo Jan 31 '13 at 10:42
add comment

1 Answer 1

@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

share|improve this answer
    
Thanks for sharing that, I will have to come back to this when I do the implementation I need this for. Seems like you ran into some roadblocks! –  Duncanmoo Feb 4 '13 at 12:34
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.