how to make layercontrol widget uncollapsible?

[JudyZhou]

my users want the layer control to be open always by either way make up-arrow invisible or disable. how to do that? Thanks!

[green3g]

Set the widget's type: 'contentPane'

See the available types here:
http://docs.cmv.io/en/latest/configure/widgets/

[JudyZhou]

I did like this but the widget doesn't display anymore:
layerControl: {
include: true,
id: 'layerControl',
type: 'ContentPane',
path: 'gis/dijit/LayerControl',
placeAt: 'Bottom',
options: {
map: true,
layerControlLayerInfos: true,
separated: true,
vectorReorder: true,
overlayReorder: true
}
},
.....

[green3g]

Its case sensitive. Change your type to 'contentPane'

Check out the code that uses your config to figure out what's going on there: https://github.com/cmv/cmv-app/blob/develop/viewer/js/viewer/_WidgetsMixin.js#L82

[tmcgee]

@JudyZhou An alternative approach available in the current develop branch of CMV is to set the toggeable property of the title pane widget containing the layerControl. See the 'paneOptions` in the widget configuration here:

layerControl: {
    include: true,
    id: 'layerControl',
    type: 'titlePane',
    path: 'gis/dijit/LayerControl',
    title: i18n.viewer.widgets.layerControl,
    open: false,
    position: 0,
    paneOptions: {
         toggleable: false
     },
    options: {
        map: true,
        layerControlLayerInfos: true,
        separated: true,
        vectorReorder: true,
        overlayReorder: true
    }
},

You'll probably also want to add some css to adjust the mouse cursor for the title of that titlePane so it does not appear to be clickable:

#layerControl_parent .dijitTitlePaneTitle {
     cursor: default;
 }

[green3g]

👍 Didn't know about that one

[JudyZhou]

tmcgee, I got runtime error with title: i18n.viewer.widgets.layerControl. if I remove this, leave it like title: ' ', then it is still toggleable.

[JudyZhou]

tmcgee, error: 0x800a1391 - JavaScript runtime error: 'i18n' is undefined

[tmcgee]

@JudyZhou you need to be using the CMV code in the develop branch in order for my suggestion to work. From the error and comment, it sounds like you are not using that version.

[JudyZhou]

