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

require(["esri/dijit/PopupMobile"], function(PopupMobile) { /* code goes here */ });

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);
View the Working with Popups help topic for details on creating and using poups.

Samples

Search for samples that use this class.

Class hierarchy

esri/dijit/InfoWindowBase
|_esri/dijit/PopupMobile

Constructors

NameSummary
new PopupMobile(options, srcNodeRef)Create a new PopupMobile object.

CSS

esri/dijit/PopupMobile | Download source

NameDescription
esriMobileNavigationBarDefine 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.bottomDefine the image used for the bottom pointer.

.esriPopupMobile .pointer.bottom{

 background:url(images/pointerbottom.png) ;

}

pointer.topDefine the image used for the top pointer

.esriPopupMobile .pointer.top {

  background:url(images/pointertop.png) 

}

titlePaneDefine the style for the title pane

.esriPopupMobile .titlePane {

  background: rgba(27, 82, 14, 1.0);  

}

Properties

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

Methods

NameReturn typeSummary
clearFeatures()NoneRemoves all features and destroys any pending deferreds.
destroy()NoneDestroy the popup.
destroyDijits()NoneHelper method.
getSelectedFeature()GraphicGet the currently selected feature.
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.

.
select(index)NoneSelects the feature at the specified index.
selectNext()NoneGo to the next feature.
selectPrevious()NoneGo to the previous feature.
setContent(content)NoneSet the content for the info window.
setFeatures(features)NoneAssociate an array of features or an array of deferreds that return features with the info window.
setMap(map)NoneThis method is called by the map when the object is set as its info window.
setTitle(title)NoneSets the info window title.
show(location)NoneDisplay the info window at the specified location.
startup()NoneFinalizes the creation of the widget.
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
clear-featuresFired when clearFeatures is called.
hideFired when the info window is hidden.
selection-changeFired when the selection changes.
set-featuresFired after registering an array of features.
showFired when the info window becomes visible.
Constructor Details

new PopupMobile(options, srcNodeRef)

Create a new PopupMobile object.
Parameters:
<Object> options Required Optional parameters. See options list. This parameter is required but can be null or an empty object.
<Node | String> srcNodeRef Required Reference or id of the HTML element where the widget should be rendered.
options properties:
<FillSymbol> fillSymbol Optional Define the symbol used to highlight polygon features.
<Boolean> highlight Optional When true, the feature is highlighted, set to false to disable highlighting. The default value is true.
<LineSymbol> lineSymbol Optional Define the symbol used to highlight line features.
<Number> marginLeft Optional Specify the margin (in pixels) to leave to the left of the popup window when it is maximized. The default value is 10.
<Number> marginTop Optional Specify the margin (in pixels) to leave at the top of the popup window when it is maximized. The default value is 10.
<MarkerSymbol> markerSymbol Optional Define the marker symbol used to highlight point features.
<Number> offsetX Optional Specify the x-offset (in pixels) used when positioning the popup. Default value is 3.
<Number> offsetY Optional Specify the y-offset (in pixels) used when positioning the popup. Default value is 3.
<Number> zoomFactor Optional Define the number of levels to zoom in, default value is 4.
Sample:
require([
  "esri/dijit/PopupMobile", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol",
  "esri/Color", "dojo/dom-construct", ... 
], function(PopupMobile, SimpleFillSymbol, SimpleLineSymbol, Color, domConstruct, ... ) {
  var popup = new PopupMobile({
    fillSymbol: new SimpleFillSymbol(
      SimpleFillSymbol.STYLE_SOLID, 
      new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255,0,0]), 2),
      new Color([255,255,0,0.25]))
  }, domConstruct.create("div"));
  ...
});
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

<Point> location

The location the info window is pointing to. (Added at v3.10)
Method Details

clearFeatures()

Removes all features and destroys any pending deferreds.
Sample:

popup.clearFeatures();

destroy()

Destroy the popup. Call this method when the popup is no longer needed by the application.

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.

getSelectedFeature()

Get the currently selected feature.
Return type: Graphic
Sample:

var graphic =  popup.getSelectedFeature();

hide()

Hide the info window.

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

select(index)

Selects the feature at the specified index.
Parameters:
<Number> index Required The index of the feature to select.
Sample:

popup.select(2);

selectNext()

Go to the next feature.

selectPrevious()

Go to the previous feature.

setContent(content)

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.
Parameters:
<String | Function> content Required The content for the info window.

setFeatures(features)

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:
<Graphic[] | Deferred[]> features Required An array of features or deferreds.
Sample:
var deferred = featureLayer.selectFeatures(query);
popup.setFeatures([deferred]);

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)

Sets the info window title. View the Format Info Window Content help topic for more details.
Parameters:
<String | Function> title Required The text for the title.

show(location)

Display the info window at the specified location.
Parameters:
<Point> location Required An instance of esri.geometry.Point that represents the geographic location to display the popup.
Sample:

popup.show(evt.mapPoint);

startup()

Finalizes the creation of the widget. (Added at v3.12)

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 ]

clear-features

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');

  });
  ...
});

hide

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

selection-change

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

set-features

Fired after registering an array of features. The following actions cause this event to fire:
  • The setFeatures method is called with an array of features
  • The setFeatures method is called with an array of deferreds and all the deferreds have completed. If clearFeatures is called before the pending deferreds have completed this event will not fire.
(Added at v3.6)
Sample:
require([
  "dojo/_base/connect", ... 
], function(connect, ... ) {
  connect.connect(popup,"onSetFeatures",function(){

    console.log("features set");

  });
  ...
});

show

Fired when the info window becomes visible. (Added at v3.6)
Sample:
require([
  "dojo/_base/connect", ... 
], function(connect, ... ) {
  connect.connect(popup,"onShow",function(){
    console.log('info window is showing');
  });
  ...
});