createLayerComponent

The createLayerComponent function can be used to create any type of component that extends from the ESRI Layer class. It takes in a function that creates the layer instance, a ref, and the layer properties, and returns a react-ready component that can be used as a child of the MapView.

Function signature

/**
 * Factory function to create an esrieact layer component
 * @param createLayer Function that takes in the layer properties
 * (which must extend from __esri.LayerProperties)
 *  and returns the layer instance
 * @param ref The react ref to be passed from the parent
 * @param properties The layer properties
 * @returns A context provider whose context is the instance to be passed to children,
 * or if there are no children, returns null.
 */
createLayerComponent: (
  createLayer: CreateLayerFunction<LayerComponentProps>,
  ref: Ref<__esri.Layer>,
  { children, events, layerOrder, ...properties }: LayerComponentProps,
) => JSX.Element | null;

Where

/**
 * Properties that can be applied to any ESRIEACT Layer component.  Extends from
 * esri's LayerProperties to include child components (i.e. in the case of GroupLayers)
 */
export type LayerComponentProps<
  T extends __esri.LayerProperties = __esri.LayerProperties,
  E extends Partial<LayerEventHandlerFnMap> = {},
> = React.PropsWithChildren<T> & { events?: E; layerOrder?: number };

/**
 * Function that takes in layer properties and returns an esri Layer instance. Properties must be
 * any esri properties that extend esri.LayerProperties, and optional children
 */
export type CreateLayerFunction<T extends LayerComponentProps> = (
  properties: T,
) => __esri.Layer;

Example Usage

Typescript

If you need to create a layer component that is not in ESRIEACT, you can use createLayerComponent to create it. For example, here we want to create a GeoJSONLayer component. We first define the event handler function map for the GeoJSONLayer component, and then define the createLayer function that takes in the layer properties and returns the GeoJSONLayer instance. Finally, we use createLayerComponent to create the GeoJSONLayer component.

// GeoJSONLayer.ts

/**
 * An event handler function map specific to a GeoJSONLayer
 */
export type GeoJSONLayerEventHandlerFnMap = Partial<{
  refresh: __esri.GeoJSONLayerRefreshEventHandler;
  edits: __esri.GeoJSONLayerEditsEventHandler;
  "layerview-create": __esri.GeoJSONLayerLayerviewCreateEventHandler;
  "layerview-create-error": __esri.GeoJSONLayerLayerviewCreateErrorEventHandler;
  "layerview-destroy": __esri.GeoJSONLayerLayerviewDestroyEventHandler;
}>;

/**
 * Function that takes in properties of a GeoJSONLayer, and returns the GeoJSONLayer instance
 */
const createLayer = (
  properties: LayerComponentProps<
    __esri.GeoJSONLayerProperties,
    GeoJSONLayerEventHandlerFnMap
  >,
): __esri.GeoJSONLayer => {
  return new EsriGeoJSONLayer(properties);
};

/**
 * The GeoJSONLayer React component
 */
export const GeoJSONLayer = React.forwardRef<
  __esri.GeoJSONLayer,
  LayerComponentProps<
    __esri.GeoJSONLayerProperties,
    GeoJSONLayerEventHandlerFnMap
  >
>((properties, ref) => createLayerComponent(createLayer, ref, properties));

Javascript

Most of the code above is typescript typings to ensure correct property typing, as well as event typing. If we look at this through the lens of pure Javascript, the code is quite simple:

const createLayer = (properties) => new EsriGeoJSONLayer(properties);

export const GeoJSONLayer = (properties, ref) =>
  createLayerComponent(createLayer, ref, properties);

Usage

Now you can use GeoJSONLayer as a child of a MapView:

Live Editor

// Example.tsx
function Example() {
  return (
    <MapView
      ViewProperties={{ extent: OAHU_EXTENT_2 }}
      MapProperties={{ basemap: "topo-vector" }}
      style={{ height: "300px", width: "100%" }}
    >
      <GeoJSONLayer url={SAMPLE_GEOJSON_URL} />
    </MapView>
  );
}

Result

Loading...

In this way, createLayerComponent can be used to create most types of ArcGIS JS API layer components. If you see a layer component that you need, but it's not in ESRIEACT, you can create it using createLayerComponent. Or better yet, open a PR to add it to ESRIEACT!