PREVIOUS   NEXT   CONTENTS   HOME 

Appendix 2: JavaScript of WebGIS Application

//Define Variables
var Ext, OpenLayers, GeoExt, alert, google, mappanel, Proj4js, printCapabilities, printDialog, saveStrategy, map, WGS84, WGS84_google_mercator, os,  google_hybrid, google_physical, google_satellite, wfs_style, wfs_layer, symbolizer, grid_layer, groupLayer, mapPanel, printPage, store, gridSelectStore, gridSelect, modifyControl, gridPanel, toggleGroup, slider, LayerNodeUI, treeConfig, tree, legendPanel, westPanel;

//set up the Proxy
OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";

Ext.onReady(function() {

//set up a save strategy
var saveStrategy = new OpenLayers.Strategy.Save();
        saveStrategy.events.register('success', null, saveSuccess);
        saveStrategy.events.register('fail', null, saveFail);
        
    function saveSuccess(event) {
        Ext.Msg.alert('Success', 'Changes saved successfully.');
    }
    function saveFail(event) {
        Ext.Msg.alert('Error', 'Changes not saved. If error persists please contact support at [email protected]');
    }   

//set up projections 
Proj4js.defs["EPSG:27700"] = "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs ";

Proj4js.defs["EPSG:900913"] = "+title= Google Mercator EPSG:900913 +proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs";

          // World Geodetic System 1984 projection
            var WGS84 = new OpenLayers.Projection("EPSG:4326");

          // WGS84 Google Mercator projection
            var WGS84_google_mercator = new OpenLayers.Projection("EPSG:900913");

          // OS British National Grid
            var os = new OpenLayers.Projection("EPSG:27700"); 
            
var bounds = new OpenLayers.Bounds(-128 * 156543.0339, -128 * 156543.0339, 128 * 156543.0339, 128 * 156543.0339);

//Create the map object  
var map = new OpenLayers.Map('map_element',{
                maxExtent: bounds,
                maxResolution: "auto",                 
                units: 'm',
                projection: os,
                displayProjection: os,   
                controls:[
//adds scaleline
 new OpenLayers.Control.ScaleLine(),
//add load mask
 new OpenLayers.Control.LoadingPanel(),
//adds Permlink
 new OpenLayers.Control.Permalink(),
 //allows the user pan ability
 new OpenLayers.Control.Navigation(),
 //displays the pan/zoom tools                    
 new OpenLayers.Control.PanZoom(),
 //displays the mouse position's coordinates
 new OpenLayers.Control.MousePosition(
 {div:document.getElementById("")})    
 ]
 } );

//Create Google Map Layer objects
            var google_hybrid = new OpenLayers.Layer.Google(
                "Google Hybrid",
                {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 22, transitionEffect: "resize"}
            );
            var google_physical = new OpenLayers.Layer.Google(
                "Google Physical",
                {type: google.maps.MapTypeId.TERRAIN, transitionEffect: "resize"}
            );
            var google_satellite = new OpenLayers.Layer.Google(
                "Google Satellite",
                {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22, transitionEffect: "resize"}
            );
            
// Create WFS layer style
var wfs_style = {
title: "Features",
pointRadius: 5,
fillColor: "#4169E1",
fillOpacity: 0.4,
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWidth: 1
};

// Create WFS layers          
var wfs_layer = new OpenLayers.Layer.Vector("Features", {
    strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy],
    protocol: new OpenLayers.Protocol.WFS({
    reportError: true,
    visibility: true,   
    url: "http://gislidar.serveftp.com/geoserver/wfs",
    featureType: "glo_lidarweb",
    featureNS: "http://lidartest.org",
    geometryName: "geom",
    version: "1.0.0",
    srsName: "EPSG:27700",
    projection: WGS84_google_mercator 
    }),
   styleMap: new OpenLayers.StyleMap(wfs_style)
  });  
  
//Create Grid layer style
var symbolizer = {
title: "5km Grid",
pointRadius: 5,
fillColor: "white",
fillOpacity: 0,
strokeColor: "black",
strokeOpacity: 1,
strokeWidth: 1,
label: "${TILE_NAME}"
};
// Create Grid layer
var grid_layer = new OpenLayers.Layer.Vector("5km Grid", {
 strategies: [new OpenLayers.Strategy.Fixed()],
    protocol: new OpenLayers.Protocol.WFS({
    visibility: true,   
    url: "http://gislidar.serveftp.com/geoserver/wfs",
    featureType: "OS5km",
    featureNS: "http://lidartest.org",
    geometryName: "the_geom",
    version: "1.0.0",
    srsName: "EPSG:27700",
    projection: WGS84_google_mercator
   }),
   styleMap: new OpenLayers.StyleMap(symbolizer)
  });   

// Create Lidar layers  
var groupLayer = new OpenLayers.Layer.WMS("Choose Lidar Visualisation",
    "http://gislidar.serveftp.com/geoserver/wms", {
        layers: [
            "Lidar:DTM_Hillshade",
            "Lidar:DTM_SVF",
            "Lidar:DTM_Slope",
            "Lidar:DTM_PCA"
        ],
        legend: true,
        format: "image/png",
        transparent: true
    },
            {singleTile: false, isBaseLayer: false, buffer: 0, visibility: false, displayInLayerSwitcher: false, transitionEffect: "resize"}
);

// Create Ist edition OS layer
var firsted = new OpenLayers.Layer.WMS("1st Edition OS",
    "http://gislidar.serveftp.com/geoserver/wms", {
        layers: 'firsted',
        format: "image/png",
        legend: false,
        transparent: true,
        numZoomLevels: 22
    }, {
                singleTile: false, 
                ratio: 1, 
                transitionEffect: "resize",
                isBaseLayer: false,
                visibility: false
            } 
            );   

// Create OpenStreet Map layer 
var osm = new OpenLayers.Layer.OSM();  

//Create Feature Store
var store = new GeoExt.data.FeatureStore({
                fields: [
                    {name: "name", type: "string"},
                    {name: "feature_description", type: "string"},
                    {name: "period", type: "string"},
                    {name: "source", type: "string"},
                    {name: "value", type: "float"},
                    {name: "recorded_by", type: "string"}
          ],
                layer: wfs_layer,
                addFeatureFilter: function(feature) {
        return feature.state !== OpenLayers.State.DELETE;
    }
            });
            
// configure store for grid select combo box
 var gridSelectStore = new Ext.data.SimpleStore({fields: [{ name: 'lon', type: 'float' },
 { name: 'lat', type: 'float' },
 { name: 'zoom', type: 'float' },
 { name: 'label', type: 'string' }],
 data: [['-242805', '6757851', '13', 'SO80NE'],
['-250871', '6757827', '13', 'SO80NW'],
['-242845', '6774041', '13', 'SO81NE'],
['-242825', '6765942', '13', 'SO81SE'],
['-226672', '6757875', '13', 'SO90NE'],
['-234739', '6757867', '13', 'SO90NW'],
['-226680', '6774066', '13', 'SO91NE'],
['-234763', '6774058', '13', 'SO91NW'],
['-226676', '6765966', '13', 'SO91SE'],
['-234751', '6765958', '13', 'SO91SW']]});  

 var gridSelect = new Ext.form.ComboBox({
        tpl: '
{label}',
        store: gridSelectStore,
        title: "Select grid",
        displayField: "label",
        typeAhead: true,
        mode: "local",
        forceSelection: true,
        triggerAction: 'all',
        width: 125,
        emptyText: "Select Grid",
        selectOnFocus: true,
        listeners: {
            "select": function (combo, record) {
                map.setCenter(new OpenLayers.LonLat(record.data.lon, record.data.lat), record.data.zoom);
            }
        }
    });
//initial extent control
var returnExtentBtn = new Ext.Button({
        tooltip: "Return to Initial Extent",
        text: "Return to Intial Extent",
        iconCls: "refresh-icon",
        handler: function () {
            map.setCenter(new OpenLayers.LonLat(-234751.659113951,6765958.19414546), 12);
        }
    });
//Create WFS Modify Feature Controls 
var modifyControl = new OpenLayers.Control.ModifyFeature(wfs_layer);
map.addControl(modifyControl);
modifyControl.activate();

//Set up print provider     
var printProvider = new GeoExt.data.PrintProvider({
        method: "POST", // "POST" recommended for production use
        capabilities: printCapabilities, // from the info.json script in the html
        url: "http://gislidar.serveftp.com/geoserver/pdf/print.pdf",
        customParams: {
            mapTitle: "Lidar WebGIS",
            dpi: "150",
            comment: "Map printed by GeoServer."
        }
    });     
        
//Create Grid Panel for Gridstore
var gridPanel = new Ext.grid.EditorGridPanel({
                renderTo: "south",
                height: 150,
                region: "south",
                viewConfig: {forceFit: true},
                store: store,
                listeners: {
        afteredit: function(e) {
            var feature = e.record.get("feature");
            if(feature.state !== OpenLayers.State.INSERT) {
                feature.state = OpenLayers.State.UPDATE;
            }
        }
    },
                sm: new GeoExt.grid.FeatureSelectionModel({
    selectControl: modifyControl.selectControl,
    singleSelect: true
}),
                cm: new Ext.grid.ColumnModel({
                    defaults: {
                        sortable: true,
                        editor: {xtype: "textfield"}
                    },
                    columns: [
                    {header: "Name", dataIndex: "name"},
                    {header: "Feature Description", dataIndex: "feature_description"},
                    {header: "Period", dataIndex: "period"},
                    {header: "Source", dataIndex: "source"},
                    {header: "Value", dataIndex: "value"},
                    {header: "Recorded by", dataIndex: "recorded_by"}   
        ]
}),
                bbar: [{
                text:"Zoom to...",
                handler:function()
                    {
                    gridPanel.getSelectionModel().each(function(rec){
                        var feature = rec.get("feature");
                        mapPanel.map.zoomToExtent(feature.geometry.getBounds());
                        });
                    }    
                }]
                
                
            });
            
// Configure Toggle Group
var toggleGroup = "draw controls";      

// set up Viewport
 new Ext.Viewport({
        layout: "border",
        items: [{
            region: "north",
            contentEl: "title",
            height: 110,
            split: true,
            useSplitTips: true,
            collapseMode: "mini"
        }, {
            region: "west",
            title: 'LAYER CONTROL',
            iconCls: 'layers',
            collapsedIconCls: 'layers',
            contentEl: "layertree",
            autoScroll: true,
            width: 225,
            split: true,
            useSplitTips: true,
            collapsed: true,
            collapsible: true,
            plugins: [Ext.ux.PanelCollapsedTitle]
            }, {
            region: "south",
            title: 'ADD/VIEW FEATURE INFO',
            iconCls: 'directory_attribute',
            collapsedIconCls: 'directory_attribute',
            contentEl: "south",
            autoScroll: true,
            height: 205,
            collapsed: true,
            collapsible: true,
            split: true,
            useSplitTips: true,
            plugins: [Ext.ux.PanelCollapsedTitle]   
        }, {
            region: "center",
            id: "mappanel",
            title: "Map: Cotswold Escarpment",
            xtype: "gx_mappanel",
            map: map,
            layers: [osm, firsted, google_hybrid,google_physical,google_satellite, groupLayer, grid_layer, wfs_layer],
            split: true,
            useSplitTips: true,
            center: new OpenLayers.LonLat(-234751.659113951,6765958.19414546),
            zoom: 12,
            bbar: ["Select Archaeological Feature Type:  ",
        new GeoExt.Action({
    control: new OpenLayers.Control.DrawFeature(
        wfs_layer, OpenLayers.Handler.Polygon, {
            handlerOptions: {multi: true}
        }
    ),
    map: map,
    text: "Create Polygon",
    toggleGroup: toggleGroup,
    iconCls: 'layer_shape_polygon',
    enableToggle: true
}),
new GeoExt.Action({
    control: new OpenLayers.Control.DrawFeature(
        wfs_layer, OpenLayers.Handler.Path, {
            handlerOptions: {multi: true}
        }
    ),
    map: map,
    text: "Create Line",
    toggleGroup: toggleGroup,
    iconCls: 'layer_shape_line',
    enableToggle: true
}),
new GeoExt.Action({
    control: new OpenLayers.Control.DrawFeature(
        wfs_layer, OpenLayers.Handler.Point, {
            handlerOptions: {multi: true}
        }
    ),
    map: map,
    text: "Create Point",
    toggleGroup: toggleGroup,
    iconCls: 'layer_shape_point',
    enableToggle: true
}),
 {
             text: "Delete",
             iconCls: 'delete',  
    handler: function() {
        gridPanel.getSelectionModel().each(function(rec) {
            var feature = rec.get("feature");
            modifyControl.unselectFeature(feature);
            wfs_layer.removeFeatures([feature]);
            store.remove(rec);
            if(feature.state !== OpenLayers.State.INSERT) {
                feature.state = OpenLayers.State.DELETE;
                wfs_layer.addFeatures([feature]);
            }
        });
    }
}, "->", {
        text: "Save Features",
        iconCls: 'saveicon',
        handler: function() {
            store.commitChanges();
            saveStrategy.save();
        }
    }
    ],
            tbar: ["Zoom to Grid:  ", gridSelect,returnExtentBtn,{
            }, "->", {
        text: "Help",
        iconCls: 'help',
        handler: function() {
    window.open('http://gislidar.serveftp.com/geoserver/www/Application_Manual_v_0.1.pdf', '_blank');
  }
},
        {
            text: "Print PDF...",
            iconCls: 'printicon',
            handler: function(){
                printDialog = new Ext.Window({
                    title: "Print Preview",
                    modal: true, 
                    layout: "fit",
                    width: 450,
                    autoHeight: true,
                    items: [{
                        xtype: "gx_printmappanel",
                        sourceMap: mapPanel,
                        printProvider: printProvider
                    }],
                    bbar: [{
                        text: "Create PDF",
                        handler: function(){ printDialog.items.get(0).print(); }
                    }]
                });
                printDialog.show();
            }
        }]
        }, {
            region: "east",
            contentEl: "guide",
            title: 'GUIDE/DATA EXPORT',
            iconCls: 'information',
            collapsedIconCls: 'information',
            autoScroll: true,
            width: 200,
            split: true,
            collapsible: true,
            collapsed: true,
            useSplitTips: true,
            plugins: [Ext.ux.PanelCollapsedTitle],
            items: [{
            xtype: 'panel',
            title: 'Info',
            html: 'Questions/Comments ****@bham.ac.uk
',  
            autoScroll: true,
            padding: 5,      
            height: 260
            },{
            xtype: 'panel',
            contentEl: "output",
            title: 'Export Data',
            html: 'Please select a data export option below.

Click here to download vector features as a KML file


Click here to download vector features as a shp file
',
            autoScroll: true,
            padding: 5,      
            height: 220     
            }]
        }]
    });

    mapPanel = Ext.getCmp("mappanel");

// create tranparency slider
var slider = new GeoExt.LayerOpacitySlider({
        layer: groupLayer, 
        aggressive: true, 
        width: 120,
        isFormField: true,
        inverse: true,
        label: "adjust",
        fieldLabel: "opacity",
        plugins: new GeoExt.LayerOpacitySliderTip({template: '
Transparency: {opacity}%
'})
    });
    

// create a own layer node UI class, using the TreeNodeUIEventMixin
    var LayerNodeUI = Ext.extend(GeoExt.tree.LayerNodeUI, new GeoExt.tree.TreeNodeUIEventMixin());
        
    var treeConfig = new OpenLayers.Format.JSON().write([{
        nodeType: "gx_baselayercontainer",
        text: "Select Base Layer",
        expanded: true
    }, {
        nodeType: "gx_overlaylayercontainer",
        text: "Select Overlay",
        expanded: true
    }, {
        nodeType: "gx_layer",
        layer: "Choose Lidar Visualisation",
        expanded: true,
        isLeaf: false,
        loader: {
            param: "LAYERS"
        }
    }], true);

// create the Tree 
var tree = new Ext.tree.TreePanel({
        border: true,
        renderTo: "layertree",
        region: "west",
        title: "Layers",
        enableDD: true,
        width: 220,
        tbar: ["Transparency:  ", slider],
        split: true,
        collapsible: true,
        collapseMode: "mini",
        autoScroll: true,
        plugins: [
            new GeoExt.plugins.TreeNodeRadioButton({
                listeners: {
                    "radiochange": function(node) {
                        alert(node.text + " is now the active layer.");
                    }
                }
            })
        ],
        loader: new Ext.tree.TreeLoader({
            applyLoader: false,
            uiProviders: {
                "layernodeui": LayerNodeUI
            }
        }),
        root: {
            nodeType: "async",
            children: Ext.decode(treeConfig)
        },
        listeners: {
            "radiochange": function(node){
                alert(node.layer.name + " is now the the active layer.");
            }
        },
        rootVisible: false,
        lines: false
    });
    
//Setup Legend Panel
var legendPanel = new GeoExt.LegendPanel({
    title: 'Overlay Legend',
    collapsible: true,
    defaults: {
        untitledPrefix: "",
        style: 'padding:5px',
        baseParams: {
            FORMAT: 'image/png'
        }
    }
});
var westPanel = new Ext.Panel({
        id: "westPanel",
        border: true,
        renderTo: "layertree",
        region: "west",
        width: 220,
        split: true,
        autoScroll: true,
        collapseMode: "mini",
html: 'Lidar <img src="http://gislidar.serveftp.com/geoserver/www/img/lidarlegend.png" alt="Lidar Legend">',
items: [legendPanel]
    });
 }  
);

 PREVIOUS   NEXT   CONTENTS   HOME