Community
Select to view content in your preferred language

Popup without Info Window

642
1
12-15-2012 06:15 PM
IanHamilton
by
Deactivated User
‎12-15-2012 06:15 PM
Hi, I am trying to understand digit popup functionality. I have used it when set to the InfoWindow, but I believe this means there can only be one popup visible at a time.

I want to "pop up" a pane to include layers to then include in my printed map.

So I do have to associate the popup with the info window?

If not, could anyone provide an example of popping up and pane from a button.
I can't find an example anywhere.

Thanks,

Ian
0 Kudos
1 Reply
JakeSkinner
by Esri Esteemed Contributor
Esri Esteemed Contributor
‎12-17-2012 05:29 AM
Hi Ian,

Here is an example that may help you get started on how to show/hide a pane using a button:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css"> 
        <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" /> 
 
        <style type="text/css" media="screen">
            html, body { 
                height: 99%; 
                width: 99%; 
                margin: 0; 
                padding: 5px; 
             }
            
               #content{
                 width: 100%; 
                 height: 100%; 
                 margin: 0;
                 border: solid #421B14 1px;
               }  
            
                #leftPane{
                    padding:2px;
                    color:#421b14;
                    width:15%;
                    height:98%;
                    text-align:center;
                    border: solid #421B14 2px;
                }
                
                #map {
                    border:solid 1px #D3D3D3;
                    width:81%;
                    height:98%;
                }   
                
                #header{
                    height:50px;
                    border: solid #421B14 2px;
                }
        </style>
        
        <script type="text/javascript">
            var djConfig = {parseOnLoad: true};
        </script>
        <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
        <script type="text/javascript">           
            dojo.require("esri.map");
            dojo.require("dijit.layout.BorderContainer");
            dojo.require("dijit.layout.ContentPane");
            dojo.require("dijit.layout.StackContainer");
            
            var map
            
            function init(){
                var initialExtent = new esri.geometry.Extent({"xmin":-8396836.868209211,"ymin":4835062.442691721,"xmax":-8328196.416809216,"ymax":4891396.53253782,"spatialReference":{"wkid":102100}});
                map = new esri.Map("map", {extent: initialExtent})
                
                var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(  
                "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
                      
                dojo.connect(map, "onLoad", function(theMap){
                    dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
                    createButton();       
                    });
               
                map.addLayer(tiledMapServiceLayer); 
                
            } 
            
            function createButton(){          
               var paneButton = new dijit.form.ToggleButton({
                   id:"dojoPane",
                   showlabel: true,
                   checked: false,
                   label: "Show Pane",
                   onChange: function(val){
                       if (val){
                           this.set('label', "Hide Pane");
                           showDiv();
                       }
                       else {
                           this.set('label', "Show Pane");
                           hideDiv();
                       }
                   }
               }).placeAt(dojo.byId("header"));
            }
            
            
            function showDiv() {
               dijit.byId("leftPane").domNode.style.display = 'block';
            }
            
            function hideDiv(){
                dijit.byId("leftPane").domNode.style.display = 'none';
            }                      
            
            dojo.addOnLoad(init);
        </script>
    </head>
    <body class="claro">
        <div id="content" dojotype="dijit.layout.BorderContainer">
            <div id="header" dojotype="dijit.layout.ContentPane" region="top"></div>
            <div id="leftPane" style="display: none;" dojotype="dijit.layout.ContentPane" region="left"></div>
            <div id="map" dojotype="dijit.layout.ContentPane" region="right"></div>
        </div>
    </body>
</html>
0 Kudos