ALKMaps.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 ALKMaps.Control.OverviewMap constructor.

Inherits from

Summary
ALKMaps.Control.OverviewMapThe 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{ALKMaps.Map} A reference to the overview map itself.
size{ALKMaps.Size} The overvew map size in pixels.
layers{Array(ALKMaps.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).
Constructor
ALKMaps.Control.OverviewMapCreate a new overview map
Functions
destroyDeconstruct the control
drawRender the control in the browser.
baseLayerDraw
rectDragHandle extent rectangle drag
mapDivClickHandle browser events
onButtonClick
maximizeControlUnhide the control.
minimizeControlHide all the contents of the control, shrink the size, add the maximize icon
showToggleHide/Show the toggle depending on whether the control is minimized
updateUpdate the overview map after layers move.
isSuitableOverviewDetermines if the overview map is suitable given the extent and resolution of the main map.
createMapConstruct the map that this control contains
updateRectToMapUpdates the extent rectangle position and size to match the map extent
updateMapToRectUpdates the map extent to match the extent rectangle position and size
setRectPxBoundsSet extent rectangle pixel bounds.
getRectBoundsFromMapBoundsGet the rect bounds from the map bounds.
getMapBoundsFromRectBoundsGet the map bounds from the rect bounds.
getLonLatFromOverviewPxGet a map location from a pixel location
getOverviewPxFromLonLatGet a pixel location from a map location

Properties

element

{DOMElement} The DOM element that contains the overview map

ovmap

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

size

{ALKMaps.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(ALKMaps.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.

Constructor

ALKMaps.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 layercalled if unable to complete in the initial draw

rectDrag

rectDrag: function(px)

Handle extent rectangle drag

Parameters

px{ALKMaps.Pixel} The pixel location of the drag.

mapDivClick

mapDivClick: function(evt)

Handle browser events

Parameters

evt{ALKMaps.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{ALKMaps.Event}

minimizeControl

minimizeControl: function(e)

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

Parameters

e{ALKMaps.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{ALKMaps.Bounds}

getRectBoundsFromMapBounds

getRectBoundsFromMapBounds: function(lonLatBounds)

Get the rect bounds from the map bounds.

Parameters

lonLatBounds{ALKMaps.Bounds}

Returns

{ALKMaps.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{ALKMaps.Bounds}

Returns

{ALKMaps.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{<ALKMaps.Pixel>|Object} ALKMaps.Pixel or an object with a ‘x’ and ‘y’ properties.

Returns

{Object} Location which is the passed-in overview map ALKMaps.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{<ALKMaps.LonLat>|Object} ALKMaps.LonLat or an object with a ‘lon’ and ‘lat’ properties.

Returns

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

Instances of ALKMaps.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