ThinkGeo.com    |     Documentation    |     Premium Support

Popup and OverlaySwitcher

Hi,


I have a map with the overlay switcher tool enabled.


As the user, I minimize the overlay switcher.


Then as the user, I click on a feature and a pop-up appears; however, the overlay switcher is now maximized again.


Is there anyway to keep these two events separate? 


I would like for the overlay switcher to stay minimized as a map popup is displayed.


Thanks,


Treasa



Hi Treasa,


The reason is that the click event on the feature is a server click and this would cause a PostBack. As we knew, the map control is a server control, for OverlaySwitcher, we don’t save state for the maximize/minimize event of the LayerSwitcher, so the result is the control’s layers switcher would be rendered again like the initial state  after the postback. Also the MiniMap perform in the same way.
A workaround is we can do a Ajax call to show the popup with the pure openlayer js rather than caused a post back when clicked on the feature.
Hope it helps.
Thanks,
Johnny

Hi Johnny, 
  
 Is it possible to send a command to minimize/maximize the OverlaySwitcher from the code-behind? Or, to possibly always have the OverlaySwitcher start in minimized mode? 
  
 Thanks, 
 Treasa

 Treasa,


Here is a way to let it start with minimized mode, please have a try: 


        var OnMapCreated = function (map) {


            var layerSwither = map.getControl("LayerSwitcher");


            if (layerSwither) {


                layerSwither.minimizeControl();


            }


        }


Thanks,



Johnny 



Hi Johnny, 
  
 Is it possible to capture the event of when the user minimizes or maximizes the overlay switcher? Either client-side or server-side? 
  
 Thanks, 
 Treasa

 Hi Treasa,


The only way is overwriting these 2 functions on client side, and then add the code you want to execute in these 2 functions,please try the code as following:



        var OnMapCreating = function (map) {
            OpenLayers.Control.LayerSwitcher.prototype.minimizeControl = function (e) {
                //Todo: please add the code when minimize the overlayswitcher control
                // .........
                alert("minimize");

                this.div.style.width = "0px";
                this.div.style.height = "0px";

                this.showControls(true);

                if (e != null) {
                    OpenLayers.Event.stop(e);
                }
            }


            OpenLayers.Control.LayerSwitcher.prototype.maximizeControl = function (e) {
                //Todo: please add the code when maximize the overlayswitcher control
                // .........
                alert("maximize");

                this.div.style.width = "0px";
                this.div.style.width = "";
                this.div.style.height = "";

                this.showControls(false);

                if (e != null) {
                    OpenLayers.Event.stop(e);
                }
            }
        }


 


Best Regards,


Johnny



Hi Johnny, 
  
 This helped tremendously. I used your code in conjunction with a ASP:HiddenField to keep track of the minimized/maximized state of the OverlaySwitcher based on the user’s actions. 
  
 Thanks! 
 Treasa 


Great. If you have any more problems. Please feel free to let us know. 
  
 Best Regards  
  
 Johnny

I am also attempting to track the user opening/closing the layer switcher and keeping that value for later.  I’ve used the above code and when I explicitly call layerswitcher.minimizeControl() the overridden prototype function is called.  However, when the user expands or minimizes the layer switcher with a mouse click, the functions do not get called.  How does one go about listening to these events and wiring them to the prototype functions?

I am not sure if it is best practice or the OpenLayers way, but I solved this problem with the following code: 

    var maxDiv = $("#OpenLayers_Control_MaximizeDiv").click(function () {
var layerSwitcher = Map1.getControl("LayerSwitcher");
layerSwitcher.maximizeControl();
});
var minDiv = $("#OpenLayers_Control_MinimizeDiv").click(function () {
var layerSwitcher = Map1.getControl("LayerSwitcher");
layerSwitcher.minimizeControl();
}); 




I used the earlier examples of function prototyping to define the maximize and minimizeControl functions.

Hi Thomas, 
  
 Great to hear the solution is figured out, and if you have any more question , please feel free to let us know. 
  
 Best Regards 
  
 Summer