MapView

A MapView is a react component which combines both an ESRI Map and a MapView into a singular component. It will render a div, and once rendered, use it to render an ArcGIS JS API MapView. MapView accepts all HTMLAttributes<HTMLDivElement> properties, as well as optional MapProperties and ViewProperties, which allow you to set the inital Map and MapView options:

const Page: React.FC = () => {
  return (
    <MapView
      id="standard-html-id-for-wrapper-div"
      style={{ /* use this to ensure map is the size you need */ }}
      MapProperties={{ basemap: "topo-vector" }}
      ViewProperties={{ extent: SOME_EXTENT_OBJECT }}
    />
  )
}

MapContextProvider

In order for <MapView /> child components to be properly associated with the underlying map and view instances, a <MapView /> provides its own MapContextProvider wrapper out of the box. However, if you find that you need to access the map and view from outside the <MapView /> component, you can instead use the MapViewCore wrapped in the MapContextProvider:

// App.tsx
import { MapViewCore, MapContextProvider } from 'lib/map/MapView';

const App = () => {
  // Wrap MapViewCore and other components that need access to the map context
  return (
    <MapContextProvider>
      <MapViewCore />
      <OtherUI />
    </MapContextProvider>
  )
};

// OtherUI.tsx
import { useContext } from 'react';
import { MapContext } from 'lib/map/MapView';

const OtherUI = () => {
  const { view } = useContext(MapContext);
  return <button onClick={() => view.zoom = view.zoom + 1}>Zoom in!</button>
}

Props

Extends HTMLAttributes<HTMLDivElement>. Additional props are:

children

Other ESRIEACT map components, like layers, or widgets, etc.

MapProperties

MapProperties: Map Properties

ViewProperties

ViewProperties extends MapView properties. Accepts the additional field, events:

ViewProperties.events

The ViewProperties prop can take an events property, which is an ViewEventHandlerFnMap, or a function that takes the MapView instance as a parameter, and returns a ViewEventHandlerFnMap. A ViewEventHandlerFnMap is an object whose keys are possible events on a MapView, and whose values are the event handlers to be called on those events:

  "resize": __esri.ViewResizeEventHandler;
  "layerview-create": __esri.ViewLayerviewCreateEventHandler;
  "layerview-create-error": __esri.ViewLayerviewCreateErrorEventHandler;
  "layerview-destroy": __esri.ViewLayerviewDestroyEventHandler;
  "click": HandlerWithOptionalModifiers<__esri.ViewClickEventHandler>;
  "double-click": HandlerWithOptionalModifiers<__esri.ViewDoubleClickEventHandler>;
  "immediate-double-click": HandlerWithOptionalModifiers<__esri.ViewImmediateDoubleClickEventHandler>;
  "immediate-click": HandlerWithOptionalModifiers<__esri.ViewImmediateClickEventHandler>;
  "hold": HandlerWithOptionalModifiers<__esri.ViewHoldEventHandler>;
  "drag": HandlerWithOptionalModifiers<__esri.ViewDragEventHandler>;
  "mouse-wheel": HandlerWithOptionalModifiers<__esri.ViewMouseWheelEventHandler>;
  "key-down": HandlerWithOptionalModifiers<__esri.ViewKeyDownEventHandler>;
  "key-up": HandlerWithOptionalModifiers<__esri.ViewKeyUpEventHandler>;
  "pointer-down": HandlerWithOptionalModifiers<__esri.ViewPointerDownEventHandler>;
  "pointer-move": HandlerWithOptionalModifiers<__esri.ViewPointerMoveEventHandler>;
  "pointer-up": HandlerWithOptionalModifiers<__esri.ViewPointerUpEventHandler>;
  "pointer-enter": HandlerWithOptionalModifiers<__esri.ViewPointerEnterEventHandler>;
  "pointer-leave": HandlerWithOptionalModifiers<__esri.ViewPointerLeaveEventHandler>;
  "focus": __esri.ViewFocusEventHandler;
  "blur": __esri.ViewBlurEventHandler;

For more information on MapView events, see the ArcGIS JS API documentation. See ESRIACT examples here TODO