[GIS] Change overview map postion in map from right to left

openlayers-2

I am using OpenLayers 2.12. I have added an OpenLayers OverviewMap control. This overview map tool is located on the right side of the map panel by default. I would like it to be positioned on the left side instead (see image).

Image showing overview map control on the left side of the map

How can I achieve this?

Best Answer

The overview map layout is controlled by the theme style, you can change the default styles in openlayers/theme/default/style.css.

Find following two style items:

.olControlOverviewMapContainer {
    position: absolute;
    bottom: 0;
    right: 0;
}

.olControlOverviewMapMinimizeButton,
.olControlOverviewMapMaximizeButton {
    height: 18px;
    width: 18px;
    right: 0;
    bottom: 80px;
    cursor: pointer;
}

Change the right: 0 to left: 0, that is:

.olControlOverviewMapContainer {
    position: absolute;
    bottom: 0;
    left: 0;
}

.olControlOverviewMapMinimizeButton,
.olControlOverviewMapMaximizeButton {
    height: 18px;
    width: 18px;
    left: 0;
    bottom: 80px;
    cursor: pointer;
}

EDIT:

For the overview map maximize button symbol, it is hard coded inside openlayers js library which use the image 'img/layer-switcher-maximize.png'. However, simply modifying this image (rotate 180 deg) is not a good idea because the layer switcher is also using the same image. I would suggest to create a new image (just rotate layer-siwtcher-maximize.png 180 deg to get the new image, or maybe you can create a new one) and rename it to 'overview-map-maximize.png', then change the code in openlayers/lib/OpenLayers/Control/OverviewMap.js. Change the following line:

 var img = OpenLayers.Util.getImageLocation('layer-switcher-maximize.png');

to:

 var img = OpenLayers.Util.getImageLocation('overview-map-maximize.png');

The minimize button image is of no problem since it's symmetric.

Related Question