Developers Knowledge Base

WebGIS enables powerful geospatial web applications and services that securely share your organization’s rich geospatial data, and provides tools to deeply examine spatial data and create value added products, on demand.
Showing results for 
Search instead for 
Do you mean 

Getting Started with Consumer Portal

by Technical Evangelist on ‎09-09-2015 04:04 AM - edited on ‎04-11-2017 03:53 AM by Technical Evangelist (1,189 Views)

Consumer Portal JavaScript API

Keep making simple things simple and complex things possible with $GP API!

Getting the API

There are no prerequisites to use API. It is already included as the integral part of Consumer Portal application. SDK comes with broad set of live and editable examples to make it easy to start getting to know what is where and what can be done.

Using the API

To start adding your custom code right into the customized application edit the custom.js file. Replace the commented lines with your customizations.


The custom.js file is already provided in the default Consumer Portal application. It acts as a placeholder for injecting custom code.


Content of custom.js file:

$GP.ready("v1.0", function($GP) {
  // put your code here
});

If you choose to create separate html file (described here) add new <script> tag in your html, either pointing to a separate javascript file aimed for your customizations (as we all love order!):


or just a simple inline block for playing around:

  <script type="text/javascript"> 
    $GP.ready("v1.0", function($GP) {
      // Display "Hello World!"
      $GP.ui.info("Hello World!");
    });
  </script>

$GP.ready function abstracts the process of loading the page and scripts necessary for Consumer Portal to operate and, as its pretty descriptive name announces, executes your code when $GP is ready. For example:

   <script type="text/javascript">
     $GP.ready(function () {
       // your code that interacts with the portal
       // it will be executed when the whole application is loaded, 
       // DOM is ready and all necessary scripts have been initialized.
     });
   </script>

There is no problem to define functions outside of that block and then just make sure that they are executed inside of it. Think of it as a main entry point of your application (although you can use it many times - each of the registered callback will be executed, but with no specified order).

Custom HTML

To use the API in your custom html page following constraints need to be met:

  • ensure that app.js script file is included:
  • ensure that style.css stylesheet file is included:

It is required to follow the html tags constraints:

  • make sure to copy <body> from original html (as provided in index.html).

Please follow the examples.html while looking for sample implementation.

Custom CSS

Some of the controls use predefined CSS classes that allow customization of their appearance.

  <link rel="stylesheet" href="style/customization.css" />

The customization.css file is already provided in the default Consumer Portal application. It acts as a placeholder for injecting custom stylesheet.


The UI elements provided in the code examples use specific CSS classes customizing their appearance. While playing with examples remember to include the stylesheet file with sample CSS:

  <link rel="stylesheet" href="style/examples.css" />

Overview

API is written in functional style JavaScript and most of the flow control happens in callbacks.


Most of the functions are written in the way:

function foo (config, callback, errback) {
  //...
}

where config object simulates named parameters (so instead of passing 5 formal parameters we pass 1 but with a dictionary of properties), callback is function that is executed when the foo operation succeeds (so we can treat it as a kind of return statement from the synchronous world) and errback is executed when the foo operation fails. Some methods do not have the errback parameter and there the assumption is that callback is executed all the time (this is for simplification where there is rather no possibility of "failing").

Scope

API covers:

  • map manipulation (zooming, panning...)
  • legend manipulation (adding, removing layers)
  • registering map and search services
  • pin layer
  • coordinate systems
  • name search
  • basic user interface manipulation
  • other Geospatial Portal features not mentioned here

Enjoy using Geospatial Portal JavaScript API!

Overview