@freenow/react-polygon-editor

@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:

npm i -S @freenow/react-polygon-editor

Make sure you have also installed all peer dependencies. Have a look at package.json for more information.

inject the leaflet css style.

Import 'leaflet/dist/leaflet.css';

You can also link the css style from a CDN in your index.html

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />

Components

PolygonDraw

Props

• polygon: Coordinate[]
• 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

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

How to run locally

You can run the library locally. We use storybook to illustrate what can be done with the components.

Simply run:

npm i && npm start

Contribution

• Discuss the contribution with the maintainers
• Make sure the the code is well tested and adheres to code convention
• Create a pull request