Cluster Page Editor

Cluster is a unique web-based solution for delivering spatially-enabled data straight to your website. This is how example configured Cluster looks:

In this documentation you can find description of all elements related to the Cluster page. For the full guide how to create a Cluster please visit: Sample Cluster script

It is very important to set Element Id for this workflow.

ElementID is mandatory for the Cluster. This is how example workflow and Element Id looks:

To create and configure the Cluster page please select the task and click properties button.

The Cluster Page Editor contains 4 tabs.

Runs tab

image

In the Runs tab you can:

  1. Add new run
  2. Edit an existing run
  3. Delete run(s)
  4. Copy JavaScript snippet. You will need this code to place the Cluster on the website. For more information please visit: Sample Cluster script
  5. Reorder runs. Please keep in mind that in addition to the order runs are also bound to streams (columns). Changing an order of two runs which belong to different streams will not have any effect on the Cluster page look.

By clicking the Add button you can select what type of run you want to add. There are 3 types of runs:

  • Exact address run
  • Data run
  • Map run

This documentation covers the first 2 types of runs because the third type (Map run) is a more advanced type and it’s currently under development.

  • Exact address run

This element is responsible for displaying an Address search box on your website.

After selecting the Exact address run and clicking the Edit button you will see the properties window where you can configure 4 settings:

  1. This is a name of the Stream. It specifies to which div block the element belongs. It is necessary for the settings in HTML tab.
  2. This is a Section name. This name will be displayed above all elements from the Exact address run.
  3. The Header is a title of the element. It will be displayed above the Address search box on your website.
  4. Footer is a text which will be displayed below the Address search box.

This is how the example Exact address run elements look on the website:

  • Data run

Configuring Data runs is necessary for displaying the records in entered in the Address search box location. To open the Data run properties window please select the run and click the Edit button. You can configure 9 settings here:

  1. This is a name of the Stream. It specifies to which div block the element belongs. It is necessary for the settings in HTML tab.
  2. This is a Section name. This name will be displayed above the all elements from the Data run.
  3. The Header is a title of the element. It will be displayed above all found results.
  4. The Footer is a text which will be displayed below all Data run results.
  5. Here you can set to which layer the configuration concern.
  6. Here you can configure the expressions which will be displayed for the results from the specified layer. To configure them please click Change button on the right side.
  7. Here you can enter the url address with the expression included so it will display the image specified by the expression in the Cluster.
  8. Here you can set the Default image address for the results from the selected layer. The current HTML bullet will be replaced by the selected image.
  9. Here you can set a width for the images from section 7 or 8.
Please note that you can’t use both Image expression address and Default image address in a single Data run.

This is how the example Data run elements look on the website:

  • Map run

This run will allow you to include Aurora map element on the Cluster page. It is still under development and should not be included in a live cluster script due to possible incompatibility issues.

HTML tab

In this tab you have to code the Stream elements. You need to include all Streams from the Runs tab so they can be displayed properly on you website. Each Stream type must be placed in a separate div block. This is an example code for the Streams (main and secondary) presented in this documentation:

As you can see both main and secondary are the Stream names in this Cluster Page Editor example.

CSS tab

This tab allows you to change the way how Cluster elements are being displayed in the web browser. You can find an example CSS code below:

.auroraAddressBox { width: 100%; }

.auroraAddressBoxPopup {
    background-color: #FFF; /* White background color */
    border: 1px solid #317082; /* Dark green border */
    font-size: 0.9em;
    height: 250px; /* Height of box */
    overflow: auto; /* Scrolling features */
    position: absolute; /* Never change this one */
    text-align: left;
    width: 300px; /* Width of box */
    z-index: 100;
}

.auroraAddressBoxPopup div {
    cursor: pointer;
    font-size: 0.9em;
    /* General rule for both .optionDiv and .optionDivSelected */
    margin: 1px;
    padding: 1px;
}

.auroraAddressBoxPopup .optionDiv {
    /* Div for each item in list */
    font-family: Arial;
    font-size: 14px;
}

.auroraAddressBoxPopup .optionDivSelected {
    background-color: #317082;
    color: #FFF;
    /* Selected item in the list */
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
}

.auroraAddressBoxPopupIFrame {
    background-color: #F00;
    position: absolute;
    z-index: 5;
}

.auroraItemImage {
    border: 1px #CCC solid;
    float: left;
    margin: 0 12px 17px 0;
    padding: 4px;
}

.auroraSection { 
clear: both;
    font-family: Arial, sans-serif;
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 0 !important;
    margin-top: 20px !important;
}

.auroraHeader {
    clear: both;
    font-family: Arial, sans-serif;
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 0 !important;
    margin-top: 10px !important;
}

.auroraFooter {
    clear: both;
    font-family: Arial, sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    margin-bottom: 0 !important;
    margin-top: 0px !important;
    margin-left: 15px;
}

.auroraList { list-style-type: disc; }

.auroraListItem {
    clear: both;
    color: black;
    display: list-item;
    font: 1em/1.5em "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

#DR1 .auroraList li.auroraListItem { background: none; }

.auroraListItemWithImage { list-style-type: none; }

.auroraListItem li { display: list-item; }

.auroraListItem div { float: left; }

Web Settings tab

In this tab you have to set the address to the Cluster Service. The address should always point to Cluster.svc file. You can find an example address on the screen below:

image

Create Cluster page task is responsible for preparing a Cluster script for your website. The task itself is not searching for the records in the selected location – it will only display the results. You have to add other tasks which will search for the records. There are 2 tasks which can be used:

  • Find Nearest task

Configuring this task will allow you to set how many records from specified layer(s) should be displayed by the Cluster. You can use more than one Find Nearest task in a single workflow. For more information please visit: Find Nearest

  • Drill Down Through Layers task

This task allows to perform an additional search for the Cluster query. In the task properties you have to choose layers that will take part in the query. You can use more than one Drill Down Through layers task in a single workflow. For more information please visit: Drill Down Through Layers

This is how a complete workflow should look when all 3 tasks are added:

image