Complete GIS application

Finally we add one more bonus track to GeoReports tutorial – DigMap GIS application.

To enable user friendly environment for WPS DigMap process, we will wrap it using with OpenLayers and the Boundless SDK. Information how to setup client and basic information how to build complete interactive web applications can be found here: http://suite.opengeo.org/opengeo-docs/webapps/index.html

We shall start by creating a basic viewer and adding additional simple plug in for DigMap service. More details can be found http://suite.opengeo.org/opengeo-docs/webapps/gxp/basic/index.html Let’s start. First create a basic viewer:

suite-sdk create DigMap

DigMap plugin will make a call to gd:DigMapSimple WPS and display result. One could use and follow Creating WPS processes with Java tutorial but at the moment OpenLayers.WPSClient canreturn only geometry, not a string or other data type. So we can use OpenLayers.Request.POST for this purpose.  Create new file DigMap.js in DigMap/src/app/plugins folder (plugins folder doesn’t exist so create it)

mkdir -p DigMap/src/app/plugins
touch DigMap/src/app/plugins/DigMap.js
vi  DigMap/src/app/plugins/DigMap.js

enter code into DigMap.js file

/**
 * @require plugins/Tool.js
 * @require GeoExt/widgets/Action.js
 * @require OpenLayers/Control/DrawFeature.js
 * @require OpenLayers/Handler/RegularPolygon.js
 * @require OpenLayers/Handler/Point.js
 * @require OpenLayers/Layer/Vector.js
 * @require OpenLayers/Renderer/SVG.js
 * @require OpenLayers/Renderer/VML.js
 * @require plugins/BoxInfo.js
 * @require GeoExt/widgets/Popup.js
 */

Ext.ns("myapp.plugins");

myapp.plugins.DigMap = Ext.extend(gxp.plugins.Tool, {

  ptype: "myapp_digmap",

  addActions: function() {
    var map = this.target.mapPanel.map;
    this.pointLayer = new OpenLayers.Layer.Vector(null, {displayInLayerSwitcher: false});
    map.addLayers([this.pointLayer]);
    // keep our vector layer on top so that it's visible
    map.events.on({
      addlayer: this.raiseLayer,
      scope: this
    });
    var action = new GeoExt.Action({
      text: "DigMap",
      toggleGroup: "draw",
      enableToggle: true,
      map: map,
      control: new OpenLayers.Control.DrawFeature(this.pointLayer,
        OpenLayers.Handler.Point, {
          eventListeners: {
            featureadded: this.generateDigMap,
            scope: this
          }
        }
      )
    });
    return myapp.plugins.DigMap.superclass.addActions.apply(this, [action]);
  },

  generateDigMap: function(evt) {
        point = evt.feature;
	OpenLayers.Request.POST({
        url: "http://localhost:8080/geoserver/wps",
        params: {
            "SERVICE": "WPS",
            "REQUEST": "Execute",
            "VERSION": '1.0.0',
            "IDENTIFIER": 'gs:DigMapSimple',
            "RawDataOutput": 'digmap',
            "datainputs": "geometry=POINT("+point.geometry.x+" "+point.geometry.y+")"
        },
	headers: {
        	"Content-Type": "text/plain"
	},
        success: function(response) {
                     	//display result
                     	alert(response.responseText);
        },
        failure: function(res){
                     alert('failure');
        }

	});

        this.pointLayer.removeFeatures([point]);
  },

  raiseLayer: function() {
    var map = this.pointLayer && this.pointLayer.map;
    if (map) {
      map.setLayerIndex(this.pointLayer, map.layers.length);
    }
  }

});

Ext.preg(myapp.plugins.DigMap.prototype.ptype, myapp.plugins.DigMap);

Embed plugin into viewer application. First add dependency,

 * @require plugins/DigMap.js

and include button on toolbar.

{
  ptype: "myapp_digmap",
  id: "digmap",
  outputTarget: "map",
  actionTarget: "map.tbar"
}
Add new layer source:
        local: {
            ptype: "gxp_wmscsource",
            url: "/geoserver/wms",
            version: "1.1.1"
        }

Change map projection to EPSG:4326, comment out mapnik layer and add opengeo:countries layer.

        layers: [/*{
            source: "osm",
            name: "mapnik",
            group: "background"
        }, */{
            source: "local",
            name: "opengeo:countries",
            selected: true,
	    group: "background"
        }]

Complete app.js code

/**
 * Add all your dependencies here.
 *
 * @require widgets/Viewer.js
 * @require plugins/LayerTree.js
 * @require plugins/OLSource.js
 * @require plugins/OSMSource.js
 * @require plugins/WMSCSource.js
 * @require plugins/ZoomToExtent.js
 * @require plugins/NavigationHistory.js
 * @require plugins/Zoom.js
 * @require plugins/AddLayers.js
 * @require plugins/RemoveLayer.js
 * @require RowExpander.js
 * @require plugins/DigMap.js
 */

var app = new gxp.Viewer({
    portalConfig: {
        layout: "border",
        region: "center",

        // by configuring items here, we don't need to configure portalItems
        // and save a wrapping container
        items: [{
            id: "centerpanel",
            xtype: "panel",
            layout: "fit",
            region: "center",
            border: false,
            items: ["mymap"]
        }, {
            id: "westpanel",
            xtype: "container",
            layout: "fit",
            region: "west",
            width: 200
        }],
        bbar: {id: "mybbar"}
    },

    // configuration of all tool plugins for this application
    tools: [{
        ptype: "gxp_layertree",
        outputConfig: {
            id: "tree",
            border: true,
            tbar: [] // we will add buttons to "tree.bbar" later
        },
        outputTarget: "westpanel"
    }, {
        ptype: "gxp_addlayers",
        actionTarget: "tree.tbar"
    }, {
        ptype: "gxp_removelayer",
        actionTarget: ["tree.tbar", "tree.contextMenu"]
    }, {
        ptype: "gxp_zoomtoextent",
        actionTarget: "map.tbar"
    }, {
        ptype: "gxp_zoom",
        actionTarget: "map.tbar"
    }, {
        ptype: "gxp_navigationhistory",
        actionTarget: "map.tbar"
    }, {
        ptype: "myapp_digmap",
        id: "digmap",
        outputTarget: "map",
        actionTarget: "map.tbar"
    }],

    // layer sources
    sources: {
        local: {
            ptype: "gxp_wmscsource",
            url: "/geoserver/wms",
            version: "1.1.1"
        },
        osm: {
            ptype: "gxp_osmsource"
        }
    },

    // map and layers
    map: {
        id: "mymap", // id needed to reference map in portalConfig above
        title: "Map",
        projection: "EPSG:4326",
        center: [16,46],
        zoom: 4,
        layers: [/*{
            source: "osm",
            name: "mapnik",
            group: "background"
        }, */{
            source: "local",
            name: "opengeo:countries",
            selected: true,
	    group: "background"
        }],
        items: [{
            xtype: "gx_zoomslider",
            vertical: true,
            height: 100
        }]
    }

});

Deploy application,

suite-sdk deploy -d localhost -u manager -p ***** DigMap/

and enjoy.
http://localhost:8080/DigMap

Download whole eclipse project in .zip  DigMap.zip

P.S. You can access DigMap demo on Internet: http://digmap-lab.yottabyte.hr/DigMap/

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s