--- /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]
+    });
+
+});