Page Comparison

This documentation covers basic configuration of Cluster software. Of course the map and layers we are using are specific to our database and reflect the data we are working on. Therefore feel free to diverge from the sample field entries and make it work with your data. Despite these obstacles we strongly believe that if you follow this guide you should be able to enjoy fruits of your work in no time.

...

In this guide we will be using existing Aurora script and we will base our data queries on the map which is being used by this script. You can configure a brand new map and Aurora script if none of the existing ones suits your needs. If you require help with configuration of the Aurora script itself, please see the documentation here: http://statmap.co.uk/?page_id=2272 Getting Started

Start the work on Cluster page by adding a new workflow to your Aurora script.

...

Info
It is very important to set Element Id for this workflow. In our case it is ClusterTest.

Now go on and add 4 tasks into this workflow.

...

First are the two Find Nearest tasks. Detailed documentation explaining what this task does can be found here: http://statmap.co.uk/?page_id=4987 Find Nearest task

First Find Nearest will return 3 records from a single layer, namely Libraries.

...

The last data provider in our example is the Drill Down Through Layers. Detailed description of this task can be found here: http://statmap.co.uk/?page_id=4984 Drill Down Through Layers

In our case we will query a few layers for records:

...

This is how the empty Cluster Page Editor looks like. Detailed description of all buttons and tabs can be found here: http://statmap.co.uk/?page_id=3315 Cluster Page Editor

You could compare Cluster page to a magazine page. Theirs general structure is pretty much the same. When you look at a magazine page you see columns and paragraphs of text. In the case of Cluster page the columns are called streams and the paragraphs are called runs.

...

This is how our HTML template looks. Feel free to recycle it for your project.

1
2
3
4
5
6

<div style="width: 48%; float: left; margin: 0 1% 0 0">
[firstColumn]
</div>
<div style="width: 48%; float: right; margin: 0 1% 0 0">
[secondColumn]
</div>

So the columns are defined. We can now move to the CSS tab. What you see below is the default styling for all Cluster components. We will not go into any specifics here because reconfiguration of the CSS styling sheet is better left to the professionals from the Web Team. Alternatively a detailed documentation with examples can be found here: http://www.w3schools.com/css/default.asp

...

This is how our CSS styling sheet looks. Feel free to recycle it for your project.

...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

.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; }

Now we can move to the next tab – Web Settings. In this tab we must enter the complete address to the Cluster Service. The address will always end with the cluster.svc entry. This is how our configured Web Settings tab looks:

...

This was the last step of the configuration process. Now we are ready to test our script. Please click OK button to confirm all changes and close the Cluster Page Editor. Our next step is saving the Aurora script. To do so please use Save as or Save tool.

...

Info
Please remember that all changes made in the Cluster Page Editor must be saved to the Aurora script before they are visible on the Cluster webpage.

Once the script is saved we can open the Cluster Page Editor again and copy the Cluster embedding code by clicking the Copy JavaScript snippet button on the Runs tab.

...

Now we are holding the whole Cluster script in our clipboard. This is how it looks:

1
2
3
4
5
6
7

<div id='ClusterTest'/>
<script type='text/javascript'>
var script = document.createElement('script'); script.type = 'text/javascript';
script.src = 'http://localhost/map/Cluster.svc/getpage?script=\\Aurora\\My new Aurora Script.AuroraScript$&taskId=ClusterTest&format=js';
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</div>

To display the Cluster in the web browser please create a html file and paste the Cluster script into it. We have created a clusterTest.htmlfile. Now we have to do one more thing:

Add the HTML tags to the clusterTest.html file. This is how the file should look after entering the necessary HTML tags and the Clusterscript:

...

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<html>
<head>
<title>Cluster Test</title>
</head>
<body>
<div id='ClusterTest'/>
<script type='text/javascript'>
var script = document.createElement('script'); script.type = 'text/javascript';
script.src = 'http://localhost/map/Cluster.svc/getpage?script=\\Aurora\\My new Aurora Script.AuroraScript$&taskId=ClusterTest&format=js';
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</div>
</body>
</html>

Our work is complete. We can now double click the clusterTest.html document to see the Cluster script in action in our web browser.

...

Info
After making any changes in the Cluster Page Editor and saving the Aurora script simply refresh the web browser (for example by pressing F5 key) to see the changes.

Info
For more information about Cluster Page Editor, please visit: http://statmap.co.uk/?page_id=3315

Cluster Page Editor

Versions Compared

Old Version 1

New Version Current

Key