Skip To Content

View pop-ups

In this topic

A map is more than a picture. It conveys information about your surroundings and helps you make decisions. There is a wealth of information hidden behind the image. Pop-ups are a great way to reveal information about features on a map, such as a business, location, natural phenomena, or geopolitical entity.

Learn more about pop-ups

You can configure pop-ups when authoring web maps with ArcGIS Online. A pop-up is associated with a specific layer in a web map and describes how information about features in that layer should be presented. When configuring pop-ups, the author of a web map can choose which fields to display, give them aliases, specify formatting for numbers and dates, configure charts, and so on.

Learn more about authoring web maps with pop-ups

Support library

Developing with the Popup API uses Android APIs that are not available on all supported platforms. If you're supporting Gingerbread or Honeycomb platforms, you need to add the Android support library to your app. The support package includes support libraries that enable your app to take advantage of the newer APIs.

Add the Android support library to your project

  1. Right-click your ArcGIS Android project and select Android Tools > Add Support Library.
  2. Accept packages to install and click Install.

    Under Android Dependencies, the android-support-v4.jar file library is listed.

  3. To ensure the support library is added to your project build path, right-click Android Dependencies in your project and select Build > Add to Build Path.

Display information using pop-ups

PopupContainer is the main class to use to display pop-ups in your applications. It provides the basic user interface (UI) and behavior for displaying and editing information about graphics in a pop-up. It holds and manages one or more Popup objects to provide a UI for attribute editing, media displaying, attachment managing, and so on. It also manages the transitions between Popups.

Instantiate PopupContainer

To instantiate PopupContainer, pass a MapView as a parameter in the constructor.

MapView map = …;
PopupContainer popupContainer = new PopupContainer(map);

Add Popup to PopupContainer

Popup is the class representation of a web map pop-up that associates a graphic with a pop-up definition for the purpose of displaying in a PopupContainer. It manages a number of views behind the scenes, each of which is designed for a specific purpose, such as editing an attribute, displaying media, managing attachments, and so on.

Each Popup contains a graphic whose information you want to display. The graphic can be chosen by tapping on the map or by tapping on the accessory button in the callout for a specific graphic. A popup definition is represented by a PopupInfo object. You can retrieve it from a layer of a web map.

Create a Popup from a web map layer

You can create a Popup from a layer of a web map provided you know which layer or service the Popup is associated with.

MapView map = …;
Layer layer = …;
int  subLayerId = …;
Graphic graphic = …;
……
Popup popup = layer.createPopup(map, subLayerId, graphic);

Feature layers are a special type of GraphicsLayer that allow you to display features from a layer from a map service or feature service. The ArcGISFeatureLayer class can create Popup as shown in the following sample code:

MapView map = …;
ArcGISFeatureLayer featureLayer = …;
Graphic graphic = …;
……
Popup popup = featureLayer.createPopup(map, 0, graphic);

Add a Popup to the PopupContainer

You can add a Popup to the PopupContainer by passing the reference to a graphic and the popup definition for that graphic.

Popup popup = …;  // create popup
PopupContainer popupContainer = …;

popupContainer.addPopup(popup); // add popup to popup container

Display PopupContainer using PopupContainerView

PopupContainerView is a subclass of an Android LinearLayout. As with any Android LinearLayout, it can be displayed in a variety of ways. The following is an example of displaying a PopupContainerView:

// Create a dialog for the popups and display it.
PopupDialog popupDialog = new PopupDialog(map.getContext(), popupContainer);

...

// A customize full screen dialog.
private class PopupDialog extends Dialog {
  private PopupContainer popupContainer;
 
  public PopupDialog(Context context, PopupContainer popupContainer) {
		  super(context, android.R.style.Theme);
		  this.popupContainer = popupContainer;
	 }
	  
	 @Override
	 protected void onCreate(Bundle savedInstanceState) {
		  super.onCreate(savedInstanceState);
		  LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
		 	LinearLayout layout = new LinearLayout(getContext());
			 layout.addView(popupContainer.getPopupContainerView(), android.widget.LinearLayout.LayoutParams.FILL_PARENT, android.widget.LinearLayout.LayoutParams.FILL_PARENT);
			 setContentView(layout, params);
		}
	  
}

Display Popup for a hosted tiled map service

Popup can be configured on hosted tiled map services when published in conjunction with feature services. Hosted tiled map services don't have attribute data. The feature service can be referenced to enable popup configuration options, and to display attribute information in maps. Showing popups defined for a hosted tiled map service follows the steps previously mentioned. Popup can be created from the tiled map service layer. However, obtaining graphics relies on the associated feature service. The feature service referenced by a hosted tiled map service is exposed in the API through the Layer.getQueryUrl() method. You can create Popup for a hosted tiled map service as shown in the following sample code:

MapView map = …;
ArcGISTiledMapServiceLayer tiledLayer = …;
ArcGISLayerInfo layerInfo = …;
Envelope env = …;
Popup popup;

int layerID = layerInfo.getId();
String layerUrl = tiledLayer.getQueryUrl(layerID);
if (layerUrl == null)
  layerUrl = tiledLayer.getUrl() + "/" + layerID;
