View Discover

In this example below you will see how to do a View Discover with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by fpape, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright fpape ©
  • HTML
  • CSS
  • JavaScript
    <body>
		<textarea id="outDiv" wrap="off" style="margin-top: 5px; width:100%; height: 850px"></textarea>    
</body>

/*Downloaded from https://www.codeseek.co/fpape/view-discover-RGgrPp */
    


/*Downloaded from https://www.codeseek.co/fpape/view-discover-RGgrPp */
    

    // creates a new DAB instance with the given endpoint
    var dab =  GIAPI.DAB('http://test.geodab.org/gi-cat-StP','v28daf7005b0640088ff0723c15bed7b9');

    // defines discover response callback function
    var onResponse = function(response){

      // retrieves the result set
      // only one result set is expected (discover not expanded)     
      var resultSet = response[0];

      if(resultSet.error){

        $('#outDiv').append("Error occurred: "+resultSet.error); 
        return;
      }

      // retrieves the paginator   
      var paginator = resultSet.paginator;

      // prints the result set
      $('#outDiv').append("--- Result set ---\n\n");
      $('#outDiv').append("start:"+resultSet.start+"\n"); 
      $('#outDiv').append("size:"+resultSet.size+"\n"); 
      $('#outDiv').append("pageCount:"+resultSet.pageCount+"\n"); 
      $('#outDiv').append("pageIndex:"+resultSet.pageIndex+"\n"); 
      $('#outDiv').append("pageSize:"+resultSet.pageSize+"\n"); 

      // the current paginator page (the first of the result set)    
      var page = paginator.page();

      // printing page nodes
      $('#outDiv').append("\n--- Nodes of first result set page ---\n\n"); 
      $('#outDiv').append("<pre>"); 

      while(page.hasNext()){

        // retrieving the next page node
        var node = page.next();

        // retrieving the node report
        var report = node.report();     

        $('#outDiv').append(JSON.stringify(report,null,4));
      }
      $('#outDiv').append("</pre>");
    };

    // discover constraints
    var constraints = {

      "where": {
        "south": 0,
        "west": -103,
        "north": 35,
        "east": -35
      },

      "when": {
        "from": "2000-01-01",
        "to": "2014-12-12"
      },

      "what": "temperature"               
    };

    constraints = {};

    // setting maximum page size
    var options = {

      "pageSize": 5,
      "spatialRelation" : GIAPI.SpatialRelation.OVERLAPS           
    };

    var onStatus = function(statusList) {

      if(statusList){

        for (var i = 0; i < statusList.length; i++) {
          var s = statusList[i];
          var title = s.title();

          console.log("Title: " + s.title());
          console.log("Message: " + s.message());
          console.log("Phase: " + s.phase());
          console.log("Progress: " + s.progress());
        }
      }
    };

    // start discover
    dab.discover(onResponse, constraints, options, onStatus);



Comments