@siposdani87/expo-maps-polygon-editor

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.

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<PolygonEditorRef>(null);

    return (
        <MapView
            style={styles.mapContainer}
        >
            <PolygonEditor
                ref={polygonEditorRef}
                polygons={polygons}
            />
        </MapView>
    );
};

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

Compatibility

Package Version	Expo SDK	React Native	React	New Architecture
1.3.x	55	0.83.x	19.x	Required
1.2.x	54	0.81.x	19.x	Supported
1.1.x	51	0.74.x	18.x	Supported
1.0.x	49–50	0.71–0.73	18.x	Interop layer

Supported Platforms

Platform	Map Provider
iOS	Apple Maps
Android	Google Maps
Web	Google Maps (JS API)

Known Limitations

• Android (v1.3.x): Dragging custom marker vertices does not work due to an upstream react-native-maps issue with New Architecture (#5877). Marker positioning is correct. This will be resolved once the upstream fix is merged.

Preview

Bugs or Requests

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket. Pull request are also welcome.

Developer

Dániel Sipos

Sponsors

This project is generously supported by TrophyMap, I18Nature, and several other amazing organizations.