Add a cluster renderer to the HTML5 Viewer in Geocortex

Description:

This project is based on an ESRI Javascript API sample. Please refer here for more information on the techniques used — this document will only cover the modifications needed to run this successfully in the Geocortex HTML5 Viewer:

http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/layers_point_clustering

The included package is based on the model of the Quickstart samples included with the HTML5 Viewer SDK — see the SDK documentation for more detailed information on the file and folder structure used, and for details on the ‘compilation’ of Javascript code using build.bat.

To demo the sample code the ‘Web’ folder may be served in IIS as-is. Running the included build.bat file will ‘compile’ a new version of the code from the files in /Modules, and place it in the /Web/Libraries folder where the Viewer has been configured to look for it.

Note that an extension to the ESRI Javascript API is used in this sample (code provided in /Web/Libraries), and modifications must be made to the Viewer launch page (Index.html if viewing on a desktop machine) to load the API extension. Configuration instructions are below — these changes have been made in the sample files to ‘Web\Index.html’ and ‘Web\Resources\Config\Default\Desktop.json.js’

TO MODIFY THE LAUNCH PAGE TO LOAD THE ADDITIONAL LIBRARIES:

At the top, add this line to load the CSS styling for the cluster renderer pop up:

<link rel=”stylesheet” href=”http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css”&gt;

Then immediately after the first section of inline Javascript code, add this snippet. You must modify this URL so that it forms a direct link to the ‘Libraries’ folder on your server, as otherwise the API extension will not load. A relative path will not work here, as it will become relative to the main API repository on ESRI’s server:

<script>
      var dojoConfig = {
        parseOnLoad: true,
        packages: [{
          “name”: “extras”,
        }]
      };
 </script>

Then add these lines to the ‘dojo.require’ section immediately after:

dojo.require(“dijit.layout.BorderContainer”);
dojo.require(“dijit.layout.ContentPane”);
dojo.require(“esri.dijit.Popup”);
dojo.require(“extras.ClusterLayer”);

TO MODIFY THE VIEWER CONFIG FILE TO LOAD THIS MODULE:

Add a section to ‘Libraries’ to load the custom library:

{
    “id” : “ClusterRenderer”,
    “uri” : “Libraries/ClusterRenderer.js”
}

And add a section to ‘Modules’ to load and configure the library. This is where you may supply the address of the layer to use in the cluster renderer. The actual class breaks, symbology, and pop-up template used are currently hard-coded in ClusterViewModel.js, but could also be exposed as configuration items in the same manner as the layer URL:

{
    “moduleName”: “ClusterRenderer”,
    “moduleType”: “geocortex.essentialsHtmlViewer.sdk.samples.modules.clusters.ClusterRendererModule”,
    “libraryId”: “ClusterRenderer”,
    “viewModels”:
    [
        {
            “id”: “ClusterRendererViewModel”,
            “type”: “geocortex.essentialsHtmlViewer.sdk.samples.modules.clusters.ClusterRendererViewModel”,
            “configuration”: {
             }
        }
    ]
},
Advertisements

About berrymanchris

I recently graduated from University of Wisconsin - Whitewater and I work as a Senior Analyst at PANGEA Studios at the University in Whitewater, WI.

Posted on July 19, 2013, in Blog. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: