Props

The openlayers components take three different kind of props:

• classic props
• props prefixed with initial
• Special props:
  • args to control OpenLayers constructor args
  • attach to customize attachment of components to their parents
  • ref to access the OpenLayers object imperatively

Classic props#

Classic props behave like any prop in React but the OpenLayer object must have a setter for the prop to work fine (or being settable by the generic setter set(key, value).

<olView center={[0, 6000000]} />

This will become const myView = new ol.View(). And then each re-render of this component will call myView.setCenter([0, 6000000]).

initial-prefixed props#

The initial prefix applies to the same OpenLayers properties as classic props. It gives you the ability to set a default value to a prop so it behaves as a uncontrolled input. Here is an example:

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

function MyMap() {
  return (
    <Map style={{ width: "100%", height: "640px" }}>
      <olView initialCenter={[0, 6000000]} initialZoom={6} />
      <olLayerTile>
        <olSourceOSM />
      </olLayerTile>
    </Map>
  );
}

By using the initial prefix here the map won't reset the position and the zoom each time the component MyMap is rerendered.

args prop#

You must use the args prop for properties of OpenLayers objects who don't have a specific setter or isn't updatable through the generic setter. Here is an example:

function MyMap() {
  return (
    <Map style={{ width: "100%", height: "640px" }}>
      <olView initialCenter={[0, 6000000]} initialZoom={6} />
      <olLayerTile>
        <olSourceOSM />
      </olLayerTile>
      <olLayerVector>
        <olSourceVector>
          <olFeature>
            <olStyleStyle attach="style">
              <olStyleRegularShape
                attach="image"
                args={{
                  fill,
                  stroke,
                  radius: 20,
                  points: 4,
                  angle: Math.PI / 4,
                }}
              />
            </olStyleStyle>
            <olGeomPoint coordinates={[0, 6000000]} />
          </olFeature>
        </olSourceVector>
      </olLayerVector>
    </Map>
  );
}

The args's properties are directly passed in the openlayers object's constructor. If a property value changed during you component lifecycle it trigger a special behavior that delete the openlayers object and create a new one with the updated args property value.

attach prop#

React OpenLayers Fiber usually infers how to relate each component to its parent.

For example it knows that an olSource react component inside a olLayer react component will mean that the ol.Source OpenLayer Object will be attached to the ol.Layer OpenLayer Object's source property, using ol.layer.setSource(...), or ol.layer.set("source",...).

You can override this behavior by using the attach prop. If you use attach="foobar" then React OpenLayers will attach to the parent using ol.layer.setFoobar(...), or ol.layer.set("foobar",...).

ref prop#

The ref prop allows to access the underlying OpenLayers object imperatively.

For example, to access the ol.View OpenLayers object instance, you can use the <olView ref={viewRef} /> prop:

export const AccessibleMap = () => {
  const viewRef = useRef();
  return (
    <div>
      <button
        onClick={() => {
          viewRef.current?.setZoom(viewRef.current.getZoom() + 1);
        }}
      >
        Zoom in
      </button>
      <Map>
        <olView ref={viewRef} initialCenter={[0, 0]} initialZoom={2} />
        <olLayerTile>
          <olSourceOSM />
        </olLayerTile>
      </Map>
    </div>
  );
};