visible layers with checkbox

2390
1
Jump to solution
04-21-2014 02:06 PM
Luis_MiguelAgudo_Bravo
New Contributor
Hi everybody,

I´m trying to use checkbox in order to add or remove my layers on the map. I´m using dojo.on, when change my checkbox I use updateLayerVisibility function:

        map.addLayers([mangroves, coldcoral, marineEcoregions, pelagicProvinces, wmsLayer]);                  on(dom.byId("mangroves"), "change", updateLayerVisibility);         on(dom.byId("coldcoral"), "change", updateLayerVisibility);         on(dom.byId("marineEcoregions"), "change", updateLayerVisibility);         on(dom.byId("pelagicProvinces"), "change", updateLayerVisibility);          function updateLayerVisibility() {             //var visibleLayerIds = []                         var inputs = query(".list_item");             var inputCount = inputs.length;             map.removeAllLayers();             map.setBasemap("oceans");              for (var i = 0; i < inputCount; i++) {                 if (inputs.checked) {                     //visibleLayerIds.push(inputs.value);                     map.addLayer(inputs.value);                 }                 if (inputs.checked == false) {                     map.removeLayer(inputs.value)                 }             }         }


But I have a problem with the map.addLayer() sentence. When I checked/unchecked in this sentence I have a exception:

"uncaught exception: lang.hitch: scope["onLoad"] is null (scope="[object Window]")".

I can´t understand where is the error...:confused:

thank you..
0 Kudos
1 Solution

Accepted Solutions
TimWitt
Frequent Contributor
Luis,

this is the code I use, to add checkboxes and to show a legend. Maybe it can be useful to you:

      //Add the Legend       map.on("layers-add-result", function (evt) {         var layerInfo = array.map(evt.layers, function (layer,         index) {           return {             layer: layer.layer,             title: layer.layer.name               };           });           if (layerInfo.length > 0) {               var legendDijit = new Legend({                   map: map,                   layerInfos: layerInfo               }, "legendDiv");               legendDijit.startup();           }       //Add check boxes           array.forEach(layerInfo,           function (layer) {             var layerName = layer.title;             var checkBox = new CheckBox({               name: "checkBox" + layer.layer.id,               value: layer.layer.id,               checked: layer.layer.visible,               onChange: function (evt) {                 var clayer = map.getLayer(this.value);                 clayer.setVisibility(!clayer.visible);                 this.checked = clayer.visible;               }             });       //Add the check box and label to the TOC               domConstruct.place(checkBox.domNode, "layersDiv",                   "after");               var checkLabel = domConstruct.create('label', {                   'for': checkBox.name,                   innerHTML: layerName               }, checkBox.domNode, "after");               domConstruct.place("<br />", checkLabel,                   "after");           });



Tim

View solution in original post

0 Kudos
1 Reply
TimWitt
Frequent Contributor
Luis,

this is the code I use, to add checkboxes and to show a legend. Maybe it can be useful to you:

      //Add the Legend       map.on("layers-add-result", function (evt) {         var layerInfo = array.map(evt.layers, function (layer,         index) {           return {             layer: layer.layer,             title: layer.layer.name               };           });           if (layerInfo.length > 0) {               var legendDijit = new Legend({                   map: map,                   layerInfos: layerInfo               }, "legendDiv");               legendDijit.startup();           }       //Add check boxes           array.forEach(layerInfo,           function (layer) {             var layerName = layer.title;             var checkBox = new CheckBox({               name: "checkBox" + layer.layer.id,               value: layer.layer.id,               checked: layer.layer.visible,               onChange: function (evt) {                 var clayer = map.getLayer(this.value);                 clayer.setVisibility(!clayer.visible);                 this.checked = clayer.visible;               }             });       //Add the check box and label to the TOC               domConstruct.place(checkBox.domNode, "layersDiv",                   "after");               var checkLabel = domConstruct.create('label', {                   'for': checkBox.name,                   innerHTML: layerName               }, checkBox.domNode, "after");               domConstruct.place("<br />", checkLabel,                   "after");           });



Tim
0 Kudos