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: PopupMobile
[ AMD Module Require | Legacy Module Require ]
dojo.require("esri.dijit.PopupMobile");
Description
(Added at v2.4)
The PopupMobile class is an implementation of InfoWindow that inherits from InfoWindowBase to provide additional capabilities. The mobile popup is designed for applications with small screen size such as an application running on a mobile device. The popup is associated with feature(s) and title and content are manually read from the feature. Popups can be used to display the results of asynchronous operations like the execution of a query task or a feature layer query. The PopupMobile provides a user interface to navigate through multiple selections.
Perform the following steps to replace the map's built-in info window with the PopupMobile.
- Include the popup and mobile popup stylesheets
- Include the class:
require(["esri/dijit/PopupMobile"], function(PopupMobile) { /* code goes here */ }); -
Create a new instance of the PopupMobile class.
var popup= new PopupMobile(null,dojo.create("div")); -
Create the map object and pass in the popup.
var map = new esri.Map("mapDiv",{ infoWindow:popup }); -
Note: The following step is only required when using versions prior to 2.4 of the ArcGIS API for JavaScript. At version 2.5 and later this is not required. Place the popup under the map's root element. This ensures that the coordinate space
used by the popup for positioning aligns with the map's coordinate space.
dojo.place(popup.domNode,map.root);
Samples
Search for samples that use this class.Class hierarchy
esri/dijit.InfoWindowBase |_esri/dijit.PopupMobile
Constructors
| Name | Summary |
|---|---|
| new esri.dijit.PopupMobile(options, srcNodeRef) | Create a new PopupMobile object. |
CSS
esri/dijit/PopupMobile | Download source
| Name | Description |
|---|---|
| esriMobileNavigationBar | Define the style for the pane that displays the window contents.
.esriMobileNavigationBar {
background-image: -webkit-gradient(
linear,left bottom,left top,
color-stop(0.25, rgb(27,82,14)),
color-stop(0.82, rgb(19,191,22))
);
}
|
| pointer.bottom | Define the image used for the bottom pointer.
.esriPopupMobile .pointer.bottom{
background:url(images/pointerbottom.png) ;
}
|
| pointer.top | Define the image used for the top pointer
.esriPopupMobile .pointer.top {
background:url(images/pointertop.png)
}
|
| titlePane | Define the style for the title pane
.esriPopupMobile .titlePane {
background: rgba(27, 82, 14, 1.0);
}
|
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. |
| location | Point | The location the info window is pointing to. |
Methods
| Name | Return type | Summary |
|---|---|---|
| clearFeatures() | None | Removes all features and destroys any pending deferreds. |
| destroy() | None | Destroy the popup. |
| destroyDijits() | None | Helper method. |
| getSelectedFeature() | Graphic | Get the currently selected feature. |
| 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. . |
| select(index) | None | Selects the feature at the specified index. |
| selectNext() | None | Go to the next feature. |
| selectPrevious() | None | Go to the previous feature. |
| setContent(content) | None | Set the content for the info window. |
| setFeatures(features) | None | Associate an array of features or an array of deferreds that return features with the info window. |
| setMap(map) | None | This method is called by the map when the object is set as its info window. |
| setTitle(title) | None | Sets the info window title. |
| show(location) | None | Display the info window 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 |
|---|---|---|
| clear-features | Fired when clearFeatures is called. | |
| hide | Fired when the info window is hidden. | |
| selection-change | Fired when the selection changes. | |
| set-features | Fired after registering an array of features. | |
| show | Fired when the info window becomes visible. |
Constructor Details
Create a new PopupMobile object.
Parameters:
< |
Required | Optional parameters. See options list. 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. |
options properties: < |
Optional | Define the symbol used to highlight polygon features. |
< |
Optional | When true, the feature is highlighted, set to false to disable highlighting. The default value is true. |
< |
Optional | Define the symbol used to highlight line features. |
< |
Optional | Specify the margin (in pixels) to leave to the left of the popup window when it is maximized. The default value is 10. |
< |
Optional | Specify the margin (in pixels) to leave at the top of the popup window when it is maximized. The default value is 10. |
< |
Optional | Define the marker symbol used to highlight point features. |
< |
Optional | Specify the x-offset (in pixels) used when positioning the popup. Default value is 3. |
< |
Optional | Specify the y-offset (in pixels) used when positioning the popup. Default value is 3. |
< |
Optional | Define the number of levels to zoom in, default value is 4. |
Sample:
var popup = new esri.dijit.PopupMobile({
fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new esri.Color([255,0,0]), 2), new esri.Color([255,255,0,0.25]))
}, dojo.create("div"));
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 | false<Point
PointThe location the info window is pointing to. (Added at v3.10)
Method Details
Removes all features and destroys any pending deferreds.
Sample:
popup.clearFeatures();
Destroy the popup. Call this method when the popup is no longer needed by the application.
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.Get the currently selected feature.
Return type:
GraphicSample:
var graphic = popup.getSelectedFeature();
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:
resize: function(width, height) {
dojo.style(this._content, {
width: width + "px",
height: height + "px"
});
}
Selects the feature at the specified index.
Parameters:
< |
Required | The index of the feature to select. |
Sample:
popup.select(2);
Set the content for the info window. View the Format Info Window Content help topic for more details.Note: the Popup class doesn't support the deferred object option for setting content.
Associate an array of features or an array of deferreds that return features with the info window. The first feature in the array is automatically selected.
Note:When setFeatures is used the title area displays the number of features and the index of the currently selected feature and ignores the title defined in the info template. If you want to display title text you will need to specify it as part of the info window content.
Parameters:
< |
Required | An array of features or deferreds. |
Sample:
var deferred = featureLayer.selectFeatures(query); popup.setFeatures([deferred]);
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 info window title. View the Format Info Window Content help topic for more details.
Display the info window at the specified location.
Parameters:
< |
Required | An instance of esri.geometry.Point that represents the geographic location to display the popup. |
Sample:
popup.show(evt.mapPoint);
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 ]
Fired when
clearFeatures is called. (Added at v3.6)Sample:
require([
"dojo/_base/connect", ...
], function(connect, ... ) {
connect.connect(map.infoWindow,"onClearFeatures",function(){
console.log('features cleared');
});
...
});
Fired when the info window is hidden. (Added at v3.6)
Sample:
require([
"dojo/_base/connect", ...
], function(connect, ... ) {
connect.connect(popup,"onHide",function(){
console.log('info window is hidden');
});
...
});
Fired when the selection changes. This can occur when the
select method is called or when users navigate through the selection using the next and previous buttons. (Added at v3.6)Sample:
require([
"dojo/_base/connect", ...
], function(connect, ... ) {
connect.connect(popup,"onSelectionChange",function(){
var graphic = popup.getSelectedFeature();
});
...
});
Fired after registering an array of features. The following actions cause this event to fire:
- The
setFeaturesmethod is called with an array of features - The
setFeaturesmethod is called with an array of deferreds and all the deferreds have completed. IfclearFeaturesis called before the pending deferreds have completed this event will not fire.
Sample:
require([
"dojo/_base/connect", ...
], function(connect, ... ) {
connect.connect(popup,"onSetFeatures",function(){
console.log("features set");
});
...
});