Map and scene view

What is map and scene view

ArcGIS Experience BuilderArcGIS Experience Builder is a highly configurable app builder product that creates immersive web apps by combining maps, data, and interactive widgets with little to no coding.Learn more uses the same map and scene view concepts as the ArcGIS Maps SDK for JavaScript. In Experience Builder, the runtime view is wrapped by JimuMapView so widgets can work with a consistent extensibility model for map interaction, messages, and actions.

Interface and lifecycle

JimuMapView instances are created and managed by the Map widget.

• The Map widget creates JimuMapView objects for the configured web map or web scene.
• Other widgets do not create the map view directly in most workflows. Instead, they subscribe to and consume existing JimuMapView instances.
• At runtime, a widget can receive the active JimuMapView and then interact with the underlying ArcGIS Maps SDK view.

Properties

JimuMapView exposes several key properties:

• view: The ArcGIS Maps SDK map view or scene view object.
• dataSourceId: The web map or web scene data source ID that created the view.
• mapWidgetId: The ID of the Map widget that owns the view.
• jimuLayerViews: A collection of layer view wrappers associated with the view.

How to use JimuMapView in widgets

If a widget needs a map or scene view, the common workflow is:

1. In the widget settings page, use MapWidgetSelector to let the author choose a Map widget.
2. Store the selected map widget ID in widget config.
3. In runtime, render JimuMapViewComponent and pass the selected map widget ID.
4. Use the onActiveViewChange callback to receive the current JimuMapView.

If you need users to choose a specific view directly, you can also use JimuMapViewSelector in settings.

Code examples

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { React, type AllWidgetProps } from 'jimu-core'
import { JimuMapViewComponent, type JimuMapView } from 'jimu-arcgis'

export default function Widget (props: AllWidgetProps<any>) {
  const [jimuMapView, setJimuMapView] = React.useState<JimuMapView>(null)

  const onActiveViewChange = (activeView: JimuMapView) => {
    setJimuMapView(activeView)
  }

  return (
    <div className='widget-map-scene-view'>
      <JimuMapViewComponent
        useMapWidgetId={props.useMapWidgetIds?.[0]}
        onActiveViewChange={onActiveViewChange}
      />

      {jimuMapView?.view && (
        <div>
          Active view type: {jimuMapView.view.type}
        </div>
      )}
    </div>
  )
}