Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Initial lasso mode #1015

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Initial lasso mode #1015

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
24d2577
Initial lasso mode
Sep 29, 2020
61cc335
Remove accidentally added file
Sep 30, 2020
38d337f
Eliminate not yet used turf.simplify
Sep 30, 2020
e895cb6
Simplify the polygon resulted by the lasso tool
Sep 30, 2020
ca7cf3e
Update yarn.lock
Sep 30, 2020
45c005f
Fix failing unit tests
Oct 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions debug/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,12 @@ map.on('load', () => {
Draw.changeMode('draw_polygon');
};

// Jump into draw polygon mode via a custom UI element
const startLasso = document.getElementById('start-lasso');
startLasso.onclick = function() {
Draw.changeMode('draw_lasso');
};

// Jump into static mode via a custom UI element
const startStatic = document.getElementById('start-static');
startStatic.onclick = function() {
Expand Down
3 changes: 2 additions & 1 deletion debug/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
body { margin:0; padding:0; }
html, body, #map { height: 100%; }
.start-draw {
width: 315px;
width: 385px;
position: absolute;
left :10px;
bottom: 10px;
Expand All @@ -37,6 +37,7 @@
<body>
<div id='map'></div>
<div class='start-draw' >
<div id='start-lasso'>LASSO</div>
<div id='start-static'>STATIC</div>
<div id='start-point'>POINT</div>
<div id='start-line'>LINE</div>
Expand Down
3 changes: 3 additions & 0 deletions dist/mapbox-gl-draw.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 8 additions & 2 deletions docs/API.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ All of the following options are optional.
- `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.
- `clickBuffer`, number (default: `2`): Number of pixels around any feature or vertex (in every direction) that will respond to a click.
- `touchBuffer`, number (default: `25`): Number of pixels around any feature of vertex (in every direction) that will respond to a touch.
- `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`.
- `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`, `lasso`, `trash`, `combine_features` and `uncombine_features`. By default, all controls are on. To change that default, use `displayControlsDefault`.
- `displayControlsDefault`, boolean (default: `true`): The default value for `controls`. For example, if you would like all controls to be *off* by default, and specify an allowed list with `controls`, use `displayControlsDefault: false`.
- `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.
- `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/main/docs/MODES.md).
Expand Down Expand Up @@ -75,6 +75,12 @@ Lets you draw a LineString feature.

Lets you draw a Polygon feature.

### `draw_lasso`

`Draw.modes.DRAW_LASSO === 'draw_lasso'`

Lets you draw a Polygon feature with the Lasso tool.

### `draw_point`

`Draw.modes.DRAW_POINT === 'draw_point'`
Expand Down Expand Up @@ -541,7 +547,7 @@ property | values | function
--- | --- | ---
meta | feature, midpoint, vertex | `midpoint` and `vertex` are used on points added to the map to communicate polygon and line handles. `feature` is used for all features.
active | true, false | A feature is active when it is 'selected' in the current mode. `true` and `false` are strings.
mode | simple_select, direct_select, draw_point, draw_line_string, draw_polygon | Indicates which mode Draw is currently in.
mode | simple_select, direct_select, draw_point, draw_line_string, draw_polygon, draw_lasso | Indicates which mode Draw is currently in.

Draw also provides a few more properties on features, but they should not be used for styling. For details on them, see "Using Draw with Mapbox GL JS's `queryRenderedFeatures`" below.

Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@
"@mapbox/geojson-normalize": "0.0.1",
"@mapbox/geojsonhint": "3.0.0",
"@mapbox/point-geometry": "0.1.0",
"@turf/simplify": "^5.1.5",
"hat": "0.0.3",
"lodash.isequal": "^4.2.0",
"xtend": "^4.0.1"
Expand Down
3 changes: 3 additions & 0 deletions src/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export const classes = {
CONTROL_BUTTON: 'mapbox-gl-draw_ctrl-draw-btn',
CONTROL_BUTTON_LINE: 'mapbox-gl-draw_line',
CONTROL_BUTTON_POLYGON: 'mapbox-gl-draw_polygon',
CONTROL_BUTTON_LASSO: 'mapbox-gl-draw_lasso',
CONTROL_BUTTON_POINT: 'mapbox-gl-draw_point',
CONTROL_BUTTON_TRASH: 'mapbox-gl-draw_trash',
CONTROL_BUTTON_COMBINE_FEATURES: 'mapbox-gl-draw_combine',
Expand All @@ -28,6 +29,7 @@ export const cursors = {
};

export const types = {
LASSO: 'lasso',
POLYGON: 'polygon',
LINE: 'line_string',
POINT: 'point'
Expand All @@ -48,6 +50,7 @@ export const geojsonTypes = {
export const modes = {
DRAW_LINE_STRING: 'draw_line_string',
DRAW_POLYGON: 'draw_polygon',
DRAW_LASSO: 'draw_lasso',
DRAW_POINT: 'draw_point',
SIMPLE_SELECT: 'simple_select',
DIRECT_SELECT: 'direct_select',
Expand Down
2 changes: 2 additions & 0 deletions src/events.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,8 @@ export default function(ctx) {
changeMode(Constants.modes.DRAW_LINE_STRING);
} else if (event.keyCode === 51 && ctx.options.controls.polygon) {
changeMode(Constants.modes.DRAW_POLYGON);
} else if (event.keyCode === 83 && ctx.options.controls.lasso) {
changeMode(Constants.modes.DRAW_LASSO);
}
};

Expand Down
Loading