0

I asked my question on gis.stackexchange.com because of its geo nature, but I figured I would have a larger response here. https://gis.stackexchange.com/q/18327/3773

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).

I need to force the webpage to setOpacity onload, but I am not familiar on how to do this.

Removed the any unnecessary code. Your help is much appreciated!

<script type="text/javascript">
    var options = {maxExtent: new OpenLayers.Bounds(-10592586.767623,5113378.756775,-8275939.536344,7731361.313701)};

    function init(){
        OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/";

        map = new OpenLayers.Map("map",{
            maxExtent: new OpenLayers.Bounds(-10592586.767623,5113378.756775,-8275939.536344,7731361.313701),
            maxResolution:"auto",
            units:'m',
            controls:[
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.PanZoomBar(),
                new OpenLayers.Control.KeyboardDefaults(),
                new OpenLayers.Control.MousePosition(),
                new OpenLayers.Control.LayerSwitcher(),
                new OpenLayers.Control.Navigation({dragPanOptions: {enableKinetic: true}})
                ]
            });

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

        osm_mapnik = new OpenLayers.Layer.OSM("OpenStreetMap: Mapnik");

        gmap = new OpenLayers.Layer.Google("Google Maps: Streets");

        map.addLayers([hii_1,osm_mapnik,gmap]);
        map.zoomToMaxExtent();
        map.setCenter(new OpenLayers.LonLat(-9434263,6422370),5);
</script>

<script>
$(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>
Community
  • 1
  • 1
Michael Markieta
  • 432
  • 4
  • 16

1 Answers1

0

The callback of the slider is not called onLoad. To trigger the event manually, see Trigger a jQuery UI slider event for an example.

Though, it would be better to your layer with an opacity of 0.20. You can achieve that by adding the property opacity to your layers options.

{ isBaseLayer:false, transparent:true, format:"image/png", alpha:true, opacity:0.20 } .

Community
  • 1
  • 1
Niels
  • 320
  • 2
  • 7