https://github.com/allenhwkim/react-openlayers
OpenLayer React Components
https://github.com/allenhwkim/react-openlayers
map openlayers react typescript wrapper
Last synced: 10 months ago
JSON representation
OpenLayer React Components
- Host: GitHub
- URL: https://github.com/allenhwkim/react-openlayers
- Owner: allenhwkim
- License: mit
- Created: 2017-02-19T23:11:28.000Z (about 9 years ago)
- Default Branch: develop
- Last Pushed: 2025-03-19T15:25:22.000Z (12 months ago)
- Last Synced: 2025-03-31T16:13:45.791Z (11 months ago)
- Topics: map, openlayers, react, typescript, wrapper
- Language: TypeScript
- Homepage: https://allenhwkim.github.io/react-openlayers
- Size: 5.44 MB
- Stars: 227
- Watchers: 16
- Forks: 77
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - react-openlayers
- awesome-openlayers - React-openlayers
README
# React components for OpenLayers
A minimal React wrapper of [OpenLayers 10](https://openlayers.org/)
written in [TypeScript](https://www.typescriptlang.org/)
## Install
```
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 css
export default function(props) {
return (
);
}
```
## List of components
### Base
| 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. |
### Layers
| 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/Vector | `` | Displays vector data, such as points, lines, and polygons. |
| ol/layer/WebGLTile | `` | Displays tiled images using WebGL for rendering. |
### Controls
| 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 |
### Interactions
| 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](https://www.npmjs.com/package/react-openlayers)
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](https://allenhwkim.github.io/react-openlayers).
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.