All available products are listed in the left panel.
The products may be grouped based on tags.
The user can filter the list with a search query to be matched against the
product's label and tags.
This panel allows the user to add or remove them from the
Display data dialog.
This dialog is accessible by clicking on the "Display data" button in the top bar.
This dialog allows the user to:
- toggle a product on/off (when off, the product is ignored entirely)
- see the colormaps of each product (when applicable)
- reorder the products (a low product on the list is displayed below a higher one)
- change the transparency of a product
- filter the datasets of a product using a pattern (matched against the dataset's ID)
The timeline is located at the bottom of the application.
It's initially collapsed (i.e. the detailed view is hidden).
The timeline is composed of three parts:
- the timeline bar
- the coverage timeline
- the detailed timeline
Item | Description |
---|---|
Animation controls | Allows to start and stop the animation, and control its speed. |
Timespan selection | Allows to change the current timespan by picking one from a configurable list. |
Find nearest button | Allows to go to the nearest datetime containing at least one dataset. |
Colocation toggle | Toggles the colocation feature which changes the behavior of the coverage timeline. Will be red with active. For more info see the coverage timeline. |
Number of datasets in the map | Shows the number of datasets in the map, visible or not (see pagination). |
Pagination controls | Allows to change the current page, and shows the number of datasets currently visible. For more info see pagination. |
Dataset selection info | Shows the number of selected datasets, or when only one is selected its ID and the ID of its product. (Only visible when one or more datasets are selected) |
The current date and time | Shows the current current datetime. (Only visible when no dataset is selected) |
Coordinates | Shows the coordinates of the mouse pointer (or the map center) in degrees latitude and longitude. |
Composed of three rows:
- Contains all the possible years.
- Contains all the months of the selected year.
- Contains all the days of the selected month of the selected year.
Each cell (year/month/day) of the calendar can be:
- Grey: contains no datasets from the selected products.
- White: contains at one or more datasets from the selected products.
- Yellow: contains datasets from all of the selected products. But not on the same day.
- Red: contains datasets from all of the selected products on the same day.
Note: The yellow and red states are only used if the colocation is active (the colocation toggle in the timeline bar is red).
Each cell also has a tooltip with the list of all products it contains.
Note: Some products do not advertise their availability and thus are not included in the coverage timeline.
Hidden by default, can be shown by clicking on the arrow pointing upward just above the timeline and centered horizontally.
Its full width represents the current timespan.
The vertical line in the center represents the current datetime.
The dots and horizontal lines represent datasets.
A horizontal line represent the datetime range of a dataset.
A horizontal line become a dot when it's too small, that is when its length on
screen is less then half the width of a dot (10 pixels by default).
The dots and horizontal lines can be:
- Grey: if their datasets are not in the map.
- Blue: if their datasets are in the map.
- Yellow: if their datasets are selected.
The dots and horizontal lines are clickable (if their datasets are in the map).
When clicked its respective dataset is selected in the map.
They also have a tooltip which contains the ID of their respective dataset.
Syntool is rendered unresponsive or unusable when the number of datasets in the
map gets too big.
To solve this the datasets are split into pages, and shown one page at a time.
The datasets are distributed among the pages using the algorithm described bellow.
Let maxDatasetsWeight
be the rendering budget, datasetWeight
of a product be
the average cost of rendering one of its datasets, and minPageSize
of a
product be the minimum number of its datasets to be rendered (even if we go
over-budget).
The pagination system tries to maximize the number of rendered datasets.
While distributing as uniformly as possible the budget on all selected products
and respecting the minPageSize
of all products.
The priority
of a product comes in play in the case that the budget can't be
distributed uniformly (the number of rendered datasets must be an integer).
In which case the products with the highest priorities (biggest priority
)
will have their datasets rendered.
-
Normal
Product priority
datasetWeight
minPageSize
Number of datasets Product A 0
1
0
1000
Product B 0
1
0
1000
Product C 0
1
0
1000
-
maxDatasetsWeight
is10
BudgetPerProduct = maxDatasetsWeight / 3 = 10 / 3 = 3
We distribute the budget uniformly.
Product Page size Number remaining of datasets Product A 3
997
Product B 3
997
Product C 3
997
-
maxDatasetsWeight
is10 - 3 - 3 - 3 = 1
BudgetPerProduct = maxDatasetsWeight / 3 = 1 / 3 = 0
Since
maxDatasetsWeight
is1
greater than0
andBudgetPerProduct
is0
, then this means that we can't distribute the budget uniformly. So starting from the product with the highest priority down to the one with lowest, we give1
from the budget to each one until we run-out.Product Page size Number remaining of datasets Product A 4
996
Product B 3
997
Product C 3
997
-
-
Priority
Product priority
datasetWeight
minPageSize
Number of datasets Product A 0
1
0
1000
Product B 0
1
0
1000
Product C 1
1
0
1000
-
maxDatasetsWeight
is10
BudgetPerProduct = maxDatasetsWeight / 3 = 10 / 3 = 3
We distribute the budget uniformly.
Product Page size Number remaining of datasets Product A 3
997
Product B 3
997
Product C 3
997
-
maxDatasetsWeight
is10 - 3 - 3 - 3 = 1
BudgetPerProduct = maxDatasetsWeight / 3 = 1 / 3 = 0
Since
maxDatasetsWeight
is1
greater than0
andBudgetPerProduct
is0
, then this means that we can't distribute the budget uniformly. So starting from the product with the highest priority down to the one with lowest, we give1
from the budget to each one until we run-out.Product Page size Number remaining of datasets Product A 3
997
Product B 3
997
Product C 4
996
-
-
Weight
Product priority
datasetWeight
minPageSize
Number of datasets Product A 0
2
0
1000
Product B 0
1
0
1000
Product C 0
1
0
1000
-
maxDatasetsWeight
is10
BudgetPerProduct = maxDatasetsWeight / 3 = 10 / 3 = 3
We distribute the budget uniformly.
Product Page size Number remaining of datasets Product A 3 / 2 = 1
999
Product B 3
997
Product C 3
997
-
maxDatasetsWeight
is10 - (1 * 2) - 3 - 3 = 2
BudgetPerProduct = maxDatasetsWeight / 3 = 2 / 3 = 0
Since
maxDatasetsWeight
is2
greater than0
andBudgetPerProduct
is0
, then this means that we can't distribute the budget uniformly. So starting from the product with the highest priority down to the one with lowest, we give1
from the budget to each one until we run-out.Product Page size Number remaining of datasets Product A 3 + 1 / 2 = 3
999
Product B 3 + 1 = 4
996
Product C 3 + 1 = 4
996
-
-
minPageSize
Product priority
datasetWeight
minPageSize
Number of datasets Product A 0
1
0
1000
Product B 0
1
4
1000
Product C 0
1
0
1000
-
maxDatasetsWeight
is10
Product Page size Number remaining of datasets Product A 0
1000
Product B 4
996
Product C 0
1000
-
maxDatasetsWeight
is10 - 4 = 6
BudgetPerProduct = maxDatasetsWeight / 3 = 6 / 3 = 2
We distribute the budget uniformly.
Product Page size Number remaining of datasets Product A 2
998
Product B 4 + 2 = 6
994
Product C 2
996
-
-
minPageSize
with going over-budgetProduct priority
datasetWeight
minPageSize
Number of datasets Product A 0
2
4
1000
Product B 0
1
4
1000
Product C 0
1
0
1000
-
maxDatasetsWeight
is10
Product Page size Number remaining of datasets Product A 4
996
Product B 4
996
Product C 0
1000
-
maxDatasetsWeight
is10 - (4 * 2) - 4 = -2
Since
maxDatasetsWeight
is negative (-2
) then we have blown our budget. So we stop. -
A message is like a notification, it conveys some information that the user should see.
A hotspot is a bookmark of the current view (datetime, timespan, map viewport and the selected products with their respective transparency levels, order, and filters), with an associated name or title and an optional description link (a link to an external web page that describes it, like an article).
Hotspots can be created, viewed, shared, and deleted from the "Hotspots" popup (accessible by clicking on the "Hotspots" button in the top bar).