# OpenLayers.Control.OverviewMap

The OverMap control creates a small overview map, useful to display the extent of a zoomed map and your main map and provide additional navigation options to the User. By default the overview map is drawn in the lower right corner of the main map. Create a new overview map with the OpenLayers.Control.OverviewMap constructor.

#### Inherits from

- OpenLayers.Control

Summary

OpenLayers.Control.OverviewMap | The OverMap control creates a small overview map, useful to display the extent of a zoomed map and your main map and provide additional navigation options to the User.
Properties |
element | {DOMElement} The DOM element that contains the overview map
ovmap | {OpenLayers.Map} A reference to the overview map itself.
size | {OpenLayers.Size} The overvew map size in pixels.
layers | {Array(OpenLayers.Layer)} Ordered list of layers in the overview map.
minRectSize | {Integer} The minimum width or height (in pixels) of the extent rectangle on the overview map.
minRectDisplayClass | {String} Replacement style class name for the extent rectangle when minRectSize is reached.
minRatio | {Float} The ratio of the overview map resolution to the main map resolution at which to zoom farther out on the overview map.
maxRatio | {Float} The ratio of the overview map resolution to the main map resolution at which to zoom farther in on the overview map.
mapOptions | {Object} An object containing any non-default properties to be sent to the overview map’s map constructor.
autoPan | {Boolean} Always pan the overview map, so the extent marker remains in the center.
handlers | {Object}
resolutionFactor | {Object}
maximized | {Boolean} Start as maximized (visible).
maximizeTitle | {String} This property is used for showing a tooltip over the maximize div.
minimizeTitle | {String} This property is used for showing a tooltip over the minimize div.
Constructor |
OpenLayers.Control.OverviewMap | Create a new overview map
Functions |
destroy | Deconstruct the control
draw | Render the control in the browser.
baseLayerDraw |
rectDrag | Handle extent rectangle drag
mapDivClick | Handle browser events
onButtonClick |
maximizeControl | Unhide the control.
minimizeControl | Hide all the contents of the control, shrink the size, add the maximize icon
showToggle | Hide/Show the toggle depending on whether the control is minimized
update | Update the overview map after layers move.
isSuitableOverview | Determines if the overview map is suitable given the extent and resolution of the main map.
createMap | Construct the map that this control contains
updateRectToMap | Updates the extent rectangle position and size to match the map extent
updateMapToRect | Updates the map extent to match the extent rectangle position and size
setRectPxBounds | Set extent rectangle pixel bounds.
getRectBoundsFromMapBounds | Get the rect bounds from the map bounds.
getMapBoundsFromRectBounds | Get the map bounds from the rect bounds.
getLonLatFromOverviewPx | Get a map location from a pixel location
getOverviewPxFromLonLat | Get a pixel location from a map location

### Properties

### element

{DOMElement} The DOM element that contains the overview map

### ovmap

{OpenLayers.Map} A reference to the overview map itself.

### size

{OpenLayers.Size} The overvew map size in pixels. Note that this is the size of the map itself - the element that contains the map (default class name olControlOverviewMapElement) may have padding or other style attributes added via CSS.

### layers

{Array(OpenLayers.Layer)} Ordered list of layers in the overview map. If none are sent at construction, the base layer for the main map is used.

### minRectSize

{Integer} The minimum width or height (in pixels) of the extent rectangle on the overview map. When the extent rectangle reaches this size, it will be replaced depending on the value of the minRectDisplayClass property. Default is 15 pixels.

### minRectDisplayClass

{String} Replacement style class name for the extent rectangle when minRectSize is reached. This string will be suffixed on to the displayClass. Default is “RectReplacement”.

#### Example CSS declaration

>     .olControlOverviewMapRectReplacement {
>         overflow: hidden;
>         cursor: move;
>         background-image: url("img/overview_replacement.gif");
>         background-repeat: no-repeat;
>         background-position: center;
>     }

### minRatio

{Float} The ratio of the overview map resolution to the main map resolution at which to zoom farther out on the overview map.

### maxRatio

{Float} The ratio of the overview map resolution to the main map resolution at which to zoom farther in on the overview map.

### mapOptions

{Object} An object containing any non-default properties to be sent to the overview map’s map constructor. These should include any non-default options that the main map was constructed with.

### autoPan

{Boolean} Always pan the overview map, so the extent marker remains in the center. Default is false. If true, when you drag the extent marker, the overview map will update itself so the marker returns to the center.

### handlers

{Object}

### resolutionFactor

{Object}

### maximized

{Boolean} Start as maximized (visible). Defaults to false.

### maximizeTitle

{String} This property is used for showing a tooltip over the maximize div. Defaults to “” (no title).

### minimizeTitle

{String} This property is used for showing a tooltip over the minimize div. Defaults to “” (no title).

### Constructor

### OpenLayers.Control.OverviewMap

Create a new overview map

#### Parameters

options | {Object} Properties of this object will be set on the overview map object. Note, to set options on the map object contained in this control, set mapOptions as one of the options properties.

### Functions

### destroy

> destroy: function()

Deconstruct the control

### draw

> draw: function()

Render the control in the browser.

