Core concepts Map and View

A Map is a container for managing layer and base references. View displays map layers and handles user interactions, pop-ups, widgets, and map locations. Generally speaking, it can be understood that Map is responsible for the management of Map data, while View is responsible for the display of Map data and the interaction between Map and users.

The Map is introduced

Maps are created by the Map class. The Map object is always passed to a View object. There are two View classes for displaying maps: the MapView class for displaying 2D maps and the SceneView class for displaying 3D maps.

Create a Map

A general method

One way to create a map is to create a new instance of the Map class, specifying a base image and an optional set of layers.

The base image and layer types are explained in a later section.

const myMap = new Map({                // Create a Map object
  basemap: "streets-vector".layers: additionalLayers             // Optionally, add additional layers collection
});

const mapView = new MapView({          // The View for the Map object
  map: myMap,
  container: "mapDiv"
});
Copy the code

Through the 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 Map or Scene Settings. This includes Settings for base images, layers, layer styles, pop-ups, legends, labels, and so on. They are usually created through ArcGIS Online Map viewer or ArcGIS Online Scene viewer. ArcGIS Online or ArcGIS Enterprise assigns them a unique ID and stores them as Portal items.

Example: https://www.arcgis.com/home/item.html?id=41281c51f9de45edaf1c8ed44bb10e30

  • Created using WebMap

    const webMap = new WebMap({                        // Define the web map reference
  portalItem: {
    id: "41281c51f9de45edaf1c8ed44bb10e30".portal: "https://www.arcgis.com"               // Default: The ArcGIS Online Portal}});const view = new MapView({
  map: webMap,                                     // Load the web map
  container: "viewDiv"
});
Copy the code

  • Created from WebScene

    const webScene = new WebScene({                    // Define the web scene reference
  portalItem: {
    id: "579f97b2f3b94d4a8e48a5f140a6639b".portal: "https://www.arcgis.com"               // Default: The ArcGIS Online Portal}});const view = new SceneView({                       // Load the web scene
  map: webScene,
  container: "viewDiv"
});
Copy the code

The View is introduced

There are separate classes for creating views of the map and scene: the MapView and SceneView classes. The MapView displays a 2D view of a Map object, while the SceneView displays a 3D view.

Create a View

To make the map visible, the View object needs a Map object and a string that identifies the DIV element or the ID attribute referenced by the div element.

  • Create a MapView

    const mapView = new MapView({          // Create MapView object
  map: myMap,
  container: "mapViewDiv"
});
Copy the code

  • Create the SceneView

    const sceneView = new SceneView({      // Create SceneView object
  map: myMap,
  container: "sceneViewDiv"
});
Copy the code

Sets the visual range of the map

The initial position of MapView and SceneView can be set when creating a view by setting the Center and Zoom or Scale properties.

const view = new MapView({
  center: [-112.38].// The center of the map as lon/lat
  zoom: 13                      // Sets the zoom level of detail (LOD) to 13
});
Copy the code

The position of a view can also be updated after initialization by updating its properties.

When using SceneView (3D), you can set the position of the observer by defining the Camera property.

const view = new SceneView({
  camera: {
    position: [-122.// lon
         38.// lat
      50000  // elevation in meters].heading: 95.// direction the camera is looking
    tilt: 65 // tilt of the camera relative to the ground}});Copy the code

Animate the view to change position

MapView’s goTo method also changes the position of the view, but provides additional options to smooth the transition. This technique is often used to “fly” from one location on a surface to another, or to zoom in on search results. The goTo method can accept a Geometry, Graphic, or Viewpoint object. Other options control the animation.

view.goTo({                            // go to point with a custom animation duration
  target: {
      center: [-114.39] {},duration: 5000
  });
});
Copy the code

Effect preview:

Interacting with views

The View also handles user interaction and displays pop-ups. View provides multiple event handlers for user interactions such as mouse clicks, keyboard input, touch screen interaction, joysticks, and other input devices.

Example:

When the user clicks on a map, the default behavior is to display a pre-configured pop-up window on the layer. This behavior can also be implemented manually in code that listens for click events and uses the hitTest() method to find what the user clicked on.

view.popup.autoOpenEnabled = false;  // Disable the default popup behavior

view.on("click".function(event) { // Listen for the click event
  view.hitTest(event).then(function (hitTestResults){ 
    // Search for features where the user clicked
    if(hitTestResults.results) {
      view.popup.open({ // open a popup to show some of the results
        location: event.mapPoint,
        title: "Hit Test Results".content: hitTestResults.results.length + "Features Found"}); }})});Copy the code

Add widgets and UI components

View is also a container for adding widgets and HTML elements. UI provides a DefaultUI container to display the view’s default widgets. Additional widgets and HTML Elements can also be added to the view using the view.ui.add method.

Demo adding a search widget:

  var searchWidget = new Search({
    view: view
  });

  // Add the search widget to the top right corner of the view
  view.ui.add(searchWidget, {
    position: "top-right"
  });
Copy the code