yes, I think I used CMV code, viewer.js:
define([
'esri/units',
'esri/geometry/Extent',
'esri/config',
'esri/tasks/GeometryService',
'esri/layers/ImageParameters'
], function (units, Extent, esriConfig, GeometryService, ImageParameters) {

// url to your proxy page, must be on same machine hosting you app. See proxy folder for readme.
esriConfig.defaults.io.proxyUrl = 'proxy/proxy.ashx';
esriConfig.defaults.io.alwaysUseProxy = false;
// url to your geometry server.
esriConfig.defaults.geometryService = new GeometryService('http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer');

//image parameters for dynamic services, set to png32 for higher quality exports.
var imageParameters = new ImageParameters();
imageParameters.format = 'png32';

return {
    // used for debugging your app
    isDebug: true,

    //default mapClick mode, mapClickMode lets widgets know what mode the map is in to avoid multipult map click actions from taking place (ie identify while drawing).
    defaultMapClickMode: 'identify',
    // map options, passed to map constructor. see: https://developers.arcgis.com/javascript/jsapi/map-amd.html#map1
    mapOptions: {
        basemap: 'streets',
        center: [-95.364937, 29.756966],
        zoom: 12,
        sliderStyle: 'small'
    },
    // panes: {
    //  left: {
    //      splitter: true
    //  },
    //  right: {
    //      id: 'sidebarRight',
    //      placeAt: 'outer',
    //      region: 'right',
    //      splitter: true,
    //      collapsible: true
    //  },
    //  bottom: {
    //      id: 'sidebarBottom',
    //      placeAt: 'outer',
    //      splitter: true,
    //      collapsible: true,
    //      region: 'bottom'
    //  },
    //  top: {
    //      id: 'sidebarTop',
    //      placeAt: 'outer',
    //      collapsible: true,
    //      splitter: true,
    //      region: 'top'
    //  }
    // },
    // collapseButtonsPane: 'center', //center or outer

    // operationalLayers: Array of Layers to load on top of the basemap: valid 'type' options: 'dynamic', 'tiled', 'feature'.
    // The 'options' object is passed as the layers options for constructor. Title will be used in the legend only. id's must be unique and have no spaces.
    // 3 'mode' options: MODE_SNAPSHOT = 0, MODE_ONDEMAND = 1, MODE_SELECTION = 2
    operationalLayers: [ {
        type: 'dynamic',
        url: 'http://pwegis.houstontx.gov/arcgis/rest/services/PROD/RBH1/MapServer',
        title: 'CIP Projects',
        options: {
            id: 'louisvillePubSafety',
            opacity: 1.0,
            visible: true,
            imageParameters: imageParameters
        },
        identifyLayerInfos: {
            layerIds: [0,1,2,3,4]
        },
        legendLayerInfos: {
            exclude: true,
            layerInfo: {
                //hideLayers: [4]
            }

        },
        layerControlLayerInfos: {
            swipe: true,
            expanded: true
        }

}, {
type: 'dynamic',
url: 'http://pwegis.houstontx.gov/arcgis/rest/services/ReBuildHoustonFY16/ReBuild_Houston_FY16/MapServer',
title: 'Rehabilition Improvements',
options: {
id: 'DamageAssessment',
opacity: 1.0,
visible: true,
imageParameters: imageParameters
},
legendLayerInfos: {
exclude: true
},
layerControlLayerInfos: {
swipe: true,
expanded: true
}
},
{
type: 'dynamic',
url: 'http://pwegis.houstontx.gov/arcgis/rest/services/PROD/RBH2/MapServer',
title: 'Rebuild Houston Planning (CIP+5 and Future)',
options: {
id: 'RebuildHouston',
opacity: 1.0,
visible: true,
imageParameters: imageParameters
},
identifyLayerInfos: {
layerIds: [0, 1, 2, 3, 4]
},
legendLayerInfos: {
exclude: true,
layerInfo: {
//hideLayers: [4]
}

        },
        layerControlLayerInfos: {
            swipe: true,
            expanded: true
        }

    }],
    // set include:true to load. For titlePane type set position the the desired order in the sidebar
    widgets: {
        growler: {
            include: true,
            id: 'growler',
            type: 'domNode',
            path: 'gis/dijit/Growler',
            srcNodeRef: 'growlerDijit',
            options: {}
        },
        geocoder: {
            include: true,
            id: 'geocoder',
            type: 'domNode',
            path: 'gis/dijit/Geocoder',
            srcNodeRef: 'geocodeDijit',
            options: {
                map: true,
                mapRightClickMenu: true,
                geocoderOptions: {
                    autoComplete: true,
                    arcgisGeocoder: {
                        placeholder: 'Enter an address or place'
                    }
                }
            }
        },

        basemaps: {
            include: true,
            id: 'basemaps',
            type: 'domNode',
            path: 'gis/dijit/Basemaps',
            srcNodeRef: 'basemapsDijit',
            options: 'config/basemaps'
        },
        mapInfo: {
            include: false,
            id: 'mapInfo',
            type: 'domNode',
            path: 'gis/dijit/MapInfo',
            srcNodeRef: 'mapInfoDijit',
            options: {
                map: true,
                mode: 'dms',
                firstCoord: 'y',
                unitScale: 3,
                showScale: true,
                xLabel: '',
                yLabel: '',
                minWidth: 286
            }
        },
        scalebar: {
            include: true,
            id: 'scalebar',
            type: 'map',
            path: 'esri/dijit/Scalebar',
            options: {
                map: true,
                attachTo: 'bottom-left',
                scalebarStyle: 'line',
                scalebarUnit: 'dual'
            }
        },
        locateButton: {
            include: true,
            id: 'locateButton',
            type: 'domNode',
            path: 'gis/dijit/LocateButton',
            srcNodeRef: 'locateButton',
            options: {
                map: true,
                publishGPSPosition: true,
                highlightLocation: true,
                useTracking: true,
                geolocationOptions: {
                    maximumAge: 0,
                    timeout: 15000,
                    enableHighAccuracy: true
                }
            }
        },
        overviewMap: {
            include: true,
            id: 'overviewMap',
            type: 'map',
            path: 'esri/dijit/OverviewMap',
            options: {
                map: true,
                attachTo: 'bottom-right',
                color: '#0000CC',
                height: 100,
                width: 125,
                opacity: 0.30,
                visible: false
            } 
        },
        homeButton: {
            include: true,
            id: 'homeButton',
            type: 'domNode',
            path: 'esri/dijit/HomeButton',
            srcNodeRef: 'homeButton',
            options: {
                map: true,
                extent: new Extent({
                    xmin: -180,
                    ymin: -85,
                    xmax: 180,
                    ymax: 85,
                    spatialReference: {
                        wkid: 4326
                    }
                })
            }
        },

        layerControl: {
            include: true,
            id: 'layerControl',
            type: 'titlePane',
            path: 'gis/dijit/LayerControl',
            title: i18n.viewer.widgets.layerControl,
            position: 0,
            paneOptions: {
                toggleable: false
            },

          //  placeAt: 'Bottom',
            open: false,
            options: {
                map: true,
                layerControlLayerInfos: true,
                separated: true,
                vectorReorder: true,
                overlayReorder: true
            }
        },
        legend: {
            include: true,
            id: 'legend',
            type: 'titlePane',
            path: 'esri/dijit/Legend',
            title: 'Legend',
            open: false,
            position: 0,
            options: {
                map: true,
                legendLayerInfos: true
            }
        },
        help: {
            include: true,
            id: 'help',
            type: 'titlePane',
            path: 'gis/dijit/

Help',
title: 'Help',
position: 0,
options: {}
}

    }
};

});

