Geoss Search Widget

   Geoss Search Widget is a plugin that allows you to explore Earth Observation data on your website.

   The widget is still in development phase, but it is already able to:

• generate searchbar with advanced filtering options,
• generate result list with navigation buttons and popup windows,
• initialize interactive features on map,
• manage WMS/TMS layers.

Getting started

1. Extract js, css, images and fonts directories into your project (relative paths between them must be preserved).
2. Add javascript and css dependencies (see index.html):

   <link href="css/jquery-ui.css" rel="stylesheet">
   <link href="css/jquery-ui-2.css" rel="stylesheet">
   <link href="css/jquery.datetimepicker.min.css" rel="stylesheet">
   <link href="css/jquery.rateyo.min.css" rel="stylesheet">
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <link href="css/bootstrap-multiselect.css" rel="stylesheet">
   <link href="css/ol.css" rel="stylesheet" type="text/css">
   <link href="css/custom.min.css" rel="stylesheet" type="text/css">
   
   <script src="js/jQuery.js"></script>
   <script src="js/jquery-ui.min.js"></script>
   <script src="js/jquery.dotdotdot.min.js"></script>
   <script src="js/jquery.datetimepicker.full.min.js"></script>
   <script src="js/jquery.rateyo.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
   <script src="js/bootstrap-multiselect.js"></script>
   <script src="js/ol.js"></script>
   <script src="js/elasticsearch.jquery.min.js"></script>

3. Add Geoss Search Widget script before your main js script (see index.html):

   <script src="js/geossSearchWidget.min.js"></script>

4. Create HTML containers, with 'geoss' class, where search part, popups and layers will be stored, e.g.:

   <div class="search geoss"></div>
   <div class="popups geoss"></div>
   <div class="box-layers-map geoss"></div>

   Next, make reference in your js file to the containers e.g.:

   Geoss.searchContainer = '.search';
   Geoss.popupsContainer = '.popups';
   Geoss.layersContainer = '.box-layers-map';

5. Create a reference to your main map, e.g.:

   Geoss.mainMap = map; //ol object for main map on your site

   Then create a reference for your metainfo map, e.g.:

   Geoss.mapUrl = 'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token=[yourPrivateKey]';

   The map preview is located in metainfo popup. Currently the widget uses Openlayers' tile maps that are generated dynamically on each metainfo button click (let us know if format different than ol.layer.Tile is needed).
   If you wish to use Geolocation function in advanced filters, link Google Places API to your project:

   <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

6. Make a reference to 'images' folder where Geoss images are stored, e.g.:

   Geoss.imagesLocation = './';

   or

   Geoss.imagesLocation = '/static/lib/geoss/';

7. Finally, enter your private access key aquired from Geoss webside along with environment name, e.g.:

   Geoss.accessKey = 'ABCx8jt1UNV5799zp8tCrfj14JlAgeyofimHLbefI';
   Geoss.environment = 'prod';

   If you have registered widget on geoportal.org use 'prod' as environment name. If it was registered on geoss.devel.esaportal.eu use 'dev'.

Usage

function successResponse(dataXml) {
    updatePagination(dataXml);
    progressBar.hide();
    // other instructions here ...
}
Geoss.successCallback = successResponse;

function failureResponse(error) {
    if (error == "ajax") {
        alert("AJAX request failed.");
    } else if (error == "xhr") {
        alert("Wrong response code.");
    } else if (error == "noresults") {
        alert("No results to show.");
    }
    progressBar.hide();
    clearPagination();
    // other instructions here ...
}
Geoss.failureCallback = failureResponse;

var params = new Object();
params.query = "Water";
params.sources = "geodabgbifid"
params.aoiOption = "Coordinates";
params.aoiBoundingBox = "-100,-60,0,20";
params.aoiRelation = "bbox_contains";
params.datePeriod = "last-year";
Geoss.search(params);

Additional info / Recent changes

• @font-face rule at the beginning of custom.css file might change all the fonts on your site. The rule can be removed if necessary.
• OpenLayers has been updated to version 4.2.0.
• New packages: datetimepicker, bootstrap-multiselect and rateYo are required in project. Both js and css files can be download from https://github.com/xdan/datetimepicker, https://github.com/davidstutz/bootstrap-multiselect and https://github.com/prrashi/rateYo respectively. They can also be found in widget directories.
• Geoss.resultsContainer and Geoss.paginationContainer are no longer in use. Now containers for search bar, result list and pagination bar are all merged into Geoss.searchContainer.
• Geoss.search(params) changed functionality and now it fills out search form and triggers new query. It gets only one argument with search form parameters (previously used arguments, success and failure callbacks, are now read from global Geoss object). Moreover, as Geoss.search refers to search form, not DAB, the parameters are different than before (take a look at list above).
• Widget can handle custom downloads.
• Key authorization was added.