ArcGISPopupInfo popupInfo = tiledLayer.getPopupInfo(layerID);
Query query = new Query();
query.setInSpatialReference(sr);
query.setOutSpatialReference(sr);
query.setGeometry(env);
query.setOutFields(new String[] {"*"});  						
QueryTask queryTask = new QueryTask(layerUrl);
try {
  FeatureSet results = queryTask.execute(query);	
  for (Graphic graphic : results.getGraphics()) {
    popup = tiledLayer.createPopup(map, layerID, graphic);
    popupContainer.addPopup(popup);
  }
} catch (Exception e) {
  e.printStackTrace();
}

See Hosted tiled map services to learn more about this type of service.

Handle user interaction

The Popup class handles most of the user interaction with the UI, such as displaying an appropriate keyboard when the user starts editing a numeric attribute, allowing the user to take a picture or browse the photo gallery for attachments, and so on.

To enable editing on a popup you call setEditMode(true)

// Add Popup
 Popup popup = featureLayer.createPopup(map, 0, graphic);
 popup.setEditMode(true);
 popupContainer.addPopup(popup);

Edit information using Popup

The Popup API provides a UI that makes it easy to collect information about a graphic from the user. It's your responsibility to commit the edits of a graphic to the server and present an appropriate view that will allow the user to edit an existing graphic's geometry, or create a new geometry from scratch. The Popup class provides a method to retrieve the edited attributes. A PopupListener will be triggered by some changes of the state of the popup. Following are two examples of getting updated attributes and handling changes of the state of Popup through PopupListener.

Retrieving updated attributes from Popup:

Popup popup = …;

Graphic gr = popup.getGraphic();
Map<String, Object> attributes = gr.getAttributes();
Map<String, Object> updatedAttrs = popup.getUpdatedAttributes();
for (Entry<String, Object> entry : updatedAttrs.entrySet()) {
  attributes.put(entry.getKey(), entry.getValue());
}
Graphic newgr = new Graphic(gr.getGeometry(), null, attributes, null);

Listen to changes of Popup state:

Popup popup = …;
popup.setPopupListener(this);
popup.setEditMode(true);
……
@Override
public void onPopupModified() {
  Log.i(IOUtils.TAG, "onPopupModified");
  mModified = true;
  View titleView = getPopup().getLayout().getTitleView();
  if (titleView != null && titleView instanceof ArcGISTitleView) {
    Symbol symbol = ((ArcGISTitleView) titleView).getSymbol();
    if (symbol != null && symbol != mSymbol) {
      Log.i(IOUtils.TAG, "onPopupModified: update symbol");
      mSymbol = symbol;
      addFeature(mCurrentLocation);
    }
  }
  ……;
}

@Override
public void onPopupValidityChanged(boolean isValid) {
  Log.i(IOUtils.TAG, "onPopupValidityChanged");
  mModified = true;
  mValid = isValid;
}

Editor tracking and ownership-based access control

Editor tracking and ownership-based access control are two features that are only available with feature services hosted on ArcGIS Online or ArcGIS for Server 10.1 and later. These two features affect the display and behaviors of pop-ups.

Editor tracking

When edit tracking is enabled, a feature layer automatically tracks and manages information such as the user who created or modified a feature, and, the time when the feature was created or modified. This tracking information is stored along with the feature in specially designated fields. The information about these designated fields is exposed in the API through the ArcGISFeatureLayer.getEditFieldsInfo() method. Popup automatically prevents a user from modifying these fields. Popup also shows a localized summary of the last edit operation performed on the given feature above the title of the pop-up. The API exposes the edit information through the ArcGISFeatureLayer.getEditInfo() method.

Popup uses templates to display the edit summary. The templates are stored in an XML file called arcgis_ui_strings.xml. The templates can be customized. See the Customizing the UI section below for more information about how to customize the templates.

Learn more about editor tracking

Ownership-based access control

Ownership-based access control configuration specifies whether features can be edited only by their owners, or if they can be edited by anyone; even if they belong to someone else. The configuration of a feature layer is exposed in the API through methods such as ArcGISFeatureLayer.getOwnershipBasedAccessControlForFeatures(). Popup enforces this configuration to prevent an unauthorized user from making edits to a feature. The buttons in a pop-up, such as Edit, Delete, and Save, will be turned on or off depending on the configuration. The Popup API also exposes the configuration for a specific feature through the Popup.isDeletable() and isEditable() methods.

Learn more about ownership-based access control

Customize the UI

Color

You can change the color of the pop-up background, text, and selector by modifying properties on PopupContainer.

PopupContainer popupContainer = …;

popupContainer.setPopupBackgroundColor(Color.WHITE); // popup background color
popupContainer.setPopupTextColor(Color.BLACK); // text color
popupContainer.setPopupSelectorColors(Color.BLUE, Color.RED, 
  Color.CYAN, Color.MAGENTA); // selector colors

Custom action

You can replace the default toolbar of the pop-up view by setting the PopupToolbar property on PopupContainer. You can perform any action when the buttons on the custom toolbar are clicked, such as zooming in to the feature being displayed in the pop-up, or displaying a custom action sheet with further options.

Localize the UI

The text displayed in the pop-up views has been externalized into an XML file called arcgis_ui_strings.xml to make localization easy. This file is included in the res/values folder for each locale. Translations for the following languages are included by default:

  • Arabic
  • German
  • English
  • Spanish
  • French
  • Italian
  • Japanese
  • Korean
  • Portuguese
  • Russian
  • Chinese

When displaying the UI, PopupContainer will automatically pick up the appropriate translations from resources folder depending on the language setting of the device.