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 Figure 2 below. It guides the user through the main features and elements.

Web Client Tutorial - Start

Figure 2 Web Client Tutorial - Start

The tutorial can be started again anytime by clicking the book icon in the bottom right of the window.

Web Client Tutorial Button

Figure 3 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.

Web Client Tutorial - Map

Figure 4 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.

Web Client - 3-way highlighting

Figure 5 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 Download below).

Web Client - Select on map

Figure 6 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.

Web Client - Loading indicator

Figure 7 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.

Web Client - Coordinates

Figure 8 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.).

Web Client - Current view

Figure 9 Web Client - Current view

Timeslider

The timeslider presents the distribution of products in time via a bar (see Figure 10) or an aggregated dots (see Figure 11) graph. The visualization mode used (bars or dots) is based on the total number of products available for the shown time interval.

Web Client Tutorial - Timeslider

Figure 10 Web Client Tutorial - Timeslider

Web Client - Timeslider dots

Figure 11 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.

Web Client - Timeslider histogram spatial toggle

Figure 12 Web Client - Timeslider spatial toggle

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.

Web Client Tutorial - Search Results

Figure 13 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 Figure 14) or by clicking on the Search toggle (see Figure 15) if only a single layer is configured.

Web Client - Toggle search

Figure 14 Web Client - Toggle search

Web Client - Toggle search single layer

Figure 15 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 Figure 16) or on the map (see Figure 17). That opens a new overlay panel showing details display (see Details Display below).

Web Client - Details button 1

Figure 16 Web Client - Details button 1

Web Client - Details button 2

Figure 17 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.

Web Client - Add item to basket

Figure 18 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.

Web Client - Buttons in search panel

Figure 19 Web Client - Buttons in search panel

Items selected for download can be viewed in the Basket tab (see Figure 20) or Selected button (see Figure 21, single layer mode) on the right panel. To remove an item from the selection use the minus icon visible while hovering over it.

Web Client - Basket

Figure 20 Web Client - Basket

Web Client - Selected

Figure 21 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 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.

Web Client Tutorial - Filters

Figure 22 Web Client Tutorial - Filters

Map Layers

The Layers tab in the left panel enables configuring Overlays, Layers, and Base Layers to be shown.

Web Client Tutorial - Map Layers

Figure 23 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.

Web Client - Layer configuration

Figure 24 Web Client - Layer configuration

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.

Web Client Details Display panel

Figure 25 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 Searching), WMS (see chapter Viewing), WCS, and DSEO (both see chapter Downloading). The chapter 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.

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 Search Results particularly Figure 20 and Figure 21 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 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.

Web Client - Download multiple products

Figure 26 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 Figure 27 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.

Web Client - Download multiple products via WCS

Figure 27 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 Viewing, Searching, as well as Downloading.