Skip to main content

createLayerViewComponent

The createLayerViewComponent function can be used to create any type of component that extends from the ESRI LayerView class.

Function signature​

createLayerViewComponent<
  P extends __esri.LayerViewProperties,
  R extends __esri.LayerView,
>(): React.ForwardRefExoticComponent<
  React.PropsWithoutRef<P> & React.RefAttributes<R>
>;

Example Usage​

If you need to create a layer view component that is not in ESRIEACT, you can use createLayerViewComponent to create it. For example, here we want to create a GeoJSONLayerView component:

Typescript​

const GeoJSONLayerView = createLayerViewComponent<
  __esri.GeoJSONLayerViewProperties,
  __esri.GeoJSONLayerView
>();

Javascript​

You may notice that there are no arguments to the createLayerViewComponent function. This is because the LayerView component is a generic component that can be used to create any type of layer view component. Most of the code above is for proper typescript typing. The javascript version is much simpler:

const GeoJSONLayerView = createLayerViewComponent();

As you can see, createLayerViewComponent is actually agnostic to the layer it uses as a parent. A generic LayerView component can be used to create any type of layer view component.

const GenericLayerView = createLayerViewComponent();

This will work as a layerView for any kind of layer, but you will not have any type safety or intellisense for the specific layer this layerView belongs to.

Usage​

Live Editor
const GeoJSONLayerView = createLayerViewComponent<
  __esri.GeoJSONLayerViewProperties,
  __esri.GeoJSONLayerView
>();

function Example() {
  return (
    <MapView
      ViewProperties={{ extent: OAHU_EXTENT_2 }}
      MapProperties={{ basemap: "topo-vector" }}
      style={{ height: "300px", width: "100%" }}
    >
      <GeoJSONLayer url={SAMPLE_GEOJSON_URL}>
        <GeoJSONLayerView
          featureEffect={{
            filter: { where: "type='beach'" },
            includedEffect: "drop-shadow(3px, 3px, 3px, green)",
          }}
        />
      </GeoJSONLayer>
    </MapView>
  );
}

render(<Example />);
Result
Loading...