Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/freenowtech/react-polygon-editor
Create, edit and display polygon in your React application
https://github.com/freenowtech/react-polygon-editor
Last synced: 10 days ago
JSON representation
Create, edit and display polygon in your React application
- Host: GitHub
- URL: https://github.com/freenowtech/react-polygon-editor
- Owner: freenowtech
- License: apache-2.0
- Created: 2019-11-08T15:44:59.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-01-10T16:14:46.000Z (12 months ago)
- Last Synced: 2024-09-24T09:18:59.624Z (3 months ago)
- Language: TypeScript
- Size: 11.5 MB
- Stars: 13
- Watchers: 6
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
README
# @freenow/react-polygon-editor
### Table of contents
- About
- Getting started
- Components
- How to run locally
- Contribution
### About
React Polygon Editor provides react components for displaying and editing polygons.
We use leaflet for rendering maps. And typescript to provide a strongly typed interface.
### Getting started
First install @freenow/react-polygon-editor:
```bash
npm i -S @freenow/react-polygon-editor
```
Make sure you have also installed all peer dependencies. Have a look at [package.json](package.json) for more information.
```bash
npm i -S react react-dom react-leaflet leaflet styled-components
```
inject the leaflet css style.
```typescript
Import 'leaflet/dist/leaflet.css';
```
You can also link the css style from a CDN in your index.html
```html
```
### Components
##### PolygonDraw
**Props**
- **polygon**: _Coordinate[] | Coordinate[][]_ (Single or list of polygons to render)
- **activeIndex**?: _number_ (index of currently active polygon, can be omitted when only one polygon exists. **Default value: 0**)
- **highlightedIndex**?: _number_ (index of the polygon that should be highlighted.)
- **boundary**?: _Coordinate[]_
- **initialCenter**?: _Coordinate_ (The initial center will be used to localize the map on the first render if no polygon or boundary polygon were provided)
- **initialZoom**?: _number_ (The initial zoom will be used to localize the map on the first render if no polygon or boundary polygon were provided)
- **editable**?: _boolean_ (Allows enabling and disabling polygon editing. **Default value: true**)
- **onChange**?: _(polygonCoordinates: Coordinate[], isValid: boolean) => void_
- **onClick**?: _(index: number) => void_ (called with the index of the polygon that was clicked on)
- **onMouseEnter**?: _(index: number) => void_ (called with the index of the polygon that was entered)
- **onMouseLeave**?: _(index: number) => void_ (called with the index of the polygon that was left)
The initialCenter and initialZoom props are applicable only when both the polygon and the boundary coordinates are empty.
This flow explains which parameters are used to focus the map:
For more details, have a look at the Component definition in [PolygonDraw](src/PolygonDraw/PolygonDraw.tsx)
### How to run locally
You can run the library locally. We use [storybook](https://storybook.js.org/) to illustrate what can be done with the components.
Simply run:
```bash
npm i && npm start
```
### Contribution
1. Discuss the contribution with the maintainers
2. Make sure the the code is well tested and adheres to code convention
3. Create a pull request