Hide Table of Contents
esri
esri/arcgis
esri/dijit
esri/dijit/analysis
esri/dijit/geoenrichment
esri/dijit/geoenrichment/ReportPlayer
esri/geometry
esri/layers
esri/renderers
esri/symbols
esri/tasks
esri/tasks/datareviewer
esri/tasks/geoenrichment
esri/tasks/locationproviders
Class: InfoWindow
[ AMD Module Require | Legacy Module Require ]
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
| Name | Summary |
|---|---|
| new InfoWindow(params, srcNodeRef) | Create a new InfoWindow. |
Constants
| Name | Description |
|---|---|
ANCHOR_LOWERLEFT | InfoWindow is anchored to the lower left of the point. |
ANCHOR_LOWERRIGHT | InfoWindow is anchored to the lower right of the point. |
ANCHOR_UPPERLEFT | InfoWindow is anchored to the upper left of the point. |
ANCHOR_UPPERRIGHT | InfoWindow is anchored to the upper right of the point. |
CSS
esri/dijit/InfoWindow | Download source
Properties
| Name | Type | Summary |
|---|---|---|
| anchor | String | Placement of the InfoWindow with respect to the graphic. |
| coords | Point | The anchor point of the InfoWindow in screen coordinates. |
| domNode | Object | The reference to a DOM node where the info window is constructed. |
| fixedAnchor | String | InfoWindow always show with the specified anchor. |
| isShowing | Boolean | Determines whether the InfoWindow is currently shown on the map. |
Methods
| Name | Return type | Summary |
|---|---|---|
| destroyDijits() | None | Helper method. |
| hide() | None | Hides the InfoWindow. |
| move(point) | None | Moves the InfoWindow to the specified screen point. |
| place(value, parentNode) | None | Helper method. |
| resize(width, height) | None | Resizes the InfoWindow to the specified height and width in pixels. |
| setContent(content) | InfoWindow | Sets the content in the InfoWindow. |
| setFixedAnchor(anchor) | None | Sets the fixed location of the InfoWindow anchor. |
| setMap(map) | None | This method is called by the map when the object is set as its info window. |
| setTitle(title) | InfoWindow | Sets the title for the InfoWindow. |
| show(point, location, placement?) | None | Display the InfoWindow at the specified location. |
| startup() | None | Finalizes the creation of the widget. |
| startupDijits() | None | Helper method. |
| unsetMap(map) | None | This 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
| Name | Event Object | Summary |
|---|---|---|
| hide | Fires when an infoWindow is hidden. | |
| show | Fires when an InfoWindow is visible. |
Constructor Details
Create a new InfoWindow. (Added at v3.5)
Parameters:
< |
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. |
< |
Required | Reference or id of the HTML element where the widget should be rendered. |
Property Details
<String
StringPlacement 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_UPPERRIGHTDefault value:
ANCHOR_UPPERRIGHT<Point
PointThe anchor point of the InfoWindow in screen coordinates.
<Object
ObjectThe reference to a DOM node where the info window is constructed. Sub-classes should define this property .
<String
StringInfoWindow always show with the specified anchor. See the Constants table for values.
<Boolean
BooleanDetermines whether the InfoWindow is currently shown on the map.
Known values:
true | falseDefault value:
trueMethod Details
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.Moves the InfoWindow to the specified screen point.
Parameters:
< |
Required | The new anchor point when moving the InfoWindow. |
Helper method. Place the HTML value as a child of the specified parent node.
Parameters:
< |
Required | A string with HTML tags or a DOM node. |
< |
Required | The parent node where the value will be placed. |
Resizes the InfoWindow to the specified height and width in pixels.
Sets the content in the InfoWindow. View the Format Info Window Content help topic for more details.
Return type:
InfoWindowParameters:
< |
Required | The content for the InfoWindow. Can be any valid HTML or DOM element. |
Sample:
map.infoWindow.setContent(graphic.getContent());
Sets the fixed location of the InfoWindow anchor. Valid values are listed in the Constants table.
Parameters:
< |
Required | Fixed anchor that cannot be overridden by InfoWindow.show(). See Constants table for values. |
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:
< |
Required | The map object. |
Sets the title for the InfoWindow. View the Format Info Window Content help topic for more details.
Return type:
InfoWindowParameters:
< |
Required | The title for the InfoWindow. Can be any valid HTML. |
Sample:
map.infoWindow.setTitle(title);
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:
< |
Required | Location to place anchor. |
< |
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. |
< |
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")
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.
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:
< |
Required | The map object. |
Event Details
[ On Style Events | Connect Style Event ]