Examples

Use this widget to support app design requirements such as the following:

• You need to show the comparison of a map in 2D and 3D. You can add two Map widgets and create a trigger and action to synchronize views when interacting with either map.
• You want to click a feature on the map and display the record in a Feature Info widget.
• You have a requirement to filter a List widget based on clicking a feature on the map.

Usage notes

You can show a single map or include the option to switch between two maps. You can include multiple maps in an app by adding more Map widgets.

The Map widget requires a data source, including web maps and web scenes. When you include tools, they are automatically positioned on the map based on the size of the widget in both design mode and the final app.

Settings

The Map widget includes the following settings:

• Select map—Add a data source for web maps and web scenes.
• Initial view—Set the initial position of the map when it loads in the widget.
  • Default—Use the positioning of the map inherited from the web map or web scene.
  • Custom—Modify the initial view by creating a custom position for the map.
• Tools—Include tools for users to interact with the map.
  • Zoom—Zoom in and out on the map.
  • Home—Zoom the map to the initial map position (extent).
  • Navigation—Include toggling tools for navigation mode of a 3D map (web scene).
  • Locate—Display the user’s current location.
  • Compass—Indicate where north is in relation to the current view of a 2D or 3D map.
  • Search—Find locations based on a geocoding service from your organization or portal.
  • Layers—Display a list of layers and symbols in the map and allow users to turn them on or off.
  • Basemap—Display a gallery of basemaps.
  • Measure—Include measurement tools for measuring area and distance.
  • Fullscreen—Display the map using the entire screen.
  • Scale bar—Include a scale bar on the map that displays units in metric or nonmetric values and dynamically responds to various coordinate systems.
  • Select—Select features on the map using different selection tools and selection modes. Users have access to the following selection tools and can choose to select features that are either completely contained by or partially or completely within drawn polygons.
    • Rectangle—Click and drag to draw a rectangle across features.
    • Lasso—Click the map to create the vertices of a polygon, or draw with the pointer to create a freehand shape. Double-click to close the polygon and select contained features.
    • Circle—Click and drag to draw a circle across features.
    • Line—Click the map to create the vertices of a line. Double-click to end the line and select intersecting features.
    • Point—Click the map to place a point and select intersecting features.

    Users can select multiple features in the following four ways:

    • Create a new selection of features with each new selection tool drawing. This is the default.
    • Add to the current selection set (press Shift while drawing)
    • Remove features from the current selection set (press Ctrl while drawing for Windows; press Cmd while drawing for Mac)
    • Select features from the current selection set (press Ctrl+Shift while drawing for Windows; Cmd+Shift while drawing for Mac)

    Tip:

    When the user makes a selection, the selection tool icon becomes a progress icon. If the user selects a large number of features, the selection process may take a long time. Users can click the progress button to stop the selection process.

  • Extent navigate—Go back and forth through the extents that the user has visited at run time.

    Note:

    The Map widget automatically hides tools depending on the widget's height to make the widget more responsive to medium and small screen devices. For example, if a Map widget's height is smaller than 465 pixels, the Measure and Locate tools are hidden on small and medium screens even if they are turned on in the widget's settings. As the widget's height decreases, more tools are hidden. The Fullscreen, Search, Zoom, Scale bar, and Compass tools are the last to disappear.

• Tools layout—Select the layout of the tools based on a large and medium screen size.
• Options
  • Feature selection colors—Change the highlight color and transparency for features selected in the map. You can customize the highlight fill and outline.
  • Enable scroll zooming—Enable mouse wheel zooming and single-finger panning on the map.
  • Enable pop-up—Enable pop-ups on the map. Turning off this option is useful when working in coordination with the Feature Info widget.
    • Show pop-up upon feature selection—Show pop-ups on the map when the user selects map features in another widget, such as a Table or List.
  • Scene quality mode (for web scenes)—Control the quality of the web scene by balancing the visual effect and loading efficiency.
    • Low—Increase performance, stability, and speed by reducing data load.
    • Medium—Equally optimize performance and quality.
    • High—Improve the quality of visualization options (such as water reflection).
• Enable client-side query—Turn on these toggle buttons to have widgets in the app use client-side queries to work with data from your web maps. If you connect the same web map to multiple Map widgets, you only have to turn on client-side queries for a web map once.

  Note:

  Web scenes do not support client-side queries.

  The advantages of client-side queries are decreased demand on the server and improved app performance. Client-side queries greatly reduce the number of network requests made to a server. In addition, client-side queries are faster than server-side queries. Data-related tasks, such as selecting a feature to update a chart, perform faster.

  The disadvantage of client-side queries is that map features take longer to load when you change the map extent.

  Note:

  A common Experience Builder app configuration that can be demanding on servers is a List widget that updates based on the current map extent.

  To avoid overloading servers, it is strongly recommended that you turn on client-side queries if you configure a Map widget with the Extent changes trigger and Filter data records message action. This is especially important if you expect many users to access an app at the same time.

  Note:

  For known-limitations of client-side queries, see ArcGIS Maps SDK for JavaScript documentation.

Interaction options

The Map widget supports setting triggers on the Action tab of the widget's settings. You can synchronize two Map widgets by adding an Extent changes trigger to both maps, selecting the other map as the target for both, and choosing the Pan to and Zoom to actions. For web maps, the Zoom to synchronization includes the map's rotate behavior. For web scenes, it includes the rotate and tilt behaviors.

You can set triggers and message actions to have a map interact with other widgets. For example, you can add an action trigger to make a List widget show only the features that are visible on the map. The Map widget also supports data actions, which appear in pop-ups and allow users to export data, view records in a table, and more. Triggers, message actions, and data actions are defined and managed on the Action tab of the widget's settings. To learn more about the Map widget's supported actions, see Add actions to widgets.