0

I am trying to get JQuery and OpenLayers to play nicely together. Being a javascript newbie I am having trouble generating an opacity slider and visibility checkbox using jQuery which are associated with a given layer.

I do not know, before hand, how many layers will be available. This information is loaded via a python script which performs a WMS request to Geoserver.

I am coming from python and find that what I really want is a dictionary to store the layer object and a key. Here is my attempt to do this using a hash. I am looking for any suggestions, from "don't use a hash, look at "____" to "you missed the '()'.

The code below adds the layer to the map, it's name to the table of contents, an opacity bar, and a check box to set visibility. It works wonderfully for a single layer. Each subsequent layer overwrites the previous layers opacity slider and check box.

//If the thumbnail is clicked load the layer.
$('table').on('click','.thumbnail',function(event){
var layer = {};

//This info is placed into the img tag via jQuery   
var name = ($(this).attr("layername_id"));
var title = ($(this).attr("titlename_id"));

//OpenLayers creates the layer here
layer[i] = new OpenLayers.Layer.WMS(title, "geoserver/wms?",{LAYERS: name,FORMAT: 'image/png',TRANSPARENT: 'true',PROJECTION:'EPSG:30100',BBOX: '-180,-60,180,60'},{OPACTIY: 0.1, isBaseLayer: false, tiled:true} );

//Do not add the same layer multiple times
if (map.getLayersByName(name) == false) {
        map.addLayers([layer[i]]);  
}

//Defined just to make life easier in this part of the code.
var name = layer[i].name;

//Check box for visibility in a table of contents DIV tag.
$('.toc').append('<div><input class="toc_inline" id="check'+i+'" type="checkbox" checked="checked"></div>');
    $("[id^=check]").click(function(){
    var $input = $(this);
    if($input.prop('checked') == true){
        layer[i].setVisibility(true);
    }
    else {
        layer[i].setVisibility(false);
    }
    });

//Layer name in the TOC and slider to handle transparency.
    $('.toc').append('<div class="toc_inline" unique_id="'+name+'">'+name+'</div>');

//Slider for transparency
$('.toc').append('<div id="slider-'+i+'"><div class="ui-slider-handle"></div></div>');

    $("[id^=slider]").slider({
    value: 100,
    slide: function(e, ui) {
        layer[i].setOpacity(ui.value / 100);
        }
    });
//My attempt to step to the next integer
i++;

});
Jzl5325
  • 3,718
  • 7
  • 36
  • 59
  • I'm assuming you declared `i` somewhere? Also, you should use an array, not a object. (the two are similiar in many ways, except you define an array with `var myArr = []`, and arrays have a lot of useful functions on them already that make handling data easier). – Elliot Bonneville Apr 24 '12 at 01:09
  • I did declare i=0 at the start with a few other variables. I tried using var layer = []; and I am getting layer[i] is undefined as an error in all of the jquery code. Having said that the layers are displaying without an issue. Do I need to use var layer[i] to get a new object generated? – Jzl5325 Apr 24 '12 at 01:58
  • 1
    Nope; on further inspection, it would appear that you've scoped `layer` to your `.on()` function. Moving it outside of the click event function should solve your problem. – Elliot Bonneville Apr 24 '12 at 02:14
  • @ElliotBonneville Thanks! I think I am starting to understand that the issue I am having is a scope issue. How can I pass layer[i] between jquery functions? Do I need to declare a global? Thanks! – Jzl5325 Apr 24 '12 at 10:51
  • That's the least complicated way of doing it, although globals are often advocated against. If you want to pass layer[i] around, just move the declaration for layer (`layer = []`) outside of all your function/object declarations. That way it's not locally scoped to anything and all your functions can access it. This may be a useful answer for you to study: http://stackoverflow.com/a/500459/339852 – Elliot Bonneville Apr 24 '12 at 13:46

0 Answers0