Gaia Web is a map viewer built with React, Redux, Material UI and Leaflet. It provides generic functions such as search, display of layers, drawing tool, creation of areas of interest, timelapse, clustering, markers, polygons, contextual information with multimedia content, among others. It is a SPA that can be used against any backend.
Home Page: https://gaiadev.z13.web.core.windows.net
License: MIT License
Requirements
As a user
Special functionalities
Steps user must perform
Interactive prototypes
See demo layers
Visual Sample
Add any other context or screenshots about the feature request here.
When i click on layers it will show a sidebar with the layers grouped by categories
Given I'm on search tool
When When I click on layer tool
Then I see all categories collapsed
And Every category have an arrow down icon to indicate it can be expanded
When I click on a category name it will expand to show the items it contains
Given A category is collapse
When When I click on the category name
Then the pane is expanded
And Name category is colored blue
And show an arrow up icon ton indicate it can be collapsed
And Show all items contained with a checkbox and an icon
There are two types of layer that can be shown on the map:
1. Patterned layer
2. Colored layer
Given A category is expanded
When Category items are patterned layer type
Then Every item are identified by a different geometric icon
And Every geometric icon have a different patron
Given A category is expanded
When Category items are colored layer type
Then All item are identified with the same geometric icon
And All geometric icon will have a different color
And Geometric icon don't have a patron
When I click on a category item the checkbox will appear checked and will change color
Given A category is expanded
When I click on item name or on the checkbox
Then Checkbox is checked
And Checkbox color change to blue
And Item name is colored blue
And All items of this types are shown on the map
When clicks on a category item and it have more than 15 items a search control
Given A category is expanded
When When I click on a category item
And Category item have more than 15 subitems
Then A search box control is shown
And Scroll control is enable
And Category items are ordered according to backend configurations
When I start to type on search control, the system will automatically start filtering the elements and will show me only the elements that match my search
Given A category Item is checked
And Category item have more than 15 sub-items
And Search control is shown
And Scroll control is enable
When When I start to type on search box control
Then The system start filtering items
And Show me only items that match my search
And if match items are less than 15 scroll control is hide
When I mark some layer and I collapse the sidebar and then I expand it again, the marked layers will continue marked
Given I'm on layer tool
And Detected activity is expanded
And River changes is checked
When When I click on collapse menu
And click on expand menu
Then all marked layers are in the same state
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
Units measurement included
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
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
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
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
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
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
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
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
