Sample Cluster script

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.

Shown below is our sample Cluster webpage.

Detailed description of how to achieve such effect will be provided further down.

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

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

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.

Find Nearest
Find Nearest
Drill Down Through Layers
Cluster Page

You may be wondering why we are adding Find Nearest task twice. The reason of this is that while configuring Find Nearest you have to set how many records from each queried layer will be returned as a result. In our case we want to return 3 records from some layers and 5 from others.

This is how the workflow with Name and Element Id looks:

Cluster page task is a creator of data presenting / organising template. It needs other tasks to provide it with data. Now we will cover the 3 tasks which are in our example the providers of data for Cluster to display.

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

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

The second Find Nearest will query two other layers and return 5 records from each of them as a result. These layers are: All schools and Housing blocks.

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

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

London boroughs to determine what borough the selected address is in.
Wards and councillors to determine what ward the selected address is in.
Sports and leisure facilities layer to determine if there is such facility within 1000 metres from the selected address. Sports and leisure facilities is a point layer so in order to achieve this we will apply 1000 metres buffer to the point geometries.

Now we can focus on the Cluster Page task. Here you can configure how Cluster webpage should look and what data it should present.

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

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.

There are 3 types of runs available to add to the Cluster page.

Exact address run
Data run
Map Run

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

We start by adding “Exact address run” to the first of our two columns. We enter following values:

Stream: firstColumn
Section: —
Header: Enter address:
Footer: —

Now it’s time for the data runs. To keep the columns balanced we will place 2 runs below the address search box and 4 runs onto the second column (to the right of the Address search box).

The first data run will present data from the All schools layer. We enter following values:

Stream: firstColumn
Section: —
Header: Education
Footer: —
Layer: All schools
Expression:
School: [School]
Address: [Address]
Image expression: —
Default image address: —
Image width: —

The second data run in this stream will present the data from Housing blocks layer. Here we enter following values into the fields:

Stream: firstColumn
Section: —
Header: Housing
Footer: —
Layer: Housing blocks
Expression: Name: [BLOCK_NAME]
Image expression: —
Default image address: —
Image width: —

Now it’s time to add some data runs to the second column. First two runs will have a common theme, therefore we add Public amenities to the Section filed of the first of them. It will present the results of querying the Libraries layer. We therefore add new data run to the list and configure it accordingly:

Stream: secondColumn
Section: Public amenities
Header: Libraries
Footer: —
Layer: Libraries
Expression:
Name: [Name]
Address: [Address]
Image expression: —
Default image address: —
Image width: —

This run will be responsible for displaying information about the Sports and leisure facilities if there is any within 1000 metres from the selected address. Its configuration is as follows:

Stream: secondColumn
Section: —
Header: Sports and leisure facility
Footer: (we’ve found Sports and leisure facilities within 1000 metres from this location)
Layer: Sports and leisure facilities
Expression:
Name: [Name]
Address: [Address]
Image expression: —
Default image address: —
Image width: —

Almost finished now. Just two more data runs. Here is the configuration of the first of the two runs and the second to last data run overall. Both of these runs will have a common theme as well – Public Register, therefore we enter Public Register into the Section field of the first of these runs. This run will display the name of the London Borough where the selected address is located:

Stream: secondColumn
Section: Public Register
Header: LondonBorough
Footer: —
Layer: London boroughs
Expression: Name: [Name]
Image expression: —
Default image address: —
Image width: —

And finally the last data run. This run will display the name of the Ward where the selected address is located.

Stream: secondColumn
Section: —
Header: Ward
Footer: —
Layer: Wards and councillors
Expression: Name: [Ward_name]
Image expression: —
Default image address: —
Image width: —

Now that all the runs are configured we can focus on other tabs of the Cluster Page Editor window. Let’s move on to the HTML tab. Because our initial plan was to have two columns we will configure two <div> elements with equal sizes and we will place our streams as their content.

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.

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.

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.

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