Creating an Esri Component on an HTML Page

In this section:

You insert an Esri map component in an HTML page by clicking the Esri Map button on the right end of the Objects group on the Components tab, as shown in the following image.



After clicking the button, use your mouse to draw an area on the HTML canvas for the map component.

Configuring the Esri Map Component

Reference:

Once you insert the Esri map component into the HTML page, you can configure the following properties and objects.

The Esri viewer has widgets available at runtime that provide a table of contents (layer list) and a set of tools for making selections and changing the viewing area on the map.

You have the following options for configuring the map component contents.

Note: On the Properties panel, the Map type property defaults to Google map. This property is not relevant to an Esri component and can be ignored in this context.

Reference: Choosing a Basemap

The Miscellaneous options on the Properties panel let you select one of the following default basemaps:

  • Dark Gray Canvas Map. Provides a dark background that allows the focus to be on other layers.
  • Dark Gray Vector. Provides a detailed basemap for the world, with a dark neutral background using minimal colors, labels, and features.
  • Light Gray Canvas Map. Provides a light gray neutral background. This is the default basemap.
  • Gray Vector. Provides a detailed basemap for the world, with a light neutral background using minimal colors, labels, and features.
  • World Imagery with Labels. Provides a detailed World Imagery map layer with labels.
  • National Geographic World Map. Provides a general reference map from National Geographic.
  • Oceans Map. Provides a background designed to be used as a reference map for ocean data.
  • Open Street Map. Provides the OpenStreetMap community map layer.
  • World Imagery. Provides a detailed World Imagery map layer.
  • World Street Map. Provides a multiscale street map for the world.
  • Streets Navigation Vector. Provides a detailed basemap for the world, with a custom navigation map style.
  • Streets Night Vector. Provides a detailed vector basemap for the world, using a custom night time street map style that is designed for use at night or in other low-light environments.
  • Streets Relief Vector. Provides a detailed vector basemap for the world, using a classic Esri street map style including a relief map.
  • Streets Vector. Provides a detailed vector basemap for the world with a classic Esri street map style.
  • Terrain with labels. Provides a terrain base map with labels.
  • World Topographic Map. Provides a topographic map.
  • Topographic Vector. Provides a detailed basemap for the world, symbolized with a classic Esri topographic map style.

You can also add a custom basemap, as described in Configuring Geographic Information.

Reference: Configuring Whether Selections on a Map Are Required to Run a Request

When selections on a map trigger a request to run, you can configure whether clearing the selections reruns the request. To specify whether to rerun the request, use the Selection Required property on the Properties panel for the map object.

  • "Selection Required" = yes runs the request only when features have been selected on the map. When you click Clear Selection in the Selection Widget, the request is not run again.
  • "Selection Required" = no always runs the request. When you click Clear Selection in the Selection Widget, the request is run again.

Reference: Defining the Esri Component Layers

To define the layers that will display on your map component, you use the ESRI Object Settings panel, shown in the following image:



On this panel, you configure:

  • The layers that will display on your map component.

    Add a layer by clicking the New Layer icon at the top of the panel, and remove a selected layer by clicking the X at the top of the panel. You can change the default layer name by selecting the default name, clicking it, and typing over it when the edit box displays.

  • The visualizations for each layer.
  • The symbology used for each layer.

Using the arrow keys at the top of the panel, you can control the order of layers on the resulting map.