Maps and Views
Introduction
Maps are containers used to manage references to layers and basemaps. Views are used to display the map layers and handle user interactions, popups, widgets, and the map location.
Working with maps
Maps are created from the Map
class. Map
objects are always passed to a View
object. There are two View
classes used to display maps: the Map
class for 2D maps and the Scene
class for 3D maps.
Create a new map
One way to create a map is to make a new instance of the Map
class while specifying a basemap and optionally a collection of layers.
Learn more about the different types of Layers you can add to a map.
Create a map from a Web Map or Web Scene
The second way to create a map is to load a web map (for 2D maps) or a web scene (for 3D maps).
Web maps and web scenes are JSON structures that contain settings for a map or a scene. This includes settings for the basemap, layers, layer styling, popups, legends, labels, and more. They are typically created interactively with the ArcGIS Online map viewer or the ArcGIS Online scene viewer. ArcGIS Online or ArcGIS Enterprise assigns them a unique ID and stores them as portal items.
The Web
and Web
classes can be used to access and load web maps and web scenes by their unique ID. An item's ID can be identified in the URL in the map viewer and scene viewer or in the item page. The default portal is ArcGIS Online and the URL is https:
. If using ArcGIS Enterprise, the portal URL must be specified.
Example:
https:
//www.arcgis.com/home/item.html?id=41281c51f9de45edaf1c8ed44bb10e30
When the Web
and Web
object load a web map and web scene, all of the settings are automatically applied to the Map
and Scene
. For example, the basemap and layers are set, the layer styles are applied, and the popups are defined for each layer.
Note: Creating web maps and web scenes interactively and loading them by unique ID is the fastest way to configure a
Map
and aScene
. Learn how to create and load web maps in the Create a web map and Display a web map tutorials.
Create a map from a WebMap
Learn more in the displaying a web map tutorial.
Create a scene from a WebScene
Learn more in the Display a web scene tutorial.
Working with Views
The primary role of the view is to display layers, popups, and UI widgets, handle user interactions, and to specify which portion of the world the map should be focused on (i.e. the "extent" of the map).
Create a view
There are separate classes for creating views for maps and scenes: a Map
and Scene
class. A Map
displays a 2D view, and a Scene
displays a 3D view, of a Map
object.
For a map to be visible, a view object requires a Map
object and a String
identifying the id
attribute of a div
element or a div
element reference.
Set the visible portion of the map
The initial position for the Map
and Scene
can be set by setting the center
and the zoom
or scale
properties when the view is created.
Note: The view position can also be updated after it is initialized by updating the properties programmatically.
When using the Scene
(3D), the position of the observer can by set by defining the properties of the camera
.
Learn how to create 2D and 3D views in the Display a map and Display a scene tutorials.
Animate the view to a new position
The g
method of Map
also changes the location of the view but provides the additional option to transition smoothly. This technique is often used to "fly" from one location to another on the surface or to zoom to results of a search.
The g
method can accept a Geometry
, Graphic
, or Viewpoint
object. Additional options can control the animation.
Interacting with the view
The view is also responsible for handling user interaction and displaying popups. The view provides multiple event handlers for user interactions such as mouse clicks, keyboard input, touch screen interactions, joysticks, and other input devices.
When a user clicks on the map, the default behavior is to show any popups that have been pre-configured in your layers. This behavior can also be approximated manually with the following code by listening for the click
event and using the hit
method to find features where the user clicked.
Learn more about about view events and manually configuring popups.
Adding widgets and UI components to the view
The view is also a container for overlaying widgets and HTML Elements. The view.ui
provides a DefaultUI container that is used to display the default widgets for the view. Additional widgets and HTML Elements can also be added to the view by using the view.ui.add
method. The code snippet below demonstrates adding widgets that allows users to search for an address or place.
Learn more about adding widgets to the view.