ThinkGeo.com    |     Documentation    |     Premium Support

Show legend in my map

#1

Hello,


I want to show a legend (an image) in my map by using an AdornmentLayer. And I want to link it with a raster.


So I try to use a GdiPlusRasterLayer for my raster and the GraphicLogoAdornmentLayer found in the Code Community for my legend and add the two layers in an LayerOverlay for show/hide them at the same time with the OverlaySwitcher.


But my legend isn't show like I want :



I want it in the bottom right of my map.


How can I fix my problem ?


Thanks.



#2

Hi, Pierre


I am sure that your problem is caused by that you use the default MultipleTile of TileType for LayerOverlay, so the legend will display on every tile image. So you could set TileType to SingleTile in order to fix this problem. The code likes below:




  LayerOverlay overlay = new LayerOverlay();
        overlay.IsBaseOverlay = false;
        overlay.TileType = TileType.SingleTile;
        GraphicLogoAdornmentLayer logoAdornmentLayer = new  GraphicLogoAdornmentLayer();
        logoAdornmentLayer.LogoImage = new Bitmap(@"ThinkGeo.ico");
        overlay.Layers.Add(logoAdornmentLayer);
        Map1.CustomOverlays.Add(overlay);


Thanks,


Khalil



#3

Hello,


Thanks for your answer. I didn't think of trying this option !


I would like to know if it's possible to have only one selected overlay in the overlay switcher ?


Thanks in advance.



#4

Hello again,


I found by myself how to do (only one overlay selected) :



var overlaySwitcher;

var OnMapCreated = function(map) {
overlaySwitcher = map.getControlsByClass("OpenLayers.Control.LayerSwitcher")[0];

if (overlaySwitcher) {
var i;
for (i = 0; i < overlaySwitcher.dataLayers.length; i++) {
var layer = overlaySwitcher.dataLayers[i].layer;

layer.events.register('visibilitychanged', this, layerChanged);

}
}

}

function layerChanged(e) {

var layerClicked = e.object;
var isLayerClickedVisible = layerClicked.getVisibility();

if (overlaySwitcher) {
var i;                
for (i = 0; i < overlaySwitcher.dataLayers.length; i++) {
var layer = overlaySwitcher.dataLayers[i].layer;

if (layer.name != layerClicked.name && isLayerClickedVisible) {
layer.setVisibility(false);
}

}
}
} 

This code works but if there is something easier to do, I'm open to your propositions.


Thanks.



#5

Hi, Pierre


The IsVisibleInOverlaySwitcher property of Overlay may help you to implement your requirments. You could refer the code below:




                LayerOverlay overlay = new LayerOverlay("Overlay");
                overlay.Layers.Add(worldLayer);
                overlay.IsBaseOverlay = false;
                overlay.IsVisibleInOverlaySwitcher = false;
                Map1.CustomOverlays.Add(overlay);


Thanks,


Khalil



#6

Hello Khalil,


I know that property but it useless in my case.


I want to display all my overlays in the overlay switcher but I want that it's just it one selected (visible). The checkboxes are acted like radio buttons.


And I want all of this on the client side.



#7

Pierre,



Yes, your method is right and works well. I have two suggestion for you. One  you could override the redraw function of LayerSwitcher, and you just need to modify the type of all input element to radio, that's so easy, but you need to place many code on the client-side. The other one is to override the function of onInputClick in LayerSwitcher control. You could refer the code below:



            OpenLayers.Control.LayerSwitcher.prototype.onInputClick = function(e) {
                if (!this.inputElem.disabled) {
                    if (this.inputElem.type == "radio") {
                        this.inputElem.checked = true;
                        this.layer.map.setBaseLayer(this.layer);
                    } else {
                        this.inputElem.checked = !this.inputElem.checked;
                        for (i = 0; i < this.layerSwitcher.dataLayers.length; i++) {
                            var layerEntry = this.layerSwitcher.dataLayers[i];
                            if (layerEntry.layer.name != this.layer.name) {
                                layerEntry.inputElem.checked = false;
                            }
                            else {
                                layerEntry.inputElem.checked = this.inputElem.checked;
                            }
                            this.layerSwitcher.updateMap();
                        }
                    }
                }
                OpenLayers.Event.stop(e);
            }

Thanks,

Khalil