react-map-polygon-selector

React Map Polygon Selector Component

How To Install

npm install react-map-polygon-selector

How To Use

Wrap this component in whatever you like...

import UIMapPoly from 'react-map-polygon-selector';

export default class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.doSubmit.bind(this);
    this.getMatchData = this.doGetMatchData.bind(this);
  }
  doGetMatchData(data, callback) {
    console.log('getMatchData', { data, callback });
    const { bucket } = this.props;
    data.bucketId = bucket._id;
    Meteor.call('Buckets.GetMapsMatchData', data, callback);
    // callback(null, { matches: 99 });
  }
  doSubmit(data) {
    // translate map data into conf
    const { bucket } = this.props;
    if (!bucket.conf) {
      bucket.conf = {};
    }
    Object.keys(data).forEach(key => {
      if (!_.isObject(data[key])) return;
      if (typeof data[key].toJSON !== 'function') return;
      data[key] = data[key].toJSON();
    });
    bucket.conf.map = data;
    this.props.handleSubmitBuckets(bucket, Bert.callback);
  }
  handleOverlayRejected(reason) {
    Bert.error(reason);
  }
  render() {
    return (
      <div>
        <UIMapPoly
           editable={true}
           getMatchData={this.getMatchData}
           handleSubmit={this.handleSubmit}
           handleOverlayRejected={this.handleOverlayRejected}
           center={map.center}
           markers={map.markers}
           polygons={map.polygons}
           circles={map.circles}
           rectangles={map.rectangles}
           currentArea={map.currentArea}
           matchData={map.matchData}
        />
      </div>
    );
  };
};

How To Run Development Mode

npm install
npm run storybook