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: InfoWindowBase
[ AMD Module Require | Legacy Module Require ]
require(["esri/InfoWindowBase"], function(InfoWindowBase) { /* code goes here */ });
Description
(Added at v2.2)
The base class for the out-of-the-box InfoWindow. To create a custom info window, extend this class and adhere to the following requirements:
- Provide implementation for the listed methods
- Expose listed properties
- Fire listed events
Samples
Search for samples that use this class.Subclasses
Properties
| Name | Type | Summary |
|---|---|---|
| domNode | Object | The reference to a DOM node where the info window is constructed. |
| isShowing | Boolean | Indicates if the info window is visible. |
Methods
| Name | Return type | Summary |
|---|---|---|
| destroyDijits() | None | Helper method. |
| hide() | None | Hide the info window. |
| place(value, parentNode) | None | Helper method. |
| resize(width, height) | None | Resize the info window to the specified width and height (in pixels).
Sub-classes should implement this method. . |
| setContent(content) | None | Define the info window content. |
| setMap(map) | None | This method is called by the map when the object is set as its info window. |
| setTitle(title) | None | Set the input value as the title for the info window. |
| show(location) | None | Display the info window at the specified location. |
| 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 after the info window is hidden. | |
| show | Fires after the info window becomes visible. |
Property Details
<Object
ObjectThe reference to a DOM node where the info window is constructed. Sub-classes should define this property .
<Boolean
BooleanIndicates if the info window is visible. When true, the window is visible. Sub-classes should define this property.
Known values:
true | falseMethod 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.Hide the info window. Fire the
onHide event at the end of your implementation of this method to hide the info window.Sub-classes should implement this method.
Sample:
require([
"esri/InfoWindowBase", "esri/domUtils", ...
], function(InfoWindowBase, domUtils, ... ) {
...
hide: function() {
domUtils.hide(this.domNode);
this.isShowing = false;
this.onHide();
}
...
});
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. |
Resize the info window to the specified width and height (in pixels).
Sub-classes should implement this method.
Parameters:
< |
Required | The new width of the InfoWindow in pixels. |
< |
Required | The new height of the InfoWindow in pixels. |
Sample:
require([
"esri/InfoWindowBase", "esri/dojo/dom-style", ...
], function(InfoWindowBase, domStyle, ... ) {
resize: function(width, height) {
domStyle.set(this._content, {
width: width + "px",
height: height + "px"
});
}
...
});
Define the info window content.
Sub-classes should implement this method.
Parameters:
< |
Required | The content argument can be any of the following. See the Info Template content property for details.
|
Sample:
require([
"dojo/dom-construct", ...
], function(domConstruct, ... ) {
this._content = domConstruct.create("div", { "class": "content" }, this.domNode);
setContent: function(content) {
this.place(content, this._content);
}
...
});
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. |
Set the input value as the title for the info window. Sub-classes should implement this method.
Parameters:
< |
Required | In most cases the title will be a string value but the same options are available as for the setContent method. |
Sample:
require([
"dojo/dom-construct", ...
], function(domConstruct, ... ) {
this._title = domConstruct.create("div", { "class": "title" }, this.domNode);
setTitle: function(title) {
this.place(title, this._title);
}
...
});
Display the info window at the specified location. Location is an instance of
esri.geometry.Point. Fire the onShow event at the end of your implementation of this method to display the info window.
It is entirely up to you, the developer, how to display the info window. You can emulate the out-of-the-box behavior of displaying the entire info window at once. Or you can create a custom implementation that displays a portion of the window, perhaps the title, initially then animates the content area.
Sub-classes should implement this method.
Parameters:
< |
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. |
Sample:
require([
"esri/InfoWindowBase", "dojo/dom-style", "esri/domUtils", ...
], function(InfoWindowBase, domStyle, domUtils, ... ) {
...
show: function(location) {
// Is location specified in map coordinates?
if (location.spatialReference) {
location = this.map.toScreen(location);
}
// Position 10x10 pixels away from the
// requested location
domStyle.set(this.domNode, {
left: (location.x + 10) + "px",
top: (location.y + 10) + "px"
});
// Display
domUtils.show(this.domNode);
this.isShowing = true;
this.onShow();
}
...
});
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 ]
Fires after the info window is hidden. Sub-classes typically fire this event at the end of the hide method logic. (Added at v3.6)