https://github.com/siposdani87/expo-maps-polygon-editor
This multi polygon editor is written in TypeScript for the React Native Maps component. This component allows you to select, create, or modify areas on Apple Maps and Google Maps. You can edit multiple polygons at the same time.
https://github.com/siposdani87/expo-maps-polygon-editor
expo polygon-editor react-native-maps
Last synced: 2 months ago
JSON representation
This multi polygon editor is written in TypeScript for the React Native Maps component. This component allows you to select, create, or modify areas on Apple Maps and Google Maps. You can edit multiple polygons at the same time.
- Host: GitHub
- URL: https://github.com/siposdani87/expo-maps-polygon-editor
- Owner: siposdani87
- License: mit
- Created: 2021-10-29T12:22:42.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-05-07T09:46:06.000Z (about 1 year ago)
- Last Synced: 2024-09-21T23:21:29.732Z (9 months ago)
- Topics: expo, polygon-editor, react-native-maps
- Language: TypeScript
- Homepage:
- Size: 3.51 MB
- Stars: 16
- Watchers: 1
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @siposdani87/expo-maps-polygon-editor
[](https://www.npmjs.com/package/@siposdani87/expo-maps-polygon-editor)
[](https://www.npmjs.com/package/@siposdani87/expo-maps-polygon-editor)
[](./LICENSE)
This multi polygon editor written in TypeScript for the React Native Maps component. This component allows you to select, create, or modify areas on Apple Maps and Google Maps. You can edit multiple polygons at the same time.
## Getting Started
### Installing
```
npm install @siposdani87/expo-maps-polygon-editor
```
### Basic Usage
Check example directory for more samples and options.
```js
import { PolygonEditor, getRandomPolygonColors, PolygonEditorRef, MapPolygonExtendedProps } from '@siposdani87/expo-maps-polygon-editor';
const [strokeColor, fillColor] = getRandomPolygonColors();
const polygons: MapPolygonExtendedProps[] = [{
key: 'key_0',
coordinates: [
{
latitude: 47.64623435880296,
longitude: 17.488861083984375,
},
{
latitude: 47.69155620579073,
longitude: 17.514411988020868,
},
{
latitude: 47.65998584885824,
longitude: 17.54299213146342,
},
],
strokeWidth: 2,
strokeColor,
fillColor,
}];
export const PolygonEditorComponents = () => {
const polygonEditorRef = useRef(null);
return (
);
};
const styles = StyleSheet.create({
mapContainer: {
...StyleSheet.absoluteFillObject,
},
});
```
## Props
### PolygonEditor
| Prop | Type | Description |
| ----------------- | --------------------------------------------------------- | ----------- |
| polygons * | MapPolygonExtendedProps[] | Input polygons array |
| onPolygonChange | (index: number, polygon: MapPolygonExtendedProps) => void | change polygon callback |
| onPolygonCreate | (polygon: MapPolygonExtendedProps) => void | create polygon callback |
| onPolygonRemove | (index: number) => void | Delete polygon callback |
| onPolygonSelect | (index: number, polygon: MapPolygonExtendedProps) => void | Select polygon callback |
| onPolygonUnselect | (index: number, polygon: MapPolygonExtendedProps) => void | Deselect polygon callback |
| disabled | boolean | Disable editing on component |
## Preview
## Bugs or Requests
If you encounter any problems feel free to open an [issue](https://github.com/siposdani87/expo-maps-polygon-editor/issues/new?template=bug_report.md). If you feel the library is missing a feature, please raise a [ticket](https://github.com/siposdani87/expo-maps-polygon-editor/issues/new?template=feature_request.md). Pull request are also welcome.
## Developer
[Dániel Sipos](https://siposdani87.com)
## Sponsors
This project is generously supported by [TrophyMap](https://trophymap.org), [I18Nature](https://i18nature.com), and several other amazing organizations.