1

I have a javascript page that was built with qgis/webappbuilder. The legend is currently built with an array listed as follows:

var group_environmental = new ol.layer.Group({
                            layers:     [lyr_bedrockgeology,lyr_surfacegeology,lyr_deednoticeareas,lyr_cea,lyr_historicfill,lyr_rivers,lyr_chromatesites,lyr_newjerseykcsl],
                            showContent: true,
                            title: "Environmental"});
var group_landuse = new ol.layer.Group({
                            layers: [lyr_waterbodies,lyr_wetlands,lyr_forests],
                            showContent: true,
                            title: "Land Use"});
var group_basemap = new ol.layer.Group({
                            layers: [lyr_natural215,lyr_wmsnjroads,lyr_parcelwfsthudsoncountyparcels,lyr_hudsoncountyblocks,lyr_jerseycityzoningmap,lyr_hobokenzoningmap],
                            showContent: true,
                            title: "Base Map"});

lyr_natural215.setVisible(true);
lyr_wmsnjroads.setVisible(false);
lyr_parcelwfsthudsoncountyparcels.setVisible(false);
lyr_hudsoncountyblocks.setVisible(false);
lyr_jerseycityzoningmap.setVisible(false);
lyr_hobokenzoningmap.setVisible(false);
lyr_waterbodies.setVisible(false);
lyr_wetlands.setVisible(false);
lyr_forests.setVisible(false);
lyr_bedrockgeology.setVisible(false);
lyr_surfacegeology.setVisible(false);
lyr_deednoticeareas.setVisible(false);
lyr_cea.setVisible(false);
lyr_historicfill.setVisible(false);
lyr_rivers.setVisible(false);
lyr_chromatesites.setVisible(false);
lyr_newjerseykcsl.setVisible(false);
var layersList = [group_basemap,group_landuse,group_environmental];
var legendData = {
  "DRSQL_BedrockGeology20170224105153647": [{"href": "9_0.png", "title":""}], 
"Natural_201520170217162025846": [{"href": "0_0.png", "title": ""}], 
"ddde3cb3a18740849d6c911e49086cea_1620170217173950822": [{"href": "12_0.png", "title": ""}], 
"DRSQL_LULC2012WATER20170217164541478": [{"href": "6_0.png", "title": ""}], 
"DRSQL_SurfaceGeol20170224105208638": [{"href": "10_0.png", "title": ""}], 
"hudsoncountyblocks20170217162028759": [{"href": "3_0.png", "title": ""}], 
"076a3d08a34348d2bdb3c109ec349e53_1720170217173034797": [{"href": "11_0.png", "title": ""}], 
"DRSQL_LULCForest20170227082648024": [{"href": "8_0.png", "title": ""}], 
"DRSQL_LU2012Wetlands20170217164530627": [{"href": "7_0.png", "title": ""}], 
"ed5549b6bff140fda40e69d5dd251843_820170217170758597": [{"href": "15_0.png", "title": ""}], 
"6f11f6204ffa40a09527c8205aec4425_720170217170412551": [{"href": "16_0.png", "title": ""}], 
"statefill20170217162103537": [{"href": "13_0.png", "title": ""}], 
"DRSQL_STATERIVERS20170217161657796": [{"href": "14_0.png", "title": ""}], 
"WMS_NJRoads20170217161657704": [{"href": "1_0.png", "title": ""}], 
"ParcelWFST_HudsonCountyParcels20170217163348695": [{"href": "2_0.png", "title": ""}]
};

Is it possible to have the legend built based upon the setVisible variable when it is true and hide it when the layer is not visible? I was looking at the push() method and I was thinking of something along the following pseudocode, but I don't know how it would actually be written:

var legendData = {}
For (var layer in layersList) {
 If layer.setVisible = true then 
 layer.push()
}

This way, when a layer is turned on in the layer list, it will show in the Legend and when it is turned off it would be removed from the Legend div. Any suggestions?

  • Thank you for your suggestion, I've changed the underlying SDK of WebAppBuilder to handle this, so should be possible in the next release see: github.com/boundlessgeo/sdk/pull/406 – bartvde Mar 6 '17 at 15:49
  • Thanks, bartvde. Is it possible to put this edit into an exisiting application, or will I have to rebuild it? – GIS87 Mar 6 '17 at 20:15
  • Update: Bartvde, I was able to incorporate the lines you referenced and it does update the legend, however I have to shrink and reopen the legend widget for it to draw the new layers. Can this be done automatically? – GIS87 Mar 6 '17 at 20:21
  • When I tested it was done automatically, even with the legend open. I'm not sure my fix is compatible with the SDK version that is behind your Web Application Builder, there might be other changes missing from it. – bartvde Mar 7 '17 at 7:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.