Components

OpenLayers-derived 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>
);

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>
);

The olPrimitive component

If you want to use your own already instanced objects, you can use the <olPrimitive/> wrapper and set a custom attach:

import React from "react";
import "ol/ol.css";
import { Map } from "@react-ol/fiber";
import { OSM } from "ol/source";

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

export const source = new OSM();
export const Example2 = () => {
  return (
    <Map style={{ width: "100%", height: "640px" }}>
      <olView initialCenter={[0, 0]} initialZoom={2} />
      <olLayerTile preload={Infinity} attach={"layers"}>
        <olPrimitive object={source} attach={"source"} />
      </olLayerTile>
    </Map>
  );
};

Here, Example1 and Example2 work the same way.