{"_id":"@aspecscire/react-mapbox-gl-draw","_rev":"1-5d0daabaabdc907d3cf7a2b655c7c7b1","name":"@aspecscire/react-mapbox-gl-draw","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"@aspecscire/react-mapbox-gl-draw","version":"1.1.0","description":"Draw tools for Mapbox with React: react-mapbox-gl + mapbox-gl-draw","main":"lib/index.js","types":"lib/index.d.ts","repository":{"type":"git","url":"git+https://github.com/amaurymartiny/react-mapbox-gl-draw.git"},"author":{"name":"Amaury Martiny"},"license":"MIT","scripts":{"prebuild":"rimraf lib/","build":"tsc","lint":"tslint --project .","test":"echo skipped for now."},"peerDependencies":{"@mapbox/mapbox-gl-draw":"^1.0.2","prop-types":"^15.6.2","react-mapbox-gl":"https://registry.npmjs.org/@aspecscire/react-mapbox-gl/-/react-mapbox-gl-4.4.0.tgz"},"devDependencies":{"@mapbox/mapbox-gl-draw":"^1.1.1","@types/mapbox-gl":"^0.51.3","@types/react":"^16.7.22","@types/supercluster":"^3.0.2","prop-types":"^15.6.2","react-mapbox-gl":"https://registry.npmjs.org/@aspecscire/react-mapbox-gl/-/react-mapbox-gl-4.4.0.tgz","rimraf":"^2.6.2","tslint":"^5.11.0","tslint-config-semistandard":"^7.0.0","typescript":"3.1.3"},"dependencies":{"@types/react-dom":"^16.0.11"},"gitHead":"9e9ba54a8ea1e731b79309643971d56b00ad8607","bugs":{"url":"https://github.com/amaurymartiny/react-mapbox-gl-draw/issues"},"homepage":"https://github.com/amaurymartiny/react-mapbox-gl-draw#readme","_id":"@aspecscire/react-mapbox-gl-draw@1.1.0","_npmVersion":"6.5.0","_nodeVersion":"11.8.0","_npmUser":{"name":"jibingeo","email":"hello@jibingeo.com"},"dist":{"integrity":"sha512-qp8+VRwuSt+8RZ6RY6Sjy7QcFSYUat4FYNnBAz+8dTHQVhonMu/RHP125hGxN084Uaw8Ro3gnZ9H9inzdGA1Hg==","shasum":"06f856e9624c5b8dbb910fab5bee59838f218223","tarball":"https://registry.npmjs.org/@aspecscire/react-mapbox-gl-draw/-/react-mapbox-gl-draw-1.1.0.tgz","fileCount":24,"unpackedSize":393563,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcUddXCRA9TVsSAnZWagAAG98P/25mcjivtu1xc36PJFjF\nfOImX3534sVIKhlwmXcYEcUcfuA2j1/6UOY48JBJO0K+rUr5t2jz27g9qy1i\nk1LdS6MGCe6aQzgANmV+hYHRIn60xDMmd39aPO9gEfvOTnf+HHWaZTYPMq4t\nUxecrCwd1H8WsIGBYlzojuBLKh4ShkF7FqOz9MQPQADLCNvKMrPSXwNv/Ps+\n+oCc27+SGnSfzwqKsYYgp+HrWK8wZMoYeZsbWuRzf6XgPw4dl6X1OTR/8IL2\nbMJEYQ7D74CTK/wWaU0DY8Sj50DYfosNRqXyVrL9Iujy1/BfXcrgQZsr6K3g\nMpgdSNjDRxKs3iJovP95/aRhlNGVq5uP1PgYGY/lwMMZeahPCH7m09d1hbwV\nXm9lt7X9shuezCMMoXNh6xrgHlNq3RBQqorqdBo2+FDtuVVpCvIPhSDcIDBw\nXBE14+D7e+yAEVGZwsBsaET5o0PAyY6PSm5/HxI/HTAh+E2MaKMwiVuUoICz\nIKAGwm1TVBIYajvEaOqlDCDI1WZ+2R1MeA2Y48YBNK9aJXkIZJg2VZyx+clF\nxwVVNvZjWN5b2iNKzOrxEvcDXFN78QGqarkh/3nH866gQTF22PeX0SabAwv+\nJwo92dtcuN71F54XbyvnPe9XbmWd9jcT/sNLkvmGeAflEU/PTPfA5TL15imS\ntvdC\r\n=XHn+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3JfieP5935HNSrDoo0iuWv/6wBsjw34nS/ciPmIZpXQIhAKkc6/aS0jIXIp7kX7Xo2fbzGnyAX+ThW1w+xWh+d4m8"}]},"maintainers":[{"name":"jibingeo","email":"hello@jibingeo.com"},{"name":"kiranshastri","email":"kiran.shastri@aspecscire.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-mapbox-gl-draw_1.1.0_1548867415120_0.5530825748172736"},"_hasShrinkwrap":false}},"time":{"created":"2019-01-30T16:56:54.857Z","1.1.0":"2019-01-30T16:56:55.244Z","modified":"2022-04-04T15:48:15.147Z"},"maintainers":[{"name":"jibingeo","email":"hello@jibingeo.com"},{"name":"kiranshastri","email":"kiran.shastri@aspecscire.com"}],"description":"Draw tools for Mapbox with React: react-mapbox-gl + mapbox-gl-draw","homepage":"https://github.com/amaurymartiny/react-mapbox-gl-draw#readme","repository":{"type":"git","url":"git+https://github.com/amaurymartiny/react-mapbox-gl-draw.git"},"author":{"name":"Amaury Martiny"},"bugs":{"url":"https://github.com/amaurymartiny/react-mapbox-gl-draw/issues"},"license":"MIT","readme":"# react-mapbox-gl-draw\n\n[![Travis (.org)](https://img.shields.io/travis/amaurymartiny/react-mapbox-gl-draw.svg)](https://travis-ci.org/amaurymartiny/react-mapbox-gl-draw)\n[![npm](https://img.shields.io/npm/v/react-mapbox-gl-draw.svg)](https://www.npmjs.com/package/react-mapbox-gl-draw)\n[![npm](https://img.shields.io/npm/dw/react-mapbox-gl-draw.svg)](https://www.npmjs.com/package/react-mapbox-gl-draw)\n\nDraw tools for Mapbox with React: react-mapbox-gl + mapbox-gl-draw.\n\nThis package is basically creating React bindings for [mapbox-gl-draw](https://github.com/mapbox/mapbox-gl-draw) so that it can be used with [react-mapbox-gl](https://github.com/alex3165/react-mapbox-gl).\n\n## Demo\n\nSee https://codesandbox.io/s/7z5qvmvqrq.\n\n## Getting Started\n\n```bash\nnpm install react-mapbox-gl mapbox-gl @mapbox/mapbox-gl-draw --save # required peer dependencies\nnpm install react-mapbox-gl-draw --save\n```\n\n```javascript\nimport ReactMapboxGl from 'react-mapbox-gl';\nimport DrawControl from 'react-mapbox-gl-draw';\n\n// Don't forget to import the CSS\nimport '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';\n\nconst Map = ReactMapboxGl({\n  accessToken:\n    'pk.eyJ1IjoiZmFrZXVzZXJnaXRodWIiLCJhIjoiY2pwOGlneGI4MDNnaDN1c2J0eW5zb2ZiNyJ9.mALv0tCpbYUPtzT7YysA2g'\n});\n\n<Map\n  style=\"mapbox://styles/mapbox/streets-v9\"\n  containerStyle={{\n    height: '100vh',\n    width: '100vw'\n  }}\n>\n  <DrawControl />\n</Map>;\n```\n\n## API\n\nHere are the props you can pass to `<DrawControl />`:\n\n- `keybindings`, boolean (default `true`): Whether or not to enable keyboard interactions for drawing.\n- `touchEnabled`, boolean (default `true`): Whether or not to enable touch interactions for drawing.\n- `boxSelect`, boolean (default `true`): Whether or not to enable box selection of features with `shift`+`click`+drag. If `false`, `shift`+`click`+drag zooms into an area.\n- `clickBuffer`, number (default: `2`): Number of pixels around any feature or vertex (in every direction) that will respond to a click.\n- `touchBuffer`, number (default: `25`): Number of pixels around any feature of vertex (in every directoin) that will respond to a touch.\n- `controls`, Object: Hide or show individual controls. Each property's name is a control, and value is a boolean indicating whether the control is on or off. Available control names are `point`, `line_string`, `polygon`, `trash`, `combine_features` and `uncombine_features`. By default, all controls are on. To change that default, use `displayControlsDefault`.\n- `displayControlsDefault`, boolean (default: `true`): The default value for `controls`. For example, if you would like all controls to be _off_ by default, and specify a whitelist with `controls`, use `displayControlsDefault: false`.\n- `styles`, Array\\<Object\\>: An array of map style objects. By default, Draw provides a map style for you. To learn about overriding styles, see the [Styling Draw](#styling-draw) section below.\n- `modes`, Object: over ride the default modes with your own. `MapboxDraw.modes` can be used to see the default values. More information on custom modes [can be found here](https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/MODES.md).\n- `defaultMode`, String (default: `'simple_select'`): the mode (from `modes`) that user will first land in.\n- `position`, String (default: `'top-left'`): the position of the draw controls on the map.\n\n### Draw Events passed as props\n\nThese additional props are functions that receive the event data, see [mapbox-gl-draw documentantion](https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/API.md).\n\n- `onDrawCreate`\n- `onDrawDelete`\n- `onDrawUpdate`\n- `onDrawCombine`\n- `onDrawUncombine`\n- `onDrawSelectionChange`\n- `onDrawModeChange`\n- `onDrawRender`\n- `onDrawActionable`\n\nTo learn more about `mapbox-gl-draw`: https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/API.md\n\nTo access the [Draw object](https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/API.md#api-methods) with all the API methods, you need to define a [ref](https://facebook.github.io/react/docs/refs-and-the-dom.html) on the `<DrawControl>` component, and the Draw object will be in the `draw` field of this ref:\n\n```javascript\n<Map\n  style=\"mapbox://styles/mapbox/streets-v9\"\n  containerStyle={{\n    height: '100vh',\n    width: '100vw'\n  }}>\n    <DrawControl\n      ref={(drawControl) => { this.drawControl = drawControl; }}\n    />\n</Map>\n\n//...\nhandleButtonClick() {\n  this.drawControl.draw.getAll(); // Or any other API method\n}\n```\n\n## Example\n\n```bash\ncd examples\nyarn install\nyarn start\n```\n\nThe example app should run on `localhost:3000`.\n\n## Testing\n\nOnly `semistandard` is run for linting. Proper testing needs to be added.\n","readmeFilename":"README.md"}