{"id":16912132,"url":"https://github.com/amaury1093/react-mapbox-gl-draw","last_synced_at":"2025-08-17T11:04:52.285Z","repository":{"id":36989636,"uuid":"100995138","full_name":"amaury1093/react-mapbox-gl-draw","owner":"amaury1093","description":"Draw tools for Mapbox with React: 🗺️ react-mapbox-gl + 🖌️ mapbox-gl-draw","archived":false,"fork":false,"pushed_at":"2023-03-06T02:07:29.000Z","size":1711,"stargazers_count":184,"open_issues_count":50,"forks_count":28,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-17T11:03:47.872Z","etag":null,"topics":["mapbox-gl","mapbox-gl-draw","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/amaury1093.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":"amaurym","custom":"https://www.paypal.me/amaurym/20"}},"created_at":"2017-08-21T21:45:50.000Z","updated_at":"2025-07-24T15:08:50.000Z","dependencies_parsed_at":"2024-01-17T07:59:43.114Z","dependency_job_id":"2e0f1ce6-6889-499a-a0aa-5bdced8b2382","html_url":"https://github.com/amaury1093/react-mapbox-gl-draw","commit_stats":null,"previous_names":["amaury1729/react-mapbox-gl-draw","amaury1093/react-mapbox-gl-draw","amaurym/react-mapbox-gl-draw","amaurymartiny/react-mapbox-gl-draw"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/amaury1093/react-mapbox-gl-draw","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amaury1093%2Freact-mapbox-gl-draw","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amaury1093%2Freact-mapbox-gl-draw/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amaury1093%2Freact-mapbox-gl-draw/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amaury1093%2Freact-mapbox-gl-draw/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amaury1093","download_url":"https://codeload.github.com/amaury1093/react-mapbox-gl-draw/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amaury1093%2Freact-mapbox-gl-draw/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270837583,"owners_count":24654391,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-17T02:00:09.016Z","response_time":129,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mapbox-gl","mapbox-gl-draw","react"],"created_at":"2024-10-13T19:08:42.164Z","updated_at":"2025-08-17T11:04:52.237Z","avatar_url":"https://github.com/amaury1093.png","language":"TypeScript","funding_links":["https://github.com/sponsors/amaurym","https://www.paypal.me/amaurym/20"],"categories":[],"sub_categories":[],"readme":"# react-mapbox-gl-draw\n\n[![Actions Status](https://github.com/amaurym/react-mapbox-gl-draw/workflows/pr/badge.svg)](https://github.com/amaurym/react-mapbox-gl-draw/actions)\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[![dependencies Status](https://david-dm.org/amaurym/react-mapbox-gl-draw/status.svg)](https://david-dm.org/amaurym/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\u003e ❗ Important: This package does not work with Uber's [react-map-gl](https://github.com/uber/react-map-gl). See [this issue](https://github.com/uber/react-map-gl/issues/450) for more info.\n\n## Demo\n\nSee https://codesandbox.io/s/xenodochial-tu-pwly8.\n\n## Getting Started\n\n```bash\nyarn add react-mapbox-gl mapbox-gl @mapbox/mapbox-gl-draw # required peer dependencies\nyarn add react-mapbox-gl-draw\n```\n\n\u003e Note: this version of `react-mapbox-gl-draw` will only work with the latest `react-mapbox-gl@^4.4.0`. If you wish to use Draw tools with `react-mapbox-gl@2.x.x` or `react-mapbox-gl@v3.x.x`, please use [`react-mapbox-gl-draw@1.0.6`](https://github.com/amaurym/react-mapbox-gl-draw/tree/v1.0.6).\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\taccessToken:\n\t\t'pk.eyJ1IjoiZmFrZXVzZXJnaXRodWIiLCJhIjoiY2pwOGlneGI4MDNnaDN1c2J0eW5zb2ZiNyJ9.mALv0tCpbYUPtzT7YysA2g',\n});\n\n\u003cMap\n\tstyle=\"mapbox://styles/mapbox/streets-v9\"\n\tcontainerStyle={{\n\t\theight: '100vh',\n\t\twidth: '100vw',\n\t}}\n\u003e\n\t\u003cDrawControl /\u003e\n\u003c/Map\u003e;\n```\n\n## API\n\nHere are the props you can pass to `\u003cDrawControl /\u003e`:\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 direction) 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\\\u003cObject\\\u003e: An array of map style objects. By default, Draw provides a map style for you. To learn about overriding styles, see the [Styling Draw](https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/API.md#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-   `userProperties`, boolean (default: `false`): properties of a feature will also be available for styling and prefixed with `user_`, e.g., `['==', 'user_custom_label', 'Example']`\n\nAlso see the API reference for [`mapbox-gl-draw`](https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/API.md).\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 `\u003cDrawControl\u003e` component, and the Draw object will be in the `draw` field of this ref:\n\n```javascript\n\u003cMap\n  style=\"mapbox://styles/mapbox/streets-v9\"\n  containerStyle={{\n    height: '100vh',\n    width: '100vw'\n  }}\u003e\n    \u003cDrawControl\n      ref={(drawControl) =\u003e { this.drawControl = drawControl; }}\n    /\u003e\n\u003c/Map\u003e\n\n//...\nhandleButtonClick() {\n  this.drawControl.draw.getAll(); // Or any other API method\n}\n```\n\n## Example\n\nAn example application of how to use `react-mapbox-gl-draw` can be found in the `example/` folder. To run it, run:\n\n```bash\nyarn example\n```\n\nThe example app should run on `localhost:8080`. An online demo is also hosted on CodeSandbox: https://codesandbox.io/s/xenodochial-tu-pwly8.\n\n## Testing\n\nOnly `eslint` is run for linting. Proper testing needs to be added, see [#19](https://github.com/amaurym/react-mapbox-gl-draw/issues/19) if you would like to help.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famaury1093%2Freact-mapbox-gl-draw","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famaury1093%2Freact-mapbox-gl-draw","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famaury1093%2Freact-mapbox-gl-draw/lists"}