dojo.require("esri.InfoWindowBase");
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
Methods
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
hide | | Fires after the info window is hidden. |
show | | Fires after the info window becomes visible. |
Old Events
onHide() | Fires after the info window is hidden. |
onShow() | Fires after the info window becomes visible. |
Property Details
The reference to a DOM node where the info window is constructed. Sub-classes should define this property .
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
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:
hide: function() {
esri.hide(this.domNode);
this.isShowing = false;
this.onHide();
}
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 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:
resize: function(width, height) {
dojo.style(this._content, {
width: width + "px",
height: height + "px"
});
}
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.
|
Sample:
this._content = dojo.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:
<Map > map |
Required |
The map object. |
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:
this._title = dojo.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:
<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:
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
dojo.style(this.domNode, {
left: (location.x + 10) + "px",
top: (location.y + 10) + "px"
});
// Display
esri.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:
<Map > map |
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)
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)
Fires after the info window is hidden. Sub-classes typically fire this event at the end of the hide method logic.
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.