Affichage de contenus web Affichage de contenus web

Installation du widget


GEOSS Search Widget (also known as GEOSS IDE) is a plugin that allows you to explore Earth Observation data on your website.
The widget provides majority of features of GEOSS Portal like searching and advanced filtering, detailed presentation of results, enabling interactions on your map.
The plugin comes as free JS library that can be easily customise.


GEOSS Search widget


Widget is particularly recommended for people who:

  • own a website with a OpenLayers' map in it,
  • wish to present GEOSS resources,
  • do not want to implement user interface from the scratch.



  1. If you do not have access key, get it from here (only for signed-in users),
  2. Download the package with widget from here (only for signed-in users),
  3. Extract CSS and JS files to desired directory at your server,
  4. Extract 'static' folder to desired place,
  5. Import CSS and JS dependencies to your HTML file (see index.html in the package for a reference):
    • preload files and load CSS in <head> section:
      <link href="/widgets/search-widget.css" rel="preload" as="style">
      <link href="/widgets/search-widget.js" rel="preload" as="script">
      <link href="/widgets/search-widget.css" rel="stylesheet">
    • load JS script at the bottom of <body> section:
      <script src="/widgets/search-widget.js"></script>
    • add HTML element with widget to your <body> section:
      <geoss-search-widget class="geoss"></geoss-search-widget>
  6. Set basic configuration of widget in your JS file (or <script> section in your HTML file):
    • make widget HTML element as JS variable:
      const searchWidgetElement = document.querySelector('geoss-search-widget');
    • specify your configuration, e.g.: = map;
      searchWidgetElement.accessKey = 'enterYourKeyHere';
      searchWidgetElement.environment = 'dev';
      searchWidgetElement.staticFilesPath = '/widgets/static/;
      searchWidgetElement.hiddenDataSources = ['services'];
  7. If you wish to enable Google Places features (e.g. ability to search places by phrase in Advanced Filters > Geolocation - just like on GEOSS website), generate Google Places key here and add it to the <body> section:
    <script type="text/javascript" src=""></script>



The searchWidgetElement has following fields and callback functions:
  • map - (required) Takes reference to your OpenLayers map and adds interactions to it,
  • accessKey - (required) Takes access key and enables usage of widget,
  • environment - (required) Takes name of GEOSS portal instance on which widget was registered. Possible values: 'dev', 'uat', 'sit', 'prod',
  • staticFilesPath - Takes path to 'static' directory which contains images*. Default value: '/widgets/static/',
  • hiddenDataSources - Takes array of datasources' names that should be disabled on your page. Array with all possible values: ['dab', 'data', 'amerigeoss','nextgeoss', 'knowledge', 'zenodo', 'services'],
  • actionBeforeRequest - Takes function which is called before each request is sent to data providers (on new search, page change, opening folder, opening 'Result Details'),
  • actionAfterSuccessRequest - Takes function which is called after response is successfully retrieved,
  • actionAfterFailureRequest - Takes function which is called after request failed,
  • actionAfterMetadataShow - Takes function which is called after 'Result Details' window is opened,
  • actionAfterDownloadPopupShow - Takes function which is called after 'Download Popup' window is opened.

* Important: Static Files Path must be changed in CSS file as well. Unfortunately this needs to be done manually in search-widget.css file. By default the path is set to './static/'. If you wish to modify it please find all occurrences of './static/' and replace them with your path.



If you need any help with integrating widget please contact us. The widget is still in development phase, so your feedback is welcomed and will contribute to the plugin improvement.