As a user a want to have a drawing control to take measurements on a specific area of the map and have the possibility to save these areas within my layer tool
Requirements
- I want to have a control drawing tool in me main menu
- I want to drawing a different types of geometric: Radial, Rectangular, and polygonal
- I want to modify the dimensions and coordinates have to get accurate information
- I want to change the units measurement
- I want to be able to copy the measurements and location of the drawn shape
- In polygonal shape I want to enter a GeoJson code to draw an specific shape
- I want to convert my drawn shape to a saved layer inside the layers tool
- I want to add name and color before convert my shape in a layer
Units measurement included
- Distance:
- Centimeters
- Meters
- Kilometers
- Nautical miles
*Inches
- Feet
- Yards
- Miles
- Smoots
- Perimeter:
- Centimeters
- Meters
- Kilometers
- Nautical miles
- Inches
- Feet
- Yards
- Miles
- Smoots
- Area:
- Square meters
- Square kilometers
- Hectares
- Square nautical miles
- Square feet
- Square yards
- Square miles
- Acres
Special functionalities
The language presented into the login page is according to the current navigator language, but only two languages are supported: English and Spanish. If the navigator language is not English or Spanish it will default to English.
Interactive prototypes
See drawing control demo
Main design
![image](https://user-images.githubusercontent.com/62348928/78272697-7d759200-74d3-11ea-8c5e-4a31cf82c0ab.png)
![image](https://user-images.githubusercontent.com/62348928/78272720-836b7300-74d3-11ea-9162-951021424165.png)
![image](https://user-images.githubusercontent.com/62348928/78272748-8bc3ae00-74d3-11ea-9ae6-22f3b00f3292.png)
![image](https://user-images.githubusercontent.com/62348928/78272769-91b98f00-74d3-11ea-90bb-95c5d165bdf1.png)
![image](https://user-images.githubusercontent.com/62348928/78272849-a7c74f80-74d3-11ea-9ef3-caa6954932ab.png)
Acceptance criteria
Scenario
When I click on Drawing control it will show a Radial, Rectangular, and Polygonal option
Given I'm in another menu tool
And Sidebar menu is expanded
When Click on Drawing control
Then I see a Radial option with a circle icon
And Rectangular option with a rectangular icon
And Polygonal option with a pencil icon
Scenario
When I click on a drawing option, creation pane will be open and other options will be hidden
Given Drawing tool is selected
When I click on radial option
Then creation radial pane is open
And others drawing options are hidden
Scenario
When I click close button from any draw option, option is close and I'm able to select another geometric shape
Given Rectangular is selected
When I click on close
Then I'm able to select another geometric option
And The drawn shape is erased
Radial
Scenario
When I click on Radial option I will be able to draw on the map and I will see on sidebar a information pane with a shape description and the units of measurement options
Given Drawing tool is selected
When I click on Radial option
Then I see "Click to start drawing" in a tooltip
And Information pane options are empty
Given Radial option is selected
When I click on the map
Then I see "Release mouse to finish drawing" in a tooltip
And Radius information will change dynamically according to the movement of the mouse on the map
And Coordinates will show the location of the shape on the map
Given Radial option is selected
And I drew a shape on the map
When I click on units of measure
Then I see a dropdown menu with all possible options
And I able to change the unit of measure
Given Radius option is selected
And I drew a shape on the map
When I click on copy from any option on creating pane
Then I'm able to paste the information as a text
Given Radius option is selected
And I drew a shape on the map
When I click on Restart button
Then Drawn shape is erased
And I'm able to draw a new radial shape
Given Drawing tool is selected
And I drew a shape on the map
When I click on Convert into area of interest
Then Popup is shown
And I'm able to assign a name
And I'm able to assign a color
And I'm able to Save the shape
Given Convert into area of interest is selected
And and I already assigned name and color
When I click on Save
Then The shape is saved as a layer within the layers tool
And This layer is categorized as established in the backend code
Given Convert into area of interest is selected
And I just color is assigned
When I click on Save
Then Required field appear on name field as a validation
And Required field is colored red
Given Convert into area of interest is selected
And Just name is assigned
When I click on Save
Then Shape is saved with yellow color by default
Rectangular
Scenario
When I click on Rectangular option I will be able to draw on the map and 'll have on sidebar a information pane with a shape description and the units of measurement options
Given Drawing tool is selected
When I click on Rectangular option
Then I see "Click and drag to draw a rectangular" in a tooltip
And Information pane options are empty
Given Rectangular option is selected
When I click on the map
Then I see "Release mouse to finish drawing" in a tooltip
And Width information is dynamically calculated according to the movement of the mouse on the map
And Height is also dynamically calculated
And Coordinates will show the location of the shape on the map
Given Rectangular option is selected
And I drew a shape on the map
When I click on units of measure
Then I see a dropdown menu with all possible options
And I able to change the unit of measure
Given Rectangular option is selected
And I drew a shape on the map
When I click on copy from any option on creating pane
Then I'm able to paste the information as a text
Given Rectangular option is selected
And I drew a shape on the map
When I click on Restart button
Then Drawn shape is erased
And I'm able to draw a new rectangular shape
Given Drawing tool is selected
And I drew a shape on the map
When I click on Convert into area of interest
Then Popup is shown
And I'm able to assign a name
And I'm able to select a color
And I'm able to Save the shape
Given Convert into area of interest is selected
And and I already assigned name and color
When I click on Save
Then The shape is saved as a layer within the layers tool
And This layer is categorized as established in the backend code
Given Convert into area of interest is selected
And I just color is assigned
When I click on Save
Then Required field appear on name field as a validation
And Required field is colored red
Given Convert into area of interest is selected
And Just name is assigned
When I click on Save
Then Shape is saved with yellow color by default
Polygonal
Scenario
When I click on polygonal option I will be able to draw a shape on the map and I will see on sidebar a information pane with a shape description, units of measurement options, and the GeoJSON code
Given Drawing tool is selected
When I click on Polygonal option
Then I see "Click to start drawing" in a tooltip
And Information pane options are empty
Given Polygonal option is selected
When I move the mouse on the map
Then I see "Select starting point" in a tooltip
Given Polygonal option is selected
And The first point is marked
When I move the mouse on the map
Then I see the distance between first-point and the cursor in a tooltip
And First point is colored blue
Given Polygonal option is selected
And The first point is marked
When I click to mark the next points
Then I see the line distance between points in the middle of the line
And All points are colored yellow except first point
Given Polygonal option is selected
And I have more than one point marked
When I want to finish the shape
Then I have at least three points marked
Given Polygonal option is selected
And I drew a shape on the map
When I close the shape
Then A middle nodes appear in the between the lines
And I'm able to edit the shape
Given Polygonal option is selected
And I drew a shape on the map
When I see on shape information panel
Then I'm able to see and edit perimeter
And I'm able to see and edit area
And I'm able to edit or enter a GeoJSON
Given Polygonal option is selected
And I drew a shape on the map
When I click on units of measure
Then I see a dropdown menu with all possible options
And I able to change the unit of measure
Given Polygonal option is selected
And I drew a shape on the map
When I click on copy from any option on creating pane
Then I'm able to paste the information as a text
Given Polygonal option is selected
And I drew a shape on the map
When I click on Restart button
Then Drawn shape is erased
And I'm able to draw a new polygonal shape
Given Drawing tool is selected
And I drew a shape on the map
When I click on Convert into area of interest
Then Popup is shown
And I'm able to assign a name
And I'm able to select a color
And I'm able to Save the shape
Given Convert into area of interest is selected
And and I already assigned name and color
When I click on Save
Then The shape is saved as a layer within the layers tool
And This layer is categorized as established in the backend code
Given Convert into area of interest is selected
And I just color is assigned
When I click on Save
Then Required field appear on name field as a validation
And Required field is colored red
Given Convert into area of interest is selected
And Just name is assigned
When I click on Save
Then Shape is saved with yellow color by default
Given Polygonal option is selected
And I drew a shape on the map
When I press ECS
Then Tool is closed
And Shape is erased