Versions Compared

Old Version 2

changes.mady.by.user Robert Sikorski

Saved on

compared with

New Version Current

changes.mady.by.user Dima Andrusenko

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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: 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.

...

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: Cluster Page Editor