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

npm i -S react react-dom react-leaflet leaflet styled-components

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[] | 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

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

Changelog

[1.1.0] - 12.03.2020

• Feat: Rectangle selection
• Feat: Export polygons as GeoJSON, JTS or LatLng
• Feat: Import polygons from GeoJSON
• Fix: Prevent default behaviour for keyevents