Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

Added some bounty so more people take a look at my question. Thank you.

I have been trying to utilize the jQuery UI Slider to control layer opacity in OpenLayers but I have an issue when trying to set the "value" option to anything other than the "max" value.

What I would like to see is the setOpacity method change my layer's opacity to 20% onload. However, the slider is shown in the correct position but the layer displays the "max" value of opacity (100%/opaque). Currently, a slide event triggers a change in opacity. I need to force the opacity of my WMS layers to be that of the manually set "value" options when the page loads.

Removed the any unnecessary code. One slider shown below. Your help is much appreciated!

<body onload="init()">
  <script type="text/javascript">
  $(document).ready(function(){
  $(function() {
      $( "#slider1" ).slider({
      range: "min",
      min: 0,
      value: 20,
      slide: function(e, ui) {
          hii_1.setOpacity(ui.value / 100);
          $( "#amount1" ).val( ui.value );
          }
      });
      $("#amount1" ).val($( "#slider1" ).slider( "value" ) );
  });
  });
  </script>
</body>
share|improve this question
    
I kind of just realized that I need to use the jQuery UI Slider "create" event. Tips? –  Michael Markieta Dec 31 '11 at 6:35
add comment

2 Answers

up vote 5 down vote accepted
+50

You have two options:

  1. hook into the create event to adjust layer opacity as sliders are created
  2. provide a global cfg array so that layers are already init'ed to same value as the sliders

The first solution is simple, just provide a create: function(event, ui) { ... } as an init option to the slider like the following:

$( "#slider1" ).slider({
   [...]
   create: function(event, ui) { ... }
   [...]
});

The second solution is even simpler and will ensure that the user always sees the layers at the right opacity. In the first solution there is a chance (albeit small) that the layers appear for a short time at 100% opacity until the sliders are created.

Define a global array like the following:

var opacities=[10, 20, 20];

in the OL init code set the opacity at layer creation time:

hii_1 = new OpenLayers.Layer.MapServer("Land Cover","../../cgi-bin/mapserv.exe",{
        map:'C:/ms4w/Apache/htdocs/hii/hii_landcover.map'},{
        isBaseLayer:false,
        transparent:true,
        format:"image/png",
        alpha:true
        });

hii_1.setOpacity(opacities[0] / 100);

and then do the same when creating the sliders:

$( "#slider1" ).slider({
      range: "min",
      min: 0,
      value: opacities[0],
      slide: function(e, ui) {
          hii_1.setOpacity(ui.value / 100);
          $( "#amount1" ).val( ui.value );
          }
      });

P.S.: code refactoring so that layer cfg is moved completely into the opacities array (which should be renamed at this point) and code duplication is reduced is left as an exercise to the reader.

share|improve this answer
    
Thank you! The second suggestion will be used. I believe I can create all 6 sliders using a loop thereby minimizing code duplication. However I am not sure if I can do this without breaking the jQyery chain. –  Michael Markieta Jan 2 '12 at 21:24
add comment

To complete unicoletti's answer. You can have a look on opengeo workshop. There is an example combining openlayers and Jquery UI slider.

The full OL tutorial is available here.

share|improve this answer
    
Thanks Simo. I used this tutorial when I first taught myself jQuery UI and implemented the sliders for my project. –  Michael Markieta Jan 3 '12 at 12:42
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.