Components

The Map component

The <Map> component is the main component, it allows to transition from react-dom to the @react-ol/fiber rendering realm.

The <Map/> component takes props for <div/> element that wraps the map, and for the <olMap/> component that is the actual OpenLayers ol.Map object.

import { Map } from "@react-ol/fiber";

export const Example = () => (
  <Map style={{ width: "100%", height: "640px" }}>
    <olView initialCenter={[0, 0]} initialZoom={2} />
    <olLayerTile preload={Infinity}>
      <olSourceOSM />
    </olLayerTile>
  </Map>
);

OpenLayers components

All OpenLayers classes are available as React Component through the automatic API.

The naming scheme is using the camel-cased fully qualified names of the classes.

Examples:

OpenLayers ClassReact OpenLayers Fiber component
ol/View<olView/>
ol/geom/Polygon<olGeomPolygon/>
ol/layer/Heatmap<olLayerHeatmap/>
import { Map } from "@react-ol/fiber";

export const Example = () => (
  <Map>
    <olView initialCenter={[0, 0]} initialZoom={2} />
    <olLayerTile preload={Infinity}>
      <olSourceOSM />
    </olLayerTile>
  </Map>
);