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 gld186@bham.ac.uk');
    }   

//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 

    Internet Archaeology is an open access journal based in the Department of Archaeology, University of York. Except where otherwise noted, content from this work may be used under the terms of the Creative Commons Attribution 3.0 (CC BY) Unported licence, which permits unrestricted use, distribution, and reproduction in any medium, provided that attribution to the author(s), the title of the work, the Internet Archaeology journal and the relevant URL/DOI are given.

    Terms and Conditions | Legal Statements | Privacy Policy | Cookies Policy | Citing Internet Archaeology

    Internet Archaeology content is preserved for the long term with the Archaeology Data Service. Help sustain and support open access publication by donating to our Open Access Archaeology Fund.

    File last updated: Wed Oct 23 2013