createRendererComponent

The createRendererComponent function can be used to create any type of component that extends from the ESRI Renderer class. It takes in a function that creates the renderer instance, a ref, and the renderer properties, and returns a react-ready component that can be used as a child of a Layer that can use a renderer. The returned renderer component can also take its own children, i.e. Symbol components that apply to the renderer.

Function signature

/**
 * Factory function to create an esrieact renderer component
 * @param createRenderer - Function that takes in renderer properties and returns an esri Renderer instance. Properties must be
 * any esri properties that extend esri.RendererProperties, and optional children
 * @param ref - Ref to the renderer instance
 * @param properties - Renderer properties
 * @returns A context provider whose context is the renderer instance to be passed to children, or if there are no children, returns null
 */
createRendererComponent: (
  createRenderer: CreateRendererFunction<RendererProps>,
  ref: Ref<__esri.Renderer>,
  { children, ...properties }: RendererProps,
) => JSX.Element | null;

Where

export type RendererProps<
  T extends __esri.RendererProperties = __esri.RendererProperties,
> = React.PropsWithChildren<T>;

Example Usage

Typescript

/**
 * Function that takes in properties of a SimpleRenderer and returns an esri SimpleRenderer instance
 */
const createSimpleRenderer = (
  properties: RendererProps<__esri.SimpleRendererProperties>,
) => new EsriSimpleRenderer(properties);

/**
 * The react SimpleRenderer component
 */
export const SimpleRenderer = React.forwardRef<
  __esri.UniqueValueRenderer,
  RendererProps<__esri.SimpleRendererProperties>
>((properties, ref) =>
  createRendererComponent(createSimpleRenderer, ref, properties),
);

Javascript

Much of the above code is for proper typescript typing. The javascript version is much simpler:

const createSimpleRenderer = (properties) => new EsriSimpleRenderer(properties);

export const SimpleRenderer = React.forwardRef((properties, ref) =>
  createRendererComponent(createSimpleRenderer, ref, properties),
);

Usage

Live Editor

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

render(<Example />);

Result

Loading...