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

require(["esri/dijit/InfoWindow"], function(InfoWindow) { /* code goes here */ });

Description

(Added at v1.0)
An InfoWindow is an HTML popup. It often contains the attributes of a Graphic. Prior to version 3.4 the info window was the default popup window. After version 3.4 the Popup is the default. To use the InfoWindow as the popup window assign it using the Map's infoWindow constructor option.
require(["dojo/dom-construct", "esri/dijit/InfoWindow"], function(domConstruct , InfoWindow) {
  var infoWindow = new InfoWindow({}, domConstruct.create("div"));
  infoWindow.startup();

  var map = new esri.Map("map", {
    basemap: "streets-vector",
    infoWindow: infoWindow
  });
});
The default behavior on a Graphic is to show the InfoWindow after a click on the Graphic. An InfoTemplate is required for this default behavior. In addition, the InfoWindow can be used to display custom content on the map.

Note: Only one info window is displayed on the map at a time.

Samples

Search for samples that use this class.

Class hierarchy

esri/dijit/InfoWindowBase
|_esri/dijit/InfoWindow

Constructors

NameSummary
new InfoWindow(params, srcNodeRef)Create a new InfoWindow.

Constants

NameDescription
ANCHOR_LOWERLEFTInfoWindow is anchored to the lower left of the point.
ANCHOR_LOWERRIGHTInfoWindow is anchored to the lower right of the point.
ANCHOR_UPPERLEFTInfoWindow is anchored to the upper left of the point.
ANCHOR_UPPERRIGHTInfoWindow is anchored to the upper right of the point.

CSS

esri/dijit/InfoWindow | Download source

Properties

NameTypeSummary
anchorStringPlacement of the InfoWindow with respect to the graphic.
coordsPointThe anchor point of the InfoWindow in screen coordinates.
domNodeObjectThe reference to a DOM node where the info window is constructed.
fixedAnchorStringInfoWindow always show with the specified anchor.
isShowingBooleanDetermines whether the InfoWindow is currently shown on the map.

Methods

NameReturn typeSummary
destroyDijits()NoneHelper method.
hide()NoneHides the InfoWindow.
move(point)NoneMoves the InfoWindow to the specified screen point.
place(value, parentNode)NoneHelper method.
resize(width, height)NoneResizes the InfoWindow to the specified height and width in pixels.
setContent(content)InfoWindowSets the content in the InfoWindow.
setFixedAnchor(anchor)NoneSets the fixed location of the InfoWindow anchor.
setMap(map)NoneThis method is called by the map when the object is set as its info window.
setTitle(title)InfoWindowSets the title for the InfoWindow.
show(point, location, placement?)NoneDisplay the InfoWindow at the specified location.
startup()NoneFinalizes the creation of the widget.
startupDijits()NoneHelper method.
unsetMap(map)NoneThis method is called by the map when the object is no longer the map's info window.

Events

[ On Style Events | Connect Style Event ]
All On Style event listeners receive a single event object. Additionally, the event object also contains a 'target' property whose value is the object which fired the event.

Events

NameEvent ObjectSummary
hideFires when an infoWindow is hidden.
showFires when an InfoWindow is visible.
Constructor Details

new InfoWindow(params, srcNodeRef)

Create a new InfoWindow. (Added at v3.5)
Parameters:
<Object> params Required Specify optional parameters used to create the InfoWindow. View the options list for valid values. This parameter is required but can be null or an empty object.
<Node | String> srcNodeRef Required Reference or id of the HTML element where the widget should be rendered.
Property Details

<String> anchor

Placement of the InfoWindow with respect to the graphic. See the Constants table for values and explanations.
Known values: ANCHOR_LOWERLEFT | ANCHOR_LOWERRIGHT | ANCHOR_UPPERLEFT | ANCHOR_UPPERRIGHT
Default value: ANCHOR_UPPERRIGHT

<Point> coords

The anchor point of the InfoWindow in screen coordinates.

<Object> domNode

The reference to a DOM node where the info window is constructed. Sub-classes should define this property .

<String> fixedAnchor

InfoWindow always show with the specified anchor. See the Constants table for values.

<Boolean> isShowing

Determines whether the InfoWindow is currently shown on the map.
Known values: true | false
Default value: true
Method Details

destroyDijits()

Helper method. Call destroy on dijits that are embedded into the specified node. Sub-classes may need to call this method before executing setContent logic to finalize the destruction of any embedded dijits in the previous content.

hide()

Hides the InfoWindow.
See also: on("hide")

move(point)

Moves the InfoWindow to the specified screen point.
Parameters:
<Point> point Required The new anchor point when moving the InfoWindow.

place(value, parentNode)

Helper method. Place the HTML value as a child of the specified parent node.
Parameters:
<String | HTMLElement> value Required A string with HTML tags or a DOM node.
<Node> parentNode Required The parent node where the value will be placed.

resize(width, height)

Resizes the InfoWindow to the specified height and width in pixels.
Parameters:
<Number> width Required The new width of the InfoWindow in pixels.
<Number> height Required The new height of the InfoWindow in pixels.

setContent(content)

Sets the content in the InfoWindow. View the Format Info Window Content help topic for more details.
Return type: InfoWindow
Parameters:
<Object> content Required The content for the InfoWindow. Can be any valid HTML or DOM element.
Sample:
      

map.infoWindow.setContent(graphic.getContent());

setFixedAnchor(anchor)

Sets the fixed location of the InfoWindow anchor. Valid values are listed in the Constants table.
Parameters:
<String> anchor Required Fixed anchor that cannot be overridden by InfoWindow.show(). See Constants table for values.

setMap(map)

This method is called by the map when the object is set as its info window. The default implementation provided by InfoWindowBase stores the argument to this object in a property named map and is sufficient for most use cases.
Parameters:
<Map> map Required The map object.

setTitle(title)

Sets the title for the InfoWindow. View the Format Info Window Content help topic for more details.
Return type: InfoWindow
Parameters:
<String> title Required The title for the InfoWindow. Can be any valid HTML.
Sample:
      
map.infoWindow.setTitle(title);

show(point, location, placement?)

Display the InfoWindow at the specified location. Placement can be specified with respect to the location i.e., place the window at the location's upper-right corner. If placment is not specified the info window places the window to avoid falling off the map edge.
Parameters:
<Point> point Required Location to place anchor.
<Point> location Required Location is an instance of esri.geometry.Point. If the location has a spatial reference, it is assumed to be in map coordinates otherwise screen coordinates are used. Screen coordinates are measured in pixels from the top-left corner of the map control. To convert between map and screen coordinates use Map.toMap and Map.toScreen.
<String> placement Optional Placement of the InfoWindow with respect to the graphic. See the Constants table for values.
Sample:
require([
  "esri/dijit/InfoWindow", ... 
], function(InfoWindow, ... ) {
  map.infoWindow.show(location, InfoWindow.ANCHOR_UPPERRIGHT);
  ...
});
See also: on("show")

startup()

Finalizes the creation of the widget. (Added at v3.12)

startupDijits()

Helper method. Call startup on dijits that are embedded into the specified node. Sub-classes may need to call this method right after displaying the info window, passing in a reference to the content node.

unsetMap(map)

This method is called by the map when the object is no longer the map's info window. The default implementation provided by InfoWindowBase clears the argument property "map" from the object and is sufficient for most use cases.
Parameters:
<Map> map Required The map object.
Event Details
[ On Style Events | Connect Style Event ]

hide

Fires when an infoWindow is hidden. (Added at v3.6)
See also: hide()

show

Fires when an InfoWindow is visible. (Added at v3.6)
See also: show()
Show Modal