.. _webclient: Web Client ========== The most comfortable way to exploit the functionalities of the View Server (VS) is via the built-in `web client `_. This client is based on the open source `eoxc `_ library and provides an intuitively to use interactive graphical user interface running in the user's web browser. Minimum Required Resources -------------------------- In order to run the web client, minimum hardware and software requirements are basically attached to WebGL (Web Graphics Library) resources requirements, since the 3D client software requires a browser that supports WebGL. The table Below shows browser support list for WebGL 1.0 : | Mozilla Firefox >= 67 | Google Chrome >=75 | Apple Safari >= 12.1 |MS Edge >= 18 | | --- | --- | --- | --- | | yes |yes | yes | yes | Interactive Tutorial -------------------- When the web client is opened for the first time a short interactive tutorial starts as shown in :numref:`fig_webclient_tutorial` below. It guides the user through the main features and elements. .. _fig_webclient_tutorial: .. figure:: images/webclient_tutorial_01_start.* :alt: Web Client Tutorial - Start *Web Client Tutorial - Start* The tutorial can be started again anytime by clicking the *book* icon in the bottom right of the window. .. figure:: images/webclient_tutorial-button.* :alt: Web Client Tutorial Button *Web Client Tutorial Button* Map --- The main map view is for visualization and interactively browsing through available satellite data. Navigating to the area of interest is done by: * *panning*: left click + drag or one finger drag and * *zooming*: mouse wheel scroll, double click, two finger pinch, or the plus and minus icons in the bottom right corner of the map. .. figure:: images/webclient_tutorial_02_map.* :alt: Web Client Tutorial - Map *Web Client Tutorial - Map* While hovering over footprints on the map, the respective product(s) are highlighted in the *map*, *timeslider*, and the *Search Results* menu. The same behavior is applied vice versa while hovering over dot groups in the *timeslider* and individual items in the *Search Results*. .. figure:: images/webclient_highlighting.* :alt: Web Client - 3-way highlighting *Web Client - 3-way highlighting* Clicking on a footprint in the map followed by clicking on the *plus* or *minus* button can be used to add or remove a product to or from the *basket*, holding the list of products selected for download (see :ref:`weblient_download` below). .. figure:: images/webclient_select-on-map.* :alt: Web Client - Select on map *Web Client - Select on map* In the top most part of the map, there is a colored bar spanning the full width of the web client acting as loading indicator. It makes it easier to see if the loading of all requested map tiles is already finished or still in progress. .. figure:: images/webclient_loading-indicator.* :alt: Web Client - Loading indicator *Web Client - Loading indicator* The geographic coordinates of the current cursor location can be seen as longitude, latitude pair in the bottom left corner of the map. .. figure:: images/webclient_coordinates.* :alt: Web Client - Coordinates *Web Client - Coordinates* Clicking on the *landscape map* icon in the bottom right of the map window shows a list of available layers. Clicking on one of the layers opens a new browser tab showing this layer as currently visible on the map by generating a *WMS* request copying the current map parameters (zoom, bounding box, selected time, styling, etc.). .. figure:: images/webclient_current-view.* :alt: Web Client - Current view *Web Client - Current view* .. _timeslider: Timeslider ---------- The *timeslider* presents the distribution of products in time via a *bar* (see :numref:`fig_webclient_timeslider`) or an *aggregated dots* (see :numref:`fig_webclient_timeslider_dots`) graph. The visualization mode used (*bars* or *dots*) is based on the total number of products available for the shown time interval. .. _fig_webclient_timeslider: .. figure:: images/webclient_tutorial_03_timeslider.* :alt: Web Client Tutorial - Timeslider *Web Client Tutorial - Timeslider* .. _fig_webclient_timeslider_dots: .. figure:: images/webclient_timeslider-dots.* :alt: Web Client - Timeslider dots *Web Client - Timeslider dots* The interactive *timeslider* can be used in the following ways: * *panning*: left click + drag or one finger drag on the bottom area (below the horizontal line) or left and right arrow icons on the sides * *zooming*: mouse wheel scroll, two finger pinch, or plus and minus icons in the middle * *reloading*: spinner icon in the middle * *selecting a time interval*: left click + drag or one finger drag in the upper area (above the horizontal line) or click on a histogram bucket * *showing the total number of available products in a histogram bucket*: hover over the histogram bucket * *showing the footprints of all products, the first product id, and the total number of additional products in a dot group*: hover over the dot group * *showing start and end of the current selection*: left click + hold on selection rectangle * *zooming the map to a combined minimum bounding box of all products in a dot group*: click on the dot group There are currently two ways how timeslider works connected to spatial filters: * Spatially un-aware: Always shows time distribution of all available products. * Spatially aware: Takes currently set spatial filter (or current map view) in account when displaying histograms. That way, time distribution of products over a specific area can be evaluated. In order to change between the modes, use the location switch in top right edge of the timeslider panel. .. _fig_webclient_timeslider_toggle: .. figure:: images/webclient_timeslider-toggle.* :alt: Web Client - Timeslider histogram spatial toggle *Web Client - Timeslider spatial toggle* .. _search_results: Search Results -------------- The panel in the right part of the map window has a tab showing the *Search Results* grouped by enabled layer(s). The search is defined by the currently visible geographic area or spatial filter, selected time interval, and additional filters if set. Items in the list are sorted as the catalog returns them which typically is from the oldest to the newest. .. figure:: images/webclient_tutorial_04_search-results.* :alt: Web Client Tutorial - Search Results *Web Client Tutorial - Search Results* Searching can be disabled and enabled again for each displayed layer individually by clicking on the large button labeled *N layer(s) selected to show n/n* and clicking on the corresponding layer entry (see :numref:`fig_webclient_toggle_search`) or by clicking on the *Search* toggle (see :numref:`fig_webclient_toggle_search_single`) if only a single layer is configured. .. _fig_webclient_toggle_search: .. figure:: images/webclient_toggle-search.* :alt: Web Client - Toggle search *Web Client - Toggle search* .. _fig_webclient_toggle_search_single: .. figure:: images/webclient_toggle-search-single.* :alt: Web Client - Toggle search single layer *Web Client - Toggle search single layer* Metadata and alternative visualizations of individual products can be inspected by hovering over an item and hitting the *info* icon either in the search results (see :numref:`fig_webclient_info1`) or on the map (see :numref:`fig_webclient_info2`). That opens a new overlay panel showing *details display* (see :ref:`details_display` below). .. _fig_webclient_info1: .. figure:: images/webclient_info1.* :alt: Web Client - Details button 1 *Web Client - Details button 1* .. _fig_webclient_info2: .. figure:: images/webclient_info2.* :alt: Web Client - Details button 2 *Web Client - Details button 2* By clicking on individual items, they can be inserted to or removed from the *basket* holding the list of items selected for download. .. figure:: images/webclient_add-to-basket.* :alt: Web Client - Add item to basket *Web Client - Add item to basket* Searching from the web client is throttled for performance and only a limited number of items is shown from the first search. Additional items, if available, are shown by clicking the button labeled *Load n more*. The *Select all* button adds all currently listed items to the *basket*. The *link* button next to the layer name shows the current search query. To download the results XML file click with the right mouse button on the link and use the *Save Link As...* menu entry. .. figure:: images/webclient_search-buttons.* :alt: Web Client - Buttons in search panel *Web Client - Buttons in search panel* Items selected for download can be viewed in the *Basket* tab (see :numref:`fig_webclient_basket1`) or *Selected* button (see :numref:`fig_webclient_basket2`, single layer mode) on the right panel. To remove an item from the selection use the *minus* icon visible while hovering over it. .. _fig_webclient_basket1: .. figure:: images/webclient_basket1.* :alt: Web Client - Basket *Web Client - Basket* .. _fig_webclient_basket2: .. figure:: images/webclient_basket2.* :alt: Web Client - Selected *Web Client - Selected* Filters ------- There are several options to add explicit filters to product queries in the *Filters* tab in the left panel: * *Spatial filter*: allows drawing a Point, Rectangle, or Polygon directly on the map. By default when no explicit spatial filter is set, the current map window extent is used as a spatial filter. * *Time filter*: by default the time filter, a simple time interval, is configured via the :ref:`timeslider`. If enabled, the time filter tool allows a fine grained configuration of the time interval to use for searching. * *Additional filters*: based on the configuration provided by the operator additional filters for each layer based on available metadata like "Cloud Coverage" might be available. .. figure:: images/webclient_tutorial_05_filters.* :alt: Web Client Tutorial - Filters *Web Client Tutorial - Filters* Map Layers ---------- The *Layers* tab in the left panel enables configuring *Overlays*, *Layers*, and *Base Layers* to be shown. .. figure:: images/webclient_tutorial_06_map-layers.* :alt: Web Client Tutorial - Map Layers *Web Client Tutorial - Map Layers* *Base Layers* provide various backgrounds whereas *Overlays* are text labels or other information like footprints to view on top of products for easier orientation on the *map*. They can be enabled and disabled individually as needed via the *eye* icon next to their name. *Layers* correspond to product collections or datasets. Searching is performed on enabled layers. The order of *layers* can be changed by dragging the arrows next to each layer up and down. This influences the order of the rendering on the *map* as well as in the *timeslider*. The visualization (styling) of *layers* can be changed by clicking on the *paint brush* icon next to the layer name. The displayed overlay enables setting the layer's opacity and selecting one of the predefined styles for the layer. .. figure:: images/webclient_layer-configuration.* :alt: Web Client - Layer configuration *Web Client - Layer configuration* .. _details_display: Details Display --------------- In order to view details of individual products, either click on the *info* (i) icon after clicking on the product footprint on the map or the product entry in the *Search Results* panel. .. figure:: images/webclient_details_display.* :alt: Web Client Details Display panel *Web Client Details Display* An overlay display will open showing the product metadata as well as the product itself on a map. The product metadata contains links to visualize and download the metadata and product. Those links are OGC standards compliant service requests for OpenSearch (see chapter :ref:`searching`), WMS (see chapter :ref:`viewing`), WCS, and DSEO (both see chapter :ref:`downloading`). The chapter :ref:`sample_requests` provides sample requests for all those services. The following links are provided: * *Metadata ATOM*: download the product's metadata in ATOM format * *Download Package*: download the entire product as stored on object storage * *WMS: GetCapabilities*: get the description of the WMS for the individual product for example for inclusion in QGIS * *WMS: GetMap*: visualize the individual product using WMS * *WCS: DescribeEOCoverageSet* or *WCS: DescribeCoverage*: get the description of the product's coverage in WCS * *WCS: GetCoverage*: download the product as coverage potentially after adjusting the URL parameters * *WCS: GetEOCoverageSet* : download all the products within a coverage's bounding box, The visualization (opacity and style) of the product layer for this map window can be changed via the *Visualization* button in the top left corner. The product itself can be added to the *basket* by ticking the check box in the bottom right of the panel. .. _weblient_download: Download -------- Several methods for downloading products or only parts of them are exploited by the web client. After putting one or more products in the *basket* or selecting them for download, they are listed in the right panel, either on the *Search Results* tab via the *Selected* button or on the *Basket* tab (see section :ref:`search_results` particularly :numref:`fig_webclient_basket1` and :numref:`fig_webclient_basket2` above). To download a full product (image and linked metadata) or a full coverage (just the image), the *Details Display* of the respective product can be used (see chapter :ref:`details_display` above). To download all selected products in parallel -or as single packaged folder- the *Download* or *Download as* buttons on the right panel of the web client can be used. .. figure:: images/webclient_download-buttons.* :alt: Web Client - Download multiple products *Web Client - Download multiple products* * *Download as*: offers a *Download as URL-List* option which downloads a *.txt* file with a list of download links (*Get Coverage* requests) and a *Download as Metalink* option allowing for possibly increased speed via segment downloading by metalink-aware software. * *Download*: opens an overlay panel allowing to specify download type whether to download multiple products in one resulted compressed folder, or to separately download products in parallel manner. the panel provides the ability to select download parameters for subsetting, projection, format, package(in case of multidownload), interpolation, and resolution or scaling as shown in :numref:`webclient_download_multiple` below. When multiple products are to be downloaded, the configured options are applied to all of them. Clicking the *Download* button confirms the selected options and initiates the downloads. Note, if the products are downloaded via WCS, browser might open multiple confirmation dialogs or issue a warning. Besides, modern browsers have a limit of 6 concurrent connections. Popups might need to be explicitly allowed for this site. .. _webclient_download_multiple: .. figure:: images/webclient_download_multiple.* :alt: Web Client - Download multiple products via WCS *Web Client - Download multiple products via WCS* Saving the session ------------------ The web client allows to save some parts of its current state by setting the URL search parameters. That enables users to revisit the same view in time and space later on or share the direct link with someone, overruling the default client setup. Please note that certain characters are automatically URL encoded, as URLs sent over the Internet only use the ASCII character set. This means that if user manually enters for example **:** sign, while entering the website, it will automatically transform into **%3A**, making the URL less readable. * Pre-set the map position by setting **x**, **y** as coordinates of the center of the map and the zoom with the **z** parameter. `Map position example `_. * The time selection is set by `timestart` and `timeend`, and should be entered as ISO 8601 UTC time format without milliseconds. `Time selection example `_. The following chapters describe the services offered for :ref:`viewing`, :ref:`searching`, as well as :ref:`downloading`.