|
1
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
|
|
3
|
|
|
4
|
<html xmlns="http://www.w3.org/1999/xhtml" >
|
|
5
|
<head>
|
|
6
|
<title>Mapbuilder Complex Vector Rendering</title>
|
|
7
|
<link rel='StyleSheet' type='text/css' href='../../lib/skin/default/demoStyles.css'/>
|
|
8
|
<style type="text/css">
|
|
9
|
#lists {
|
|
10
|
clear:both;
|
|
11
|
}
|
|
12
|
#lists td,th {
|
|
13
|
padding-left:3px;
|
|
14
|
padding-right:3px;
|
|
15
|
vertical-align:top;
|
|
16
|
}
|
|
17
|
.listitem_active {
|
|
18
|
background-color: FFFF88;
|
|
19
|
}
|
|
20
|
</style>
|
|
21
|
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAxGX044DdXsG8m7HSU-fLXBSOAhXNDhVV0MuxMid11BbPkLvZnhT_y_tZjo_qcjveh8wcvbkT0azpXg"
|
|
22
|
type="text/javascript"></script>
|
|
23
|
<script>
|
|
24
|
// URL of Mapbuilder configuration file.
|
|
25
|
var mbConfigUrl='config.xml';
|
|
26
|
</script>
|
|
27
|
<!-- This points to the core mapbuilder library, replaces this with MapbuilderCompressed.js when you want to use the compressed version -->
|
|
28
|
<script type="text/javascript" src="../../lib/Mapbuilder.js"></script>
|
|
29
|
</head>
|
|
30
|
<!-- This onload event starts mapbuilder -->
|
|
31
|
<body onload="mbDoLoad()" >
|
|
32
|
<!--
|
|
33
|
|
|
34
|
############################# cut here 1 #############################
|
|
35
|
|
|
36
|
-->
|
|
37
|
<div id="all">
|
|
38
|
<div id="header"> <!-- The header of the page -->
|
|
39
|
<h1><a href="http://communitymapbuilder.org">MapBuilder</a> <!--Version-->1.5-rc2<!--VersionEnd--> Complex Vector Rendering</h1>
|
|
40
|
<!-- The version tag will be inserted into the comment tags above
|
|
41
|
during the build process. -->
|
|
42
|
</div><!-- /header -->
|
|
43
|
<div id="middle"><!-- The center piece of the page with left menubar and right mainbody -->
|
|
44
|
<div id="exampleList"></div><!-- this is the container where the menubar will be drawn -->
|
|
45
|
<div id="mainbody"><!-- right side of the middle div, is also divided into two areas -->
|
|
46
|
<div class="left">
|
|
47
|
<h3>Explanation</h3>
|
|
48
|
Using <i>GmlRendererOL</i> allows you to build mapping applications with complex user interaction. This example shows how two FeatureCollections (News and Scenario) are displayed on a map.<br/>
|
|
49
|
Just displaying them would be possible by just adding two GML layers to the OWSContext, but we want to do more.<br/>
|
|
50
|
First, we also want to display the data in a list. Then, we want to see the features highlighted in the list when we hover on them on the map and vice versa. Furthermore, we want to style the features differntly, depending on what FeatureCollection they come from. We also want the hover tooltips to look different for both. And finally, because our data is in a different projection, we need to reproject it.<br/>
|
|
51
|
To achieve all of the above, we use three models for the FeatureCollections: one for the News, one for the Scenario, and a third puts them together using the <i>MergeModels</i> tool. The News and Scenario models have <i>GmlRendererConfig</i> and <i>TipWidgetConfig</i> widgets with different settings. The combined model knows the source model for each feature and displays it according to the settings in the config widgets. The source models could even be in separate coordinate systems, <i>GmlRendererOL</i> will take care of reprojecting the features to the map srs, using the settings from <i>GmlRendererConfig</i>.
|
|
52
|
</div><!-- /left -->
|
|
53
|
<div class="right">
|
|
54
|
<!--
|
|
55
|
|
|
56
|
############################# end cut 1 #############################
|
|
57
|
|
|
58
|
-->
|
|
59
|
<div id="mainMapPane"><!-- This is the container where the map will be drawn -->
|
|
60
|
<noscript>
|
|
61
|
this page requires Javascript to be enabled
|
|
62
|
</noscript>
|
|
63
|
</div><!-- /mainMapPane -->
|
|
64
|
<div id="mainButtonBar">
|
|
65
|
</div>
|
|
66
|
<table id="lists" cellspacing="0" cellpadding="0">
|
|
67
|
<tr>
|
|
68
|
<td id="featureListNews"></td>
|
|
69
|
<td id="featureListScenario"></td>
|
|
70
|
</tr>
|
|
71
|
</table>
|
|
72
|
<!--
|
|
73
|
|
|
74
|
############################# cut here 2 #############################
|
|
75
|
|
|
76
|
-->
|
|
77
|
</div><!-- /right -->
|
|
78
|
</div><!-- /mainbody -->
|
|
79
|
</div><!-- /middle -->
|
|
80
|
<div id="footer"><!-- The footer of the page -->
|
|
81
|
<div class="right">
|
|
82
|
<a href="http://communitymapbuilder.org/" title="powered by community mapbuilder"><img src="../../lib/skin/default/images/Icon.gif"/></a>
|
|
83
|
<a href="https://www.osgeo.org/" title="member of OSgeo"><img src="../../lib/skin/default/images/Osgeo.png"/></a>
|
|
84
|
</div><!-- /right -->
|
|
85
|
</div><!-- /footer -->
|
|
86
|
</div><!-- all -->
|
|
87
|
<!--
|
|
88
|
|
|
89
|
############################# end cut 2 #############################
|
|
90
|
|
|
91
|
-->
|
|
92
|
</body>
|
|
93
|
</html>
|
|
94
|
|
|
95
|
|