React components for OpenLayers

A minimal React wrapper of OpenLayers 10 written in TypeScript

Install

npm install react-openlayers 

Example

import { OSM } from 'ol/source';
import { Map, View, TileLayer } from 'react-openlayers';
import 'react-openlayers/dist/index.css'; // for css

export default function(props) {
  return ( 
    <Map controls={[]} interactions={[]}>
      <TileLayer source={new OSM()} />
      <View center={[-10997148, 4569099]} zoom={4}/>
    </Map>
  );
}

List of components

Base

| OpenLayers Object | React Component | Description | | -------------- | --------------- | ------------ | | ol/Map | <Map /> | It manages layers, controls, interactions, and the overall rendering of the map. | | ol/Overlay | <Overlay />| It add HTML elements to the map at specific coordinates. | | ol/View | <View /> | A View object represents a simple 2D view of the map | | ol/Feature | <Marker /> | ol/Feature customized as a map maker. |

Layers

| OpenLayers Object | React Component | Description | | -------------- | --------------- | ------------ | | ol/layer/Graticule | <GraticuleLayer /> | Displays a graticule (grid of latitude and longitude lines) on the map. | | ol/layer/Heatmap | <HeatmapLayer /> | Displays a heatmap based on vector data. | | ol/layer/Tile | <TileLayer /> | Displays tiled images, such as those from a tile server. | | ol/layer/Image | <ImageLayer /> | Displays full image, such as those from a pure wms server. | | ol/layer/Vector | <VectorLayer /> | Displays vector data, such as points, lines, and polygons. | | ol/layer/WebGLTile | <WebGLLayer /> | Displays tiled images using WebGL for rendering. |

Controls

| OpenLayers Object | React Component | Description | | -------------- | --------------- | ------------ | | ol/control/Attribution | <AttributionControl /> | Displays attribution information for the map layers | | ol/control/FullScreen | <FullScreenControl /> | Adds a button to toggle full-screen mode | | ol/control/MousePosition | <MousePositionControl /> | Displays the current mouse position in coordinates | | ol/control/OverviewMap | <OverviewMapControl /> | Displays an overview map of the main map | | ol/control/ScaleLine | <ScaleLineControl /> | Displays an overview map of the main map | | custom | <LayersControl /> | Layer switcher | | custom | <DrawControl /> | Shape Drawing shapes; point, rectangle, circle, ploygon | | custom | <SearchControl /> | Search an address and set a marker |

Interactions

| OpenLayers Object | React Component | Description | | -------------- | --------------- | ------------ | | ol/interaction/DragRotateAndZoom| <DragRotateAndZoomInteraction /> | Allows rotating and zooming the map by dragging. | | ol/interaction/Link | <LinkInteraction /> | Synchronizes the map view with the URL. | | ol/interaction/Pointer | <PointerInteraction /> | Base class for pointer interactions. | | ol/interaction/Select | <SelectInteraction /> | Allows selecting features on the map. | | ol/interaction/Translate | <TranslateInteraction /> | Allows translating (moving) features on the map. |

For developers

There are two group of sources and corresponding builds.

1. React component library

   Code for component library is in ./src/lib directory. This is to be published to npm after build, $ npm run build:lib, which produces output to ./dist directory

2. Storybook documentation.

   Code for Storybook is in ./src/stories. Storybook documents and demonstrates the usage of each component. It is deployed to Github Pages.

   When main branch is updated, a Github Action runs the build command, $ npm run build:storybook, which writes to ./storybook-static directory, and the Github Action deploys the direcory to the Github Pages.