Hide Table of Contents
esri
esri/arcgis
esri/dijit
esri/dijit/analysis
esri/dijit/geoenrichment
esri/dijit/geoenrichment/ReportPlayer
esri/geometry
esri/layers
esri/opsdashboard
esri/renderers
esri/symbols
esri/tasks
esri/tasks/datareviewer
esri/tasks/geoenrichment
esri/tasks/locationproviders
Class: OverviewMap
[ AMD Module Require | Legacy Module Require ]
require(["esri/dijit/OverviewMap"], function(OverviewMap) { /* code goes here */ });
Description
(Added at v2.0)
The OverviewMap widget displays the current extent of the map within the context of a larger area. The OverviewMap updates whenever the map extent changes. The extent of the main map is represented in the overview map area as a rectangle. The extent rectangle can be dragged to modify the extent of the main map. The OverviewMap can be displayed several ways:- Attach the overview map to a corner of the main map and hide when not in use.
- Render the overview map in a div element outside the main map window.
- Temporarily maximize the overview map for quick access to far away areas of interest.
At version 3.4, OverviewMap widget supports
WebTiledLayer for basemap.Samples
Search for samples that use this class.Constructors
| Name | Summary |
|---|---|
| new OverviewMap(params, srcNodeRef?) | Creates a new OverviewMap object. |
CSS
esri/dijit/OverviewMap | Download source
Properties
| Name | Type | Summary |
|---|---|---|
| overviewMap | Map | The Map instance displayed in the OverviewMap widget's container. |
Methods
| Name | Return type | Summary |
|---|---|---|
| destroy() | None | Releases the resources used by the dijit. |
| hide() | None | Hide the overview map. |
| resize(size) | None | Resize the widget. |
| show() | None | Show the overview map. |
| startup() | None | Finalizes the creation of the OverviewMap dijit. |
Constructor Details
Creates a new OverviewMap object.
Parameters:
< |
Required | Parameters that define the functionality of the OverviewMap widget. See the parameters information for details. |
< |
Optional | HTML element where the widget should be rendered. |
params properties: < |
Optional | Specifies which corner of the map to attach the OverviewMap dijit. Valid values are: "top-right","bottom-right","bottom-left" and "top-left". The default value is "top-right". |
< |
Optional | Specify the base layer for the overview map. Note that the specified layer must be loaded, verify this using the layer's loaded property. If a base layer is not specified the dijit will use a copy of the main map's base layer. Valid layers are:
|
< |
Optional | Fill color for the extent rectangle. The default value is #000000. |
< |
Optional | The ratio between the size of the overview map and the extent rectangle displayed on the overview map. The default value is 2, meaning the overview map will be at least twice the size of the extent rectangle. |
< |
Optional | Height of the overview map dijit in screen pixels. The default value is 1/4th the height of the map, unless the HTML element referred to by srcNodeRef has a valid size. |
< |
Optional | Unique identifier for the dijit. If specified this can be used with dijit.byId to get a reference to the dijit, or with dojo.byId to get a reference to the DOM node associated with the dijit. |
< |
Required | Reference to the map. The map parameter is required. |
< |
Optional | Defines the visibility of the maximize/restore button. When true, the button is visible. The default value is false. |
< |
Optional | Opacity of the extent rectangle, defined as a number between 0 (invisible) and 1 (opaque). The default value is 0.5. |
< |
Optional | Specifies the initial visibility of the overview map. The default value is false. |
< |
Optional | Width of the overview map dijit in screen pixels. The default value is 1/4th the width of the map, unless the HTML element referred to by srcNodeRef has a valid size. |
Sample:
Default configuration of the OverviewMap dijit.
require([
"esri/map", "esri/dijit/OverviewMap", ...
], function(Map, OverviewMap, ... ) {
var map = new Map( ... );
var overviewMapDijit = new OverviewMap({
map: map
});
...
});
Define additional input paramters.
require([
"esri/map", "esri/dijit/OverviewMap", ...
], function(Map, OverviewMap, ... ) {
var map = new Map( ... );
var overviewMapDijit = new OverviewMap({
map: map,
attachTo: "bottom-right",
color:" #D84E13",
opacity: .40
});
...
});
Render the OverviewMap dijit outside the main map.
require([
"esri/map", "esri/dijit/OverviewMap", "dojo/dom", ...
], function(Map, OverviewMap, dom, ... ) {
var map = new Map( ... );
var globals;
globals.overviewMapDijit = new OverviewMap({
map: map
}, dom.byId('overviewMapDiv'));
...
});
Property Details
<Map
MapThe Map instance displayed in the OverviewMap widget's container. This is a separate Map from the Map referenced by the overview map. (Added at v3.14)
Method Details
Releases the resources used by the dijit. Call this method when an instance of this dijit is no longer needed.
Resize the widget. (Added at v3.10)
Parameters:
< |
Required | Object containing width and height of the desired size. See the object specifications table below for the structure of the size object. |
Finalizes the creation of the OverviewMap dijit. Call this method after the constructor for the dijit is called and before users interact with the dijit.
Sample:
require([
"esri/dijit/OverviewMap", ...
], function(OverviewMap, ... ) {
var overviewMapDijit = new OverviewMap({
map: map
});
overviewMapDijit.startup();
...
});