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.
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.
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.
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"));
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.
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.
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.
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.
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)
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.
dojo.connect(popup,"onHide",function(){
console.log('info window is hidden');
});
onSelectionChange()
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.
Sample:
dojo.connect(popup,"onSelectionChange",function(){
var graphic = popup.getSelectedFeature();
});
onSetFeatures()
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.