Embed an HTML5 Viewer

There are two ways to embed the Geocortex Viewer for HTML5:

Embed an HTML5 Viewer in an Iframe

An iframe (inline frame) element allows you to place an HTML document within a frame; for example, the Index.html file that hosts the HTML5 Viewer.

Example

To embed the HTML5 Viewer within an iframe element in your HTML, add the following within the <body> tag:

<iframe style="width:800px; height:600px;" src="http://MyServer.com/Html5Viewer/Index.html">
    <p>Your browser does not support iframes.</p>
</iframe>

Replace the value of the src attribute with the URL to your HTML5 viewer. To modify the size of the iframe, change the values of the width and height attributes.

You can include an optional message within the <iframe> tag that only displays if the user's browser does not support iframes.

Embed an HTML5 Viewer in a Page

Geocortex Viewer for HTML5 Loading Components

Before attempting to embed the Geocortex Viewer for HTML5 in an entire web page, familiarize yourself with the following Geocortex Viewer for HTML5 loading components:

Also consider using the following customization options:

Architecture

ViewerLoader

The ViewerLoader class is responsible for defining and loading the viewer's ResourceSet, and then initializing the ViewerApplication.

The ViewerLoader constructor accepts a ViewerLoaderOptions object with the following property:

The ViewerLoader constructor then generates the viewer's default ResourceSet, exposing it on the new ViewerLoader instance as a property named resourceSet so that it may be customized prior to loading if necessary.

Resource

A resource represents anything that is loadable, including ScriptResource, StyleResource and ResourceSet objects. ScriptResource and StyleResource objects are named by the URLs provided to define their resources, while ResourceSet objects are explicitly named.

All resource objects have a load() method, which accepts a ResourceLoadOptions object with the following properties:

ResourceSet

A ResourceSet object is a named collection of loadable resource objects. A ResourceSet is infinitely nestable; in other words, ResourceSet objects may contain other ResourceSet objects. A ViewerLoader instance generates a default ResourceSet tree, which contains all the GVH dependencies as resource objects, exposed as a property named resourceSet.

As a ResourceSet is a type of Resource, its entire contents can be loaded recursively via the load() method. Other ResourceSet methods include:

A ResourceItem object can be any Resource object or anything that can be automatically interpreted as a Resource object.

If your script or CSS file name has an unconventional ending, you must explicitly create the desired type of resource to supply it as a ResourceItem. For example, new ScriptResource("my-script.txt").

The default GVH ResourceSet tree includes the following mutable ResourceSet objects:

See also....

Customize the ResourceSet

Embed the Viewer

Basic Example

The simplest way to embed a Geocortex Viewer for HTML5 within the entire page is to edit your HTML and add the following <script> tags just before the end of your </body> tag:

<script src="Resources/Compiled/loader.js"></script>
<script>
    var viewerConfig = {
            "configurations": {
                "default": "Resources/Config/Default/" + shellName + ".json.js"
            }
    };
    new geocortex.essentialsHtmlViewer.ViewerLoader().loadAndInitialize();
</script>

The first <script> tag loads the necessary loader.js script.

The second <script> tag defines the viewerConfig and creates a new default instance of a ViewerApplication object. The viewer dependencies and resources are loaded.

Customized Example

the loadAndInitialize() method accepts a ViewerInitializationOptions parameter. This allows you to customize the ViewerApplication object that is created. For example:

<script src="Resources/Compiled/loader.js"></script>
<script>
    var viewerConfig = {
            "configurations": {
                 "default": "Resources/Config/Default/" + shellName + ".json.js"
            }
    };
    new geocortex.essentialsHtmlViewer.ViewerLoader().loadAndInitialize({
            hostElement: document.body,
            configBase: "Resources/Config/Default/",
            onInitialized: function(viewer, viewerLoader) { 
                console.debug("Viewer Initialized:", viewer);
            }
    });
</script>

The hostElement is the HTML element that hosts the viewer. The configBase is the location of the viewer configuration files.

The newly created ViewerApplication object and the ViewerLoader object are passed as parameters to the onInitialized callback function when the ViewerLoader's ResourceSet finishes loading and the ViewerApplication is initialized. In the above example, the callback function outputs the new viewer to the console.

Viewer Initialization Options

To customize the viewer that is created, the loadAndInitialize() method accepts a ViewerInitializationOptions parameter with the following optional properties:

When adding query string parameters to a viewer URL, precede the first query parameter with a question mark (?). Precede subsequent query parameters with an ampersand (&). For example, http://MyUrl.com/index.html?configBase=MyConfigFolder&debug=true.

All option names are case insensitive.

Add a Splash Screen

We recommend you include the optional splash screen. The ViewerLoader automatically closes the splash screen when a viewer is initialized.

To add a splash screen:

  1. Use one of the following methods to add the splash screen styles:

    • Recommended Method: In your HTML, within the <head> tag, create a <style> element containing the entire contents of Resources/Styles/splash.css:

      <style>
    .splash-overlay, .splash-overlay * { margin: 0; padding: 0; }
    ... (Truncated for the sake of brevity, see splash.css for the remainder)...
</style>

      This method of including the splash screen reduces the number of web requests so your website loads slightly faster.

    • Simple Method: In your HTML, add the following within the <head> tag:

      <link rel="stylesheet" href="Resources/Styles/splash.css"/>

  2. In your HTML, just after the <body> tag, add the following:

    <div class="splash-overlay">
    <div class="splash-plate">
        <img class="splash-image" src="Resources/Images/splash-logo.png" alt=""/>
        <p class="splash-paragraph">This application uses licensed Geocortex Essentials technology for the Esri<sup>&reg;</sup> ArcGIS platform. All rights reserved.</p>
    </div>
</div>

Customize the ResourceSet

You can modify the default ResourceSet of a ViewerLoader object via its resourceSet property before initializing a viewer.

For example, to add a style sheet named my-styles.css to the beginning of the css resource set, add the following within a <script> tag:

var loader = new geocortex.essentialsHtmlViewer.ViewerLoader();
loader.resourceSet.find("css").prepend(["my-styles.css"]);

Similarly, to add two scripts to the beginning and end of the jquery resource set:

loader.resourceSet.find("jquery")
    .prepend(["my-first-plugin.jquery.min.js"])
    .append(["my-last-plugin.jquery.min.js"]);

To create and add a new ResourceSet named my-library to the end of the dependencies resource set:

var ResourceSet = geocortex.framework.application.resources.ResourceSet;

var myLibraryResourceSet = new ResourceSet("my-library", [
    "my-library-styles.css",
    "my-library-basics.js",
    "my-library-plugin.js"
]);

loader.resourceSet.find("dependencies").append([myLibraryResourceSet]);

The ResourceSet automatically assumes the Resource type based on the file extension. If the file extension is different or missing, you can explicitly create the Resource instance instead:

var StyleResource = geocortex.framework.application.resources.StyleResource;
var ScriptResource = geocortex.framework.application.resources.ScriptResource;
			
var myLibraryResourceSet = new ResourceSet("my-library", [
    new StyleResource("my-library-styles"),
    new ScriptResource("my-library-basics"),
    new ScriptResource("my-library-plugin")
]);

loader.resourceSet.find("dependencies").append([myLibraryResourceSet]);

Finally, to create the viewer:

loader.loadAndInitialize();

See also...

Resource