React + OpenLayers
npm install react-openlayersA minimal React wrapper of OpenLayers 10
written in TypeScript
npm install react-openlayers
Example
typescript
import { OSM } from 'ol/source';
import { Map, View, TileLayer } from 'react-openlayers';
import 'react-openlayers/dist/index.css'; // for cssexport default function(props) {
return (
);
}
`List of components
$3
| OpenLayers Object | React Component | Description |
| -------------- | --------------- | ------------ |
| ol/Map | | It manages layers, controls, interactions, and the overall rendering of the map. |
| ol/Overlay | | It add HTML elements to the map at specific coordinates. |
| ol/View | | A View object represents a simple 2D view of the map |
| ol/Feature | | ol/Feature customized as a map maker. |$3
| OpenLayers Object | React Component | Description |
| -------------- | --------------- | ------------ |
| ol/layer/Graticule | | Displays a graticule (grid of latitude and longitude lines) on the map. |
| ol/layer/Heatmap | | Displays a heatmap based on vector data. |
| ol/layer/Tile | | Displays tiled images, such as those from a tile server. |
| ol/layer/Image | | Displays full image, such as those from a pure wms server. |
| ol/layer/Vector | | Displays vector data, such as points, lines, and polygons. |
| ol/layer/WebGLTile | | Displays tiled images using WebGL for rendering. |$3
| OpenLayers Object | React Component | Description |
| -------------- | --------------- | ------------ |
| ol/control/Attribution | | Displays attribution information for the map layers |
| ol/control/FullScreen | | Adds a button to toggle full-screen mode |
| ol/control/MousePosition | | Displays the current mouse position in coordinates |
| ol/control/OverviewMap | | Displays an overview map of the main map |
| ol/control/ScaleLine | | Displays an overview map of the main map |
| custom | | Layer switcher |
| custom | | Shape Drawing shapes; point, rectangle, circle, ploygon |
| custom | | Search an address and set a marker |$3
| OpenLayers Object | React Component | Description |
| -------------- | --------------- | ------------ |
| ol/interaction/DragRotateAndZoom| | Allows rotating and zooming the map by dragging. |
| ol/interaction/Link | | Synchronizes the map view with the URL. |
| ol/interaction/Pointer | | Base class for pointer interactions. |
| ol/interaction/Select | | Allows selecting features on the map. |
| ol/interaction/Translate | | 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 directory2. 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,