Mercurial > dive4elements > gnv-client

comparison gnv/src/main/webapp/scripts/viewport.jsp @ 971:a0e6566cd111

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Integrated Openlayers using ext and geoext into the GNV-WebClient gnv/trunk@1139 c6561f87-3c4e-4783-a992-168aeb5c3f6f
author Tim Englich <tim.englich@intevation.de>
date Tue, 01 Jun 2010 12:55:24 +0000
parents
children 1bb54da8c8ed
comparison
equal deleted inserted replaced
970:d91ffd0e8239 971:a0e6566cd111
1 OpenLayers.ProxyHost= "/cgi-bin/proxy.cgi?url=";
2 Ext.BLANK_IMAGE_URL = "scripts/openlayers/OpenLayers-2.9/theme/default/img/blank.gif";
3
4 /**
5 * XXX
6 * Change specific attributes for map, wfs-t, etc here. Do not change these
7 * settings inline the code!
8 */
9 PROJECTION = "EPSG:4326";
10 PROJECTIONS = [PROJECTION, 'EPSG:4326'] // Projection used in projection selector
11 MAX_EXTENT = new OpenLayers.Bounds(-17.44,29.41,40.04,77.66);
12 INITIAL_CENTER = new OpenLayers.LonLat(5, 55);
13
14 Ext.onReady(function() {
15
16 /* this function call initialized the layers that are defined by the user.
17 * The variable 'layer' and 'layers' are initialized in this function as
18 * well, that are used in the following code! So do not remove this function
19 * call.
20 */
21 initLayers();
22
23 var options = {
24 maxExtent: MAX_EXTENT,
25 projection: PROJECTION,
26 zoom: 5,
27 controls: [],
28 units: 'm'
29 };
30
31
32 /* ------------------------ Create map and add controls ---------------------*/
33 // create map
34 map = new OpenLayers.Map(options);
35 map.displayProjection = new OpenLayers.Projection(PROJECTION);
36
37 // add controls
38
39
40 var nav = new OpenLayers.Control.NavigationHistory();
41 map.addControl(nav);
42
43 panel = new OpenLayers.Control.Panel();
44 controls = {
45 previous: nav.previous,
46 next : nav.next,
47 navigate: new OpenLayers.Control.MouseDefaults(
48 {
49 displayClass: 'olControlPan',
50 title:'Verschieben der Karte'
51 }
52 ),
53 zoombox: new OpenLayers.Control.ZoomBox(
54 {
55 displayClass: 'olControlZoomBox',
56 title: 'Zum Zoomen ziehen Sie eine Box auf, indem Sie klicken und ziehen'
57 }
58 ),
59 info : new OpenLayers.Control.WMSGetFeatureInfo({
60 displayClass: "olControlFeatureInfo",
61 url: 'http://fluggs.wupperverband.de/wmsconnector/com.esri.wms.Esrimap/WV_WMS',
62 title: 'Identify features by clicking',
63 queryVisible: true,
64 eventListeners: {
65 getfeatureinfo: function(event) {
66 mapPanel.map.addPopup(new OpenLayers.Popup.FramedCloud(
67 "chicken",
68 mapPanel.map.getLonLatFromPixel(event.xy),
69 null,
70 event.text,
71 null,
72 true
73 ));
74 }
75 }
76 })
77 };
78
79 for (var key in controls) {
80 panel.addControls([controls[key]]);
81 }
82
83 map.addControl(panel);
84 map.addControl(new OpenLayers.Control.PanZoomBar({zoomWorldIcon: 'true'}));
85 map.addControl(new OpenLayers.Control.MouseDefaults());
86 map.addControl(new OpenLayers.Control.ScaleLine());
87 // Displaying the mouse postion
88 mousePosition = new OpenLayers.Control.MousePosition();
89 map.addControl(mousePosition);
90
91 /* --------------------------------------------------------------------------- */
92
93 // Scale Chooser
94 var scaleStore = new GeoExt.data.ScaleStore({map: map});
95 var zoomSelector = new Ext.form.ComboBox({
96 store: scaleStore,
97 emptyText: "Zoom Level",
98 tpl: '<tpl for="."><div class="x-combo-list-item">1 : {[parseInt(values.scale)]}</div></tpl>',
99 editable: false,
100 triggerAction: 'all', // needed so that the combo box doesn't filter by its current content
101 mode: 'local' // keep the combo box from forcing a lot of unneeded data refreshes
102 });
103
104 zoomSelector.on('select',
105 function(combo, record, index) {
106 map.zoomTo(record.data.level);
107 },
108 this
109 );
110
111 map.events.register('zoomend', this, function() {
112 var scale = scaleStore.queryBy(function(record){
113 return this.map.getZoom() == record.data.level;
114 });
115
116 if (scale.length > 0) {
117 scale = scale.items[0];
118 zoomSelector.setValue("1 : " + parseInt(scale.data.scale));
119 } else {
120 if (!zoomSelector.rendered) return;
121 zoomSelector.clearValue();
122 }
123 });
124
125
126 // create MapPanel
127 mapPanel = new GeoExt.MapPanel({
128 border: true,
129 title: "Karte mit GeoNames Suche",
130 region: "center",
131 map: map,
132 layers: layers,
133 bbar: [zoomSelector]
134 });
135
136 // map.setCenter(INITIAL_CENTER);
137
138 /* --------------------------- Layer Tree ----------------------------------- */
139
140
141 // LayerTree
142 var tree = new Ext.tree.TreePanel({
143 border: true,
144 enableDD: true,
145 region: "east",
146 title: "LayerTree",
147 width: 200,
148 split: true,
149 collapsible: false,
150 collapseMode: "mini",
151 autoScroll: true,
152 loader: new Ext.tree.TreeLoader({
153 applyLoader: false,
154 }),
155 root: {
156 nodeType: "async",
157 children: [{
158 nodeType: "gx_baselayercontainer",
159 expanded: true
160 }, {
161 nodeType: "gx_overlaylayercontainer",
162 expanded: true,
163 loader: {
164 filter: function(record) {
165 var layer = record.get("layer");
166 return layer.displayInLayerSwitcher === true &&
167 layer.isBaseLayer === false;
168 }
169 }
170 }]
171 },
172 rootVisible: false,
173 lines: false
174 });
175
176 /*-------------------------------- Feature grid -------------------------------*/
177
178 // create legend panel
179 legendPanel = new GeoExt.LegendPanel({
180 id: 'legendpanel',
181 dynamic: true,
182 border: true,
183 title: 'Legende',
184 collapsible: false,
185 split: false,
186 defaults: {
187 labelCls: 'legend',
188 style: 'padding: 5px'
189 },
190 bodyStyle: 'padding:5px',
191 width: 250,
192 autoScroll: true,
193 region: 'east'
194 //layerStore: mapPanel.layers
195 });
196
197
198 // use separate panels
199 // Create GUI
200
201 var mylegend = new Ext.Panel(
202 {
203 region: "west",
204 title: '',
205 split: true,
206 width: 250,
207 minSize: 225,
208 maxSize: 400,
209 collapsible: false,
210 overflow: 'auto',
211 margins: '0 0 0 5',
212 layout: 'accordion',
213 layoutConfig: {
214 animate: true,
215 activeOnTop: false
216 },
217 items: [
218 tree,
219 legendPanel
220 ]
221 }
222 );
223
224 // The main panel
225 new Ext.Panel({
226 renderTo: "mapcontainer",
227 layout: "border",
228 width: 700,
229 height: 420,
230 items: [mapPanel, mylegend]
231 });
232
233 });
http://dive4elements.wald.intevation.org