npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@freenow/react-polygon-editor

v2.0.1

Published

A react component for displaying and drawing geo polygons

Downloads

52

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:

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/[email protected]/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:

Focus flow

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

  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