### baseLayerDraw

> baseLayerDraw: function()

Draw the base layer | called if unable to complete in the initial draw

### rectDrag

> rectDrag: function( | px | )

Handle extent rectangle drag

#### Parameters

px | {OpenLayers.Pixel} The pixel location of the drag.

### mapDivClick

> mapDivClick: function( | evt | )

Handle browser events

#### Parameters

evt | {OpenLayers.Event} evt

### onButtonClick

> onButtonClick: function( | evt | )

#### Parameters

evt | {Event}

### maximizeControl

> maximizeControl: function( | e | )

Unhide the control. Called when the control is in the map viewport.

#### Parameters

e | {OpenLayers.Event}

### minimizeControl

> minimizeControl: function( | e | )

Hide all the contents of the control, shrink the size, add the maximize icon

#### Parameters

e | {OpenLayers.Event}

### showToggle

> showToggle: function( | minimize | )

Hide/Show the toggle depending on whether the control is minimized

#### Parameters

minimize | {Boolean}

### update

> update: function()

Update the overview map after layers move.

### isSuitableOverview

> isSuitableOverview: function()

Determines if the overview map is suitable given the extent and resolution of the main map.

### createMap

> createMap: function()

Construct the map that this control contains

### updateRectToMap

> updateRectToMap: function()

Updates the extent rectangle position and size to match the map extent

### updateMapToRect

> updateMapToRect: function()

Updates the map extent to match the extent rectangle position and size

### setRectPxBounds

> setRectPxBounds: function( | pxBounds | )

Set extent rectangle pixel bounds.

#### Parameters

pxBounds | {OpenLayers.Bounds}

### getRectBoundsFromMapBounds

> getRectBoundsFromMapBounds: function( | lonLatBounds | )

Get the rect bounds from the map bounds.

#### Parameters

lonLatBounds | {OpenLayers.Bounds}

#### Returns

{OpenLayers.Bounds}A bounds which is the passed-in map lon/lat extent translated into pixel bounds for the overview map

### getMapBoundsFromRectBounds

> getMapBoundsFromRectBounds: function( | pxBounds | )

Get the map bounds from the rect bounds.

#### Parameters

pxBounds | {OpenLayers.Bounds}

#### Returns

{OpenLayers.Bounds} Bounds which is the passed-in overview rect bounds translated into lon/lat bounds for the overview map

### getLonLatFromOverviewPx

> getLonLatFromOverviewPx: function( | overviewMapPx | )

Get a map location from a pixel location

#### Parameters

overviewMapPx | {<OpenLayers.Pixel>|Object} OpenLayers.Pixel or an object with a ‘x’ and ‘y’ properties.

#### Returns

{Object} Location which is the passed-in overview map OpenLayers.Pixel, translated into lon/lat by the overview map. An object with a ‘lon’ and ‘lat’ properties.

### getOverviewPxFromLonLat

> getOverviewPxFromLonLat: function( | lonlat | )

Get a pixel location from a map location

#### Parameters

lonlat | {<OpenLayers.LonLat>|Object} OpenLayers.LonLat or an object with a ‘lon’ and ‘lat’ properties.

#### Returns

{Object} Location which is the passed-in OpenLayers.LonLat, translated into overview map pixels

Instances of OpenLayers.Map are interactive maps embedded in a web page.
Instances of this class represent a width/height pair
{Integer} The minimum width or height (in pixels) of the extent rectangle on the overview map.

> destroy: function()

Deconstruct the control

> draw: function()

Render the control in the browser.

> baseLayerDraw: function()

> rectDrag: function( | px | )

Handle extent rectangle drag

> mapDivClick: function( | evt | )

Handle browser events

> onButtonClick: function( | evt | )

> maximizeControl: function( | e | )

Unhide the control.

> minimizeControl: function( | e | )

Hide all the contents of the control, shrink the size, add the maximize icon

> showToggle: function( | minimize | )

Hide/Show the toggle depending on whether the control is minimized

> update: function()

Update the overview map after layers move.

> isSuitableOverview: function()

Determines if the overview map is suitable given the extent and resolution of the main map.

> createMap: function()

Construct the map that this control contains

> updateRectToMap: function()

Updates the extent rectangle position and size to match the map extent

> updateMapToRect: function()

Updates the map extent to match the extent rectangle position and size

> setRectPxBounds: function( | pxBounds | )

Set extent rectangle pixel bounds.

> getRectBoundsFromMapBounds: function( | lonLatBounds | )

Get the rect bounds from the map bounds.

> getMapBoundsFromRectBounds: function( | pxBounds | )

Get the map bounds from the rect bounds.

> getLonLatFromOverviewPx: function( | overviewMapPx | )

Get a map location from a pixel location

> getOverviewPxFromLonLat: function( | lonlat | )

Get a pixel location from a map location
Create a new overview map
Controls affect the display or behavior of the map.
{String} Replacement style class name for the extent rectangle when minRectSize is reached.
{Object} An object containing any non-default properties to be sent to the overview map’s map constructor.
This class represents a screen coordinate, in x and y coordinates
Utility functions for event handling.
Instances of this class represent bounding boxes.
Close