[GIS] How to customize the background-image of LayerSwitcher in OpenLayers

openlayers-2

How can I override the image used (sign '+' with a blue half circle) for the LayerSwitcher Control in OpenLayers?
Is it possible to do so with background-image in css? I see nothing related to this image in the default style.css…

Best Answer

The LayerSwitcher control does not have an image. It is a Div with a particular background color. You can override it using CSS.

I can use the following CSS to make it red

.layersDiv {
    background-color: red !important;
}

The plus icon that you see when the control is minimized, is an image. You can replace it, if required.

The normal icon is at ../img/layer-switcher-maximize.png You will need to replace it, if you want to style it.

Related Solutions

[GIS] How to display KML image overlays in OpenLayers

It's exceedingly unlikely that this will work well in OpenLayers. The KML GroundOverlay extension is more or less tailored toward Google Earth and Google Maps, which has the ability to tile and reproject images behind the scenes - something that OpenLayers can't (and will never be able to) do.

It'd be a much better idea to make a tileset based on the image on hand, and use it was XYZ or TMS.

[GIS] How to use Google Default Pan/Zoom controls in openlayers

You can apply a new theme for controls simply by giving it the right url, like so :

OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/";

From what I know, the GoogleMap style like doesn't exist yet so you will have to design it.

Here is the source for the theme given above: https://github.com/developmentseed/openlayers_themes

Best Answer

Related Solutions

[GIS] How to display KML image overlays in OpenLayers

[GIS] How to use Google Default Pan/Zoom controls in openlayers

Related Question