Hide Table of Contents
esri/dijit/util
esri/layer/pixelFilters
esri/process
esri/support
esri/workers
Class: OverviewMap

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

NameSummary
new OverviewMap(params, srcNodeRef?)Creates a new OverviewMap object.

CSS

esri/dijit/OverviewMap | Download source

Properties

NameTypeSummary
overviewMapMapThe Map instance displayed in the OverviewMap widget's container.

Methods

NameReturn typeSummary
destroy()NoneReleases the resources used by the dijit.
hide()NoneHide the overview map.
resize(size)NoneResize the widget.
show()NoneShow the overview map.
startup()NoneFinalizes the creation of the OverviewMap dijit.
Constructor Details

new OverviewMap(params, srcNodeRef?)

Creates a new OverviewMap object.
Parameters:
<Object> params Required Parameters that define the functionality of the OverviewMap widget. See the parameters information for details.
<Node | String> srcNodeRef Optional HTML element where the widget should be rendered.
params properties:
<String> attachTo 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".
<Layer> baseLayer 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:
  • ArcGISTiledMapServiceLayer
  • ArcGISDynamicMapServiceLayer
  • ArcGISImageServiceLayer
  • WebTiledLayer
  • VETiledLayer
  • OpenStreetMapLayer
<String> color Optional Fill color for the extent rectangle. The default value is #000000.
<Number> expandFactor 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.
<Number> height 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.
<String> id 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.
<Map> map Required Reference to the map. The map parameter is required.
<Boolean> maximizeButton Optional Defines the visibility of the maximize/restore button. When true, the button is visible. The default value is false.
<Number> opacity Optional Opacity of the extent rectangle, defined as a number between 0 (invisible) and 1 (opaque). The default value is 0.5.
<Boolean> visible Optional Specifies the initial visibility of the overview map. The default value is false.
<Number> width 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> overviewMap

The 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

destroy()

Releases the resources used by the dijit. Call this method when an instance of this dijit is no longer needed.

hide()

Hide the overview map. (Added at v3.1)

resize(size)

Resize the widget. (Added at v3.10)
Parameters:
<Object> size Required Object containing width and height of the desired size. See the object specifications table below for the structure of the size object.
Object Specifications:
<size>
<Number> h Required Specified height value.
<Number> w Required Specified width value.

show()

Show the overview map. (Added at v3.1)

startup()

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();
  ...
});
Show Modal