Getting Started

Install

Install with your favorite package manager:

yarn add @react-ol/fiber
npm install @react-ol/fiber
pnpm add @react-ol/fiber

Usage

Use the Map component as the root. Children of the Map component should be OpenLayers objects that will be rendered on the map.

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

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

Examples

Examples are visible on the example section of this website.

Most of the examples are simply ported from openlayers examples section.