Swap view from 2D to 3D

This sample demonstrates how you can swap a map's view from 2D to 3D with the same Map instance. Click the 3D button in the bottom-left corner of the view to swap the view from 2D to 3D and vice versa.

To implement this behavior, set the container in the starting view to the container of the destination view. Likewise, set the map instance and the viewpoint on the destination view.

While Camera is the preferred object for setting a SceneView's visible extent and extent is preferred for MapView, the viewpoint property on each view is convenient because it persists the extent and rotation from one view type to the next. Some properties, such as tilt and elevation layers, will be ignored in 2D MapViews.

The function below demonstrates how to accomplish this.

// Swaps the view from 2D to 3D and vice versa
function swapView(){
  var is3D = appConfig.activeView.type === "3d";

  // remove the reference to the container for the previous view
  appConfig.activeView.container = null;

  if (is3D){
    // if the input view is a SceneView, set the viewpoint on the
    // mapView instance. Set the container on the mapView and flag
    // it as the active view
    appConfig.mapView.viewpoint = appConfig.activeView.viewpoint.clone();
    appConfig.mapView.container = appConfig.container;
    appConfig.activeView = appConfig.mapView;
    swapButton.value = "3D";
  } else {
    appConfig.sceneView.viewpoint = appConfig.activeView.viewpoint.clone();
    appConfig.sceneView.container = appConfig.container;
    appConfig.activeView = appConfig.sceneView;
    swapButton.value = "2D";
  }
}

Limitations about swapping between 2D and 3D

Keep in mind that swapping from a MapView to a SceneView requires careful consideration for a number of factors. See the list below for some of the factors of consideration. This list is not comprehensive.

• Data types - Some layers aren't supported in 2D because of their 3D nature. These include SceneLayer, IntegratedMeshLayer, and PointCloudLayer. They will need to be removed from the map instance altogether, or replaced with 2D counterparts. For example, you could swap a SceneLayer representing buildings with a polygon FeatureLayer representing building footprints. ElevationLayer doesn't need to be considered as closely as the other layers mentioned above since the Map's ground is ignored in MapViews.
• Symbols - While most 2D symbols are useable in SceneView, all 3D symbols are not supported in MapViews. Renderers may need to be reconfigured if 3D symbols are used.
• UI components - If adding widgets and other UI components using view.ui.add(), then keep in mind that these components need extra logic for persisting from one view to the next.
• Widgets - All widgets in the API are tied to a specific view. If persisting widgets from a 2D to 3D view is desired then extra logic will need to be included for swapping the view referenced by each widget. This includes a view's popup instance.

Related samples

• Synchronize MapView and SceneView
• Create a Calcite Maps Bootstrap application