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

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
It is necessary to provide a base implementation so that the custom info window provides a minimum level of functionality and works as expected. Custom info windows can define additional properties, methods and events to enhance the info window and provide a richer user experience.

Samples

Search for samples that use this class.

Subclasses

Properties

NameTypeSummary
domNodeObjectThe reference to a DOM node where the info window is constructed.
isShowingBooleanIndicates if the info window is visible.

Methods

NameReturn typeSummary
destroyDijits()NoneHelper method.
hide()NoneHide the info window.
place(value, parentNode)NoneHelper method.
resize(width, height)NoneResize the info window to the specified width and height (in pixels).

Sub-classes should implement this method.

.
setContent(content)NoneDefine the info window content.
setMap(map)NoneThis method is called by the map when the object is set as its info window.
setTitle(title)NoneSet the input value as the title for the info window.
show(location)NoneDisplay the info window at the specified location.
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 after the info window is hidden.
showFires after the info window becomes visible.
Property Details

<Object> domNode

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

<Boolean> isShowing

Indicates if the info window is visible. When true, the window is visible. Sub-classes should define this property.
Known values: true | false
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()

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

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)

Resize the info window to the specified width and height (in pixels).

Sub-classes should implement this method.

Parameters:
<Number> width Required The new width of the InfoWindow in pixels.
<Number> height 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"
    });
  }
  ...
});

setContent(content)

Define the info window content. Sub-classes should implement this method.
Parameters:
<String | Object> content Required The content argument can be any of the following. See the Info Template content property for details.
  • String
    Text to display in the info window, can include HTML tags to format and organize the content.
    "This oil well has produced  100,000 bbls since 2005.
  • Reference to an HTML element
    See the Info Window content property for details.
  • Deferred object
    A deferred object represents a value that may not be immediately available. Your implementation should wait for the results to become available by assigning a callback function to the deferred object.
Sample:
require([
  "dojo/dom-construct", ... 
], function(domConstruct, ... ) {
  this._content = domConstruct.create("div", { "class": "content" }, this.domNode);

  setContent: function(content) {
    this.place(content, this._content);
  }
  ...
});

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)

Set the input value as the title for the info window. Sub-classes should implement this method.
Parameters:
<String | Object> title 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);
  }
  ...
});

show(location)

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

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 after the info window is hidden. Sub-classes typically fire this event at the end of the hide method logic. (Added at v3.6)

show

Fires after the info window becomes visible. Sub-classes typically fire this event at the end of the show method logic. If your implementation of the info window animates the DOM node into visibility, fire this event at the end of the animation. (Added at v3.6)