[JudyZhou]

@tmcgee could you please take look of it above? Thank you!

[tmcgee]

@JudyZhou I can tell by the files listed in your screenshot that you are not using code from the develop branch. I assume you are then using version 1.3.4 and suggest you may want to follow the instructions that @roemhildtg provided.

[JudyZhou]

@tmcgee what is the current version or code from the develop branch?
@roemhildtg I changed to lower case contentPane already, but still does not work, control not display, if I remove placeAt: 'Bottom', then got error:
Unhandled exception at line 547, column 5 in http://localhost:16743/viewer/js/viewer/Controller.js
0x800a138f - JavaScript runtime error: Unable to get property 'containerNode' of undefined or null reference

not sure any other property is needed?

[tmcgee]

@JudyZhou I am on mobile today. I will post a working solution when I can if you don't get it working before that.

[JudyZhou]

@tmcgee I still cannot make it work. Could you please help? I appreciate it.

[green3g]

@JudyZhou it looks like contentPane is no longer working. I know it used to, but its throwing an error.

http://jsbin.com/maxunomeze/edit?js,console,output

https://github.com/cmv/cmv-app/blob/develop/viewer/js/viewer/_WidgetsMixin.js#L225

I'm not sure why, but this.panes.sidebar is undefined. @tmcgee thoughts?

[green3g]

If you switch to the "develop" branch though, @tmcgee solution does work.

http://jsbin.com/maxunomeze/edit?js,console,output

[tmcgee]

@roemhildtg yep this.panes.sidebar doesn't work. That bug has been there for awhile but I had forgotten about it. Thanks for bringing it to the surface again. I have flagged this issue with the "bug" label.

If you explicitly include the placeAt like placeAt: 'left', contentPane works. Something like this should work for the production version and the develop version of CMV:

layerControl: {
    include: true,
    id: 'layerControl',
    type: 'contentPane',
    placeAt: 'left',
    path: 'gis/dijit/LayerControl',
    title: 'Layers',
    options: {
        map: true,
        layerControlLayerInfos: true,
        separated: true,
        vectorReorder: true,
        overlayReorder: true
    }
},

[JudyZhou]

thank you so much @tmcgee, it works! it displays at bottom of the other widgets in the panel. how to make it at top?

[JudyZhou]

@tmcgee @roemhildtg 'dojo/i18n!config/nls/main' still doesn't work for me. Do I miss some resource file folder like config/nls/main?

[green3g]

If that file doesn't work, that means you are missing the file referenced by that path config/nls/main. You can check your folders for this to make sure its there.

As @tmcgee mentioned, that file was added in the develop version of cmv, so if you switch to the latest develop branch you will have that file. You can use git to do this for you:

git clone https://github.com/cmv/cmv-app.git
cd cmv-app
git checkout develop

The i18n stuff is for using cmv in different languages. If you're not needing the extra language support, alternatively you can remove that line of code that references the file and i18n and make sure you don't have any variables referencing i18n in your viewer.js config.

[tmcgee]

@JudyZhou Another way to get a copy of the latest from the develop branch is download a zip file, That of course would only be a static copy of the development work in progress at the time you download it. If you want to stay current with the development track, the process that @roemhildtg described is a better approach.