Mercurial > dive4elements > gnv-client
diff gnv/src/main/webapp/scripts/viewport.jsp @ 971:a0e6566cd111
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 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/gnv/src/main/webapp/scripts/viewport.jsp Tue Jun 01 12:55:24 2010 +0000 @@ -0,0 +1,233 @@ +OpenLayers.ProxyHost= "/cgi-bin/proxy.cgi?url="; +Ext.BLANK_IMAGE_URL = "scripts/openlayers/OpenLayers-2.9/theme/default/img/blank.gif"; + +/** + * XXX + * Change specific attributes for map, wfs-t, etc here. Do not change these + * settings inline the code! + */ +PROJECTION = "EPSG:4326"; +PROJECTIONS = [PROJECTION, 'EPSG:4326'] // Projection used in projection selector +MAX_EXTENT = new OpenLayers.Bounds(-17.44,29.41,40.04,77.66); +INITIAL_CENTER = new OpenLayers.LonLat(5, 55); + +Ext.onReady(function() { + + /* this function call initialized the layers that are defined by the user. + * The variable 'layer' and 'layers' are initialized in this function as + * well, that are used in the following code! So do not remove this function + * call. + */ + initLayers(); + + var options = { + maxExtent: MAX_EXTENT, + projection: PROJECTION, + zoom: 5, + controls: [], + units: 'm' + }; + + +/* ------------------------ Create map and add controls ---------------------*/ + // create map + map = new OpenLayers.Map(options); + map.displayProjection = new OpenLayers.Projection(PROJECTION); + + // add controls + + + var nav = new OpenLayers.Control.NavigationHistory(); + map.addControl(nav); + + panel = new OpenLayers.Control.Panel(); + controls = { + previous: nav.previous, + next : nav.next, + navigate: new OpenLayers.Control.MouseDefaults( + { + displayClass: 'olControlPan', + title:'Verschieben der Karte' + } + ), + zoombox: new OpenLayers.Control.ZoomBox( + { + displayClass: 'olControlZoomBox', + title: 'Zum Zoomen ziehen Sie eine Box auf, indem Sie klicken und ziehen' + } + ), + info : new OpenLayers.Control.WMSGetFeatureInfo({ + displayClass: "olControlFeatureInfo", + url: 'http://fluggs.wupperverband.de/wmsconnector/com.esri.wms.Esrimap/WV_WMS', + title: 'Identify features by clicking', + queryVisible: true, + eventListeners: { + getfeatureinfo: function(event) { + mapPanel.map.addPopup(new OpenLayers.Popup.FramedCloud( + "chicken", + mapPanel.map.getLonLatFromPixel(event.xy), + null, + event.text, + null, + true + )); + } + } + }) + }; + + for (var key in controls) { + panel.addControls([controls[key]]); + } + + map.addControl(panel); + map.addControl(new OpenLayers.Control.PanZoomBar({zoomWorldIcon: 'true'})); + map.addControl(new OpenLayers.Control.MouseDefaults()); + map.addControl(new OpenLayers.Control.ScaleLine()); + // Displaying the mouse postion + mousePosition = new OpenLayers.Control.MousePosition(); + map.addControl(mousePosition); + +/* --------------------------------------------------------------------------- */ + + // Scale Chooser + var scaleStore = new GeoExt.data.ScaleStore({map: map}); + var zoomSelector = new Ext.form.ComboBox({ + store: scaleStore, + emptyText: "Zoom Level", + tpl: '<tpl for="."><div class="x-combo-list-item">1 : {[parseInt(values.scale)]}</div></tpl>', + editable: false, + triggerAction: 'all', // needed so that the combo box doesn't filter by its current content + mode: 'local' // keep the combo box from forcing a lot of unneeded data refreshes + }); + + zoomSelector.on('select', + function(combo, record, index) { + map.zoomTo(record.data.level); + }, + this + ); + + map.events.register('zoomend', this, function() { + var scale = scaleStore.queryBy(function(record){ + return this.map.getZoom() == record.data.level; + }); + + if (scale.length > 0) { + scale = scale.items[0]; + zoomSelector.setValue("1 : " + parseInt(scale.data.scale)); + } else { + if (!zoomSelector.rendered) return; + zoomSelector.clearValue(); + } + }); + + + // create MapPanel + mapPanel = new GeoExt.MapPanel({ + border: true, + title: "Karte mit GeoNames Suche", + region: "center", + map: map, + layers: layers, + bbar: [zoomSelector] + }); + + // map.setCenter(INITIAL_CENTER); + +/* --------------------------- Layer Tree ----------------------------------- */ + + + // LayerTree + var tree = new Ext.tree.TreePanel({ + border: true, + enableDD: true, + region: "east", + title: "LayerTree", + width: 200, + split: true, + collapsible: false, + collapseMode: "mini", + autoScroll: true, + loader: new Ext.tree.TreeLoader({ + applyLoader: false, + }), + root: { + nodeType: "async", + children: [{ + nodeType: "gx_baselayercontainer", + expanded: true + }, { + nodeType: "gx_overlaylayercontainer", + expanded: true, + loader: { + filter: function(record) { + var layer = record.get("layer"); + return layer.displayInLayerSwitcher === true && + layer.isBaseLayer === false; + } + } + }] + }, + rootVisible: false, + lines: false + }); + +/*-------------------------------- Feature grid -------------------------------*/ + + // create legend panel + legendPanel = new GeoExt.LegendPanel({ + id: 'legendpanel', + dynamic: true, + border: true, + title: 'Legende', + collapsible: false, + split: false, + defaults: { + labelCls: 'legend', + style: 'padding: 5px' + }, + bodyStyle: 'padding:5px', + width: 250, + autoScroll: true, + region: 'east' + //layerStore: mapPanel.layers + }); + + +// use separate panels + // Create GUI + + var mylegend = new Ext.Panel( + { + region: "west", + title: '', + split: true, + width: 250, + minSize: 225, + maxSize: 400, + collapsible: false, + overflow: 'auto', + margins: '0 0 0 5', + layout: 'accordion', + layoutConfig: { + animate: true, + activeOnTop: false + }, + items: [ + tree, + legendPanel + ] + } + ); + + // The main panel + new Ext.Panel({ + renderTo: "mapcontainer", + layout: "border", + width: 700, + height: 420, + items: [mapPanel, mylegend] + }); + +});