nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Floating Panes

MathewSuran

Is it possible to have 2 separate floating panes in a custom webviewer at 2 separate times?

I want one Floating pane at startup (which I have done already) that you have to close to view the map, basically acting as a disclaimer. Once in the main map, I have a slider bar (don't know if that is the correct name) representing 5 different layers to be displayed. This is currently in the left pane.

Is there a way to take that slider bar and turn it into another floating pane? I have searched all over the forums on how to set up a basic floating pane, but everyone has a different way of doing it. All of which I can not get to work with what I have. We basically outsourced to a company to build this webviewer. Long story short, I am now trying to figure out what/how they did things and have been tasked to complete the project, since they could not get it done.

I'm sure I didn't give enough info so let me know what else you need to better assist in answering. Thanks!

Find more posts tagged with

Accepted answers

All comments

MathewSuran

Is that legacy or amd?

BenFousek

To programmatically create a tp, create a div for the tp:
[HTML]<div style="position:absolute; right:20px; top:10px; z-Index:999;">
<div id="myTitlePane"></div>
</div>[/HTML]

The second argument in the constructor is simply the id (srcNodeRef) to create the tp.

var tp1 = new dijit.TitlePane({
  //options
}, 'myTitlePane');
//always call startup
tp1.startup();

dojo tp docs:
http://dojotoolkit.org/reference-guide/1.9/dijit/TitlePane.html
http://dojotoolkit.org/api/?qs=1.9/dijit/TitlePane

MathewSuran

That works perfect in HTML. How would I alter the js code I provided before to link the new code in HTML?

MathewSuran

I see, Ill give it a shot. Thanks!

BenFousek

I was suggesting using a title pane in that way for the layer slider.

MathewSuran

Thanks for the suggestion but the project is 95% complete already. I will start learning AMD for our next projects but due to project deadlines, I dont have time to convert the entire project over to AMD. With that being said, unfortunately I have to stick with legacy at the moment.

Maybe I am not looking at this correctly but the example you gave me is of a basemap gallery?

BenFousek

First: I suggest converting to AMD style coding. Do it now while you're just getting started instead of learning legacy.

I would just place the title pane with the slider in the map like this example. I don't know what the entire app looks like or functions. But it seems like having easy access to the slider whether the left pane is open or not might be easier. It certainly would be a lot simpler than dealing with a floating pane or something else dependent on the visibility of the left pane.

MathewSuran

Sure, no prob.
if (displayLeftPanel()) {
        //create left panel
        var bc = dijit.byId('leftPane');
        esri.show(dojo.byId('leftPane'));
        var cp = new dijit.layout.ContentPane({
            id: 'leftPaneHeader',
            region: 'top',
            style: 'height:10px;',
            content: esri.substitute({
                close_title: i18n.panel.close.title,
                close_alt: i18n.panel.close.label
            }, '<div style="float:right;clear:both;" id="paneCloseBtn"><a title=${close_title} alt=${close_alt} href="JavaScript:hideLeftPanel();"><img src=images/closepanel.png border="0"/></a></div>')
        });
        bc.addChild(cp);
        var cp2 = new dijit.layout.StackContainer({
            id: 'stackContainer',
            region: 'center',
            style: 'height:98%;'
        });
        bc.addChild(cp2);
        if (configOptions.embed) {
            dojo.style(dojo.byId("leftPane"), "width", configOptions.leftpanewidth);
        } else {
            dojo.style(dojo.byId("leftPane"), "width", configOptions.leftpanewidth + "px");
        }
        //Add the Editor Button and Panel
        if (configOptions.displayeditor == 'true' || configOptions.displayeditor === true) {
            addEditor(editLayers); //only enabled if map contains editable layers
        }
        //Add the Detail button and panel
        if (configOptions.displaydetails === true && configOptions.description !== "") {
            var detailTb = new dijit.form.ToggleButton({
                showLabel: true,
                label: i18n.tools.details.label,
                title: i18n.tools.details.title,
                checked: true,
                iconClass: 'esriDetailsIcon',
                id: 'detailButton'
            }, dojo.create('div'));
            dojo.byId('webmap-toolbar-left').appendChild(detailTb.domNode);
            dojo.connect(detailTb, 'onClick', function () {
                navigateStack('detailPanel');
            });
            var detailCp = new dijit.layout.ContentPane({
                title: i18n.tools.details.title,
                selected: true,
                region: 'center',
                id: "detailPanel"
            });
            var tpcontent = dojo.create("div", {});
            var tp1 = new dijit.TitlePane({title: "Annual Percent Chance of Occurrence", content: tpcontent});

            var rulerLabelTop = new dijit.form.HorizontalRuleLabels({
                container: 'topDecoration',
                style: "height:1.5em;font-size:75%;color:gray;margin:0 12px;",
                count: 5,
                labels: ["2-yr", "5-yr", "10-yr", "20-yr", "50-yr"]
            });
            tp1.addChild(rulerLabelTop);
            var ruler = new dijit.form.HorizontalRule({
                count: 5,
                style: "height:5px;margin:0 14px;"
            });
            tp1.addChild(ruler);
            var slider = new dijit.form.HorizontalSlider({
                name: "slider-1",
                showButtons: false,
                value: 0,
                minimum: 0,
                maximum: 4,
                discreteValues: 5,
                intermediateChanges: true,
                style: "",
                onChange: function(value){
                    var list = ['02','05','10','20','50'];
                    if (dojo.some(SBDELayers, function(s) { return s.visible; })) {
                        dojo.forEach(SBDELayers, function(layer) {
                            layer.setVisibility(false);
                            map2.getLayer(layer.id).setVisibility(false);
                        });
                        map.getLayer('SBDE-'+list[value]).setVisibility(true);
                        map2.getLayer('SBDE-'+list[value]).setVisibility(true);
                    }
                    if (dojo.some(SBDLayers, function(s) { return s.visible; })) {
                        dojo.forEach(SBDLayers, function(layer) {
                            layer.setVisibility(false);
                            map2.getLayer(layer.id).setVisibility(false);
                        });
                        map.getLayer('SBD-'+list[value]).setVisibility(true);
                        map2.getLayer('SBD-'+list[value]).setVisibility(true);
                    }
                }
            });
            tp1.addChild(slider);
            var rulerLabelBottom = new dijit.form.HorizontalRuleLabels({
                container: 'topDecoration',
                style: "height:1.5em;font-size:75%;color:gray;",
                count: 5,
                labels: ["5-year", "20-year"]
            });

BenFousek

I can't quite visualize what's going on with the left pane. Could you post the code for it?

Also what does the "layer slider" do?

Disclaimer/splash screen:
[HTML]<body>
<div id="loading" style="z-index:9999;position:absolute;top:0;right:0;bottom:0;left:0;padding:30px;background-color:#FFF;">
    <h1>My Map</h1>
    <h3>Disclaimer</h3>
    <p>Blah blah blah...</p>
    <p>
        <button id="accept-btn">Accept</button>
    </p>
</div>

</body>[/HTML]

on.once(dom.byId('accept-btn'), 'click', function () {
    var fadeOut = baseFx.fadeOut({
        node: 'loading',
        duration: 1000
    });
    on(fadeOut, 'End', function () {
        domConst.destroy('loading');
    });
    fadeOut.play();
});

Basic example, but a jumping off point.

requires: dojo/on, dojo/dom, dojo/dom-construct and dojo/_base/fx

MathewSuran

Thanks for the reply!
How it is set up as of now is the disclaimer is utilizing dojox.layout.FloatingPane.
The left pane has 2 sections to it, one of which I want to keep. I would like to have the layer slider docked to the top left of the map pane (to the right of the left pane) so it is visible if I close the left pane. Right now I have to have the left pane open in order to utilize the sliders functions. Since I have other tools that I want to be able to switch to, you can see the issue.
I am just starting out so I am not too clear on how to do the last part you suggested about making the disclaimer an absolute positioned div. Would you be able elaborate how to set that up?

BenFousek

You can have as many floating panes as you want at any time.

Are you using dojox/layout/FloatingPane or something else?

So you want to completely replace the left sliding pane with a floating pane? Or do you want to dock/undock the layer controls between the left pane and a floating pane?

I'm not sure a floating pane is the best option for a disclaimer. Why not an absolute positioned div over the entire window or a dialog. I prefer the former. Simple html and css with a single click event. Add in dojo/_base/fx to fade it out and then destroy the dom node. Dialog works too. With a dialog you need to override the _onKey event to prevent user from escaping out of the dialog and hide the close button. Still pretty simple.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.