ThinkGeo.com    |     Documentation    |     Premium Support

Creating Custom Overlay Switchers

#1

We would like to create some panels like your Overlay Switcher that will close to the small icon that when when you click will open in to a panel. We have the ability to do this in JQuery but we would like for our new panels to match the style of the existing Map Suite Overlay Switcher.


Is there an way to implement new Overlay Switcher panels like this and if so how can we write our own?


In addition we would like to be able to control where the small icon displays as well as where the panel opens to, including the existing Overlay Switcher. Is this something we can control?



Custom Layer/Overlay Switcher
#2

Hi Steve,


Actually, OverlaySwitcher is easy to implement using JavaScript. Here are two important JavaScript functions provided by OpenLayers.


One is Map.setBaseLayer(layer) which is to switch between base overlays; you can find the reference at:

dev.openlayers.org/releases/...tBaseLayer


While another one is Layer.display(isVisible) which is to set a dynamic overlay’s visibility; you can find the reference at:

dev.openlayers.org/releases/...er.display


On the other hand, you need to be aware of the states of the client states; if you create your own OverlaySwitcher, once you change it, there maybe some issues about restoring the states of your OverlaySwitcher.


Here is a sample for you to implement the OverlayLayerSwitcher; please feel free to change it.


If you have any questions please let me know.


Thanks,

Howard



824-Overlays.zip (3.1 KB)

#3

Hi, 
  
 This looks to be exactly what I was looking for also. 
 I don’t see how you can change the image and location however.  
  
 Is it possible to create images with tooltips in the closed state - also is it better to just extend the overlay manager - for example to include layers to switch on/off rather than write a whole new version etc. 
  
 I wasn’t aware it used the Openlayers API - does this mean all these functions are available to us with TG? If so how does using these differ from using the server side AJAX methods (Pros/cons etc). 
  
 Thanks, 
 Andy

#4

Andy, 



In the last demo, <Description:DescriptionPanel /> is a web control we made which helps us change images and location for the panel. Please have a try if you need it.



I’m not sure the meaning by “Is it possible to create images with tooltips in the closed state”; could you provide us more information?



Actually, to extend the OverlaySwitcher is another way to go, but you need to know the detail algorism of OpenLayers. For example here is a way to rewrite the activeColor’s default color for OpenLayers.ControlLayerSwitcher.OpenLayers.Control.LayerSwitcher =
  OpenLayers.Class(OpenLayers.Control. LayerSwitcher, {
    activeColor : ‘red’
})

In your scenario, you need to rewrite its draw(), redraw(), loadControl() function which is more complicated than write a new one and your page still maintains a lot of JavaScript.



I used the OpenLayers’ API in my last Demo but not much. It contains some OpenLayers object such as tgMap, layers etc and OpenLayers function such as tgMap.setBaseLayer(layer), layer.display(true). All OpenLayers’ API and ThinkGeo’s client API are available to you. 



We don’t have public server side AJAX method; OpenLayers is an absolute JavaScript library which helps you using AJAX; on the other hand, you can call AJAX by ScriptManager, or using your own AJAX framework. It has no limits using JavaScript.



Hope it make sense. Please let me know if you have any questions.



Thanks,

Howard



Create sublayers from actual layer