See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/306111829

Complete methodology to create WEBGIS using Free and Open Source tool:
OPENGEO SUITE

Article · August 2016

CITATIONS READS

0 4,514

4 authors:

Sagar Taneja Dheeraj Gambhir

Academy of Scientific and Innovative Research Accenture India
21 PUBLICATIONS   21 CITATIONS    16 PUBLICATIONS   9 CITATIONS   

SEE PROFILE SEE PROFILE

Harpinder Singh Amardeep Singh

Punjab Remote Sensing Centre Punjab Remote Sensing Centre
86 PUBLICATIONS   156 CITATIONS    20 PUBLICATIONS   3 CITATIONS   

SEE PROFILE SEE PROFILE

Some of the authors of this publication are also working on these related projects:

Creation of Digital Database of Rural Drinking Water Supply Sources (RWSS) in Punjab View project

UNDP - TIFAC View project

All content following this page was uploaded by Harpinder Singh on 16 August 2016.

The user has requested enhancement of the downloaded file.

Geospatial Science (ISSN: 2454-6062) GS (2016) Vol.2, No.1, 11-15
Research Article

Geospatial
Science
COMPLETE METHODOLOGY TO CREATE WEB-
GIS USING FREE AND OPEN SOURCE TOOL:
OPENGEO SUITE
Sagar Taneja*, Dheeraj Gambhir, Harpinder Singh and Amardeep Singh
Punjab Remote Sensing Centre, Ludhiana -141001, India (* [email protected])

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ABSTRACT: Online and web based dissemination of geo-spatial data is gaining a lot of popularity today. A Web-GIS
(Geographic Information Systems) application provides easy access to GIS data to a large number of people. This Study
reviews the method to develop a Web-GIS Application using OpenGeo Suite. OpenGeo Suite is a complete geospatial
platform having customizable GIS tools which are used to publish GIS data on the web. OpenGeo Suite contains
GeoServer, PostgreSQL and a GXP template along with various tools to develop a Web-GIS application.

KEYWORDS: Web-GIS, OpenGeo Suite, GeoServer, PostgreSQL, GXP.

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1. INTRODUCTION: Online and web based dissemination of geo-spatial data is gaining a lot of popularity today. A
Web-GIS (Geographic Information Systems) application provides easy access to GIS data to a large number of people.
There are many software both commercial and FOSS (Free and open source software) available on the internet to
develop a Web-GIS application. In this study an attempt has been made to develop a Web-GIS application using the
free edition of OpenGeo Suite.
OpenGeo Suite is a complete geospatial platform for building Web-GIS applications across web browsers,
desktops, and mobile devices. Built on leading open source geospatial software, OpenGeo Suite has a robust and
flexible architecture that enables organizations to reliably manage and publish geospatial data. OpenGeo Suite
includes all the required software like GeoServer and PostgreSQL etc in a single package.
GeoServer is an open source software server written in Java that allows users to share and edit geospatial data.
Designed for interoperability, it publishes data from any major spatial data source using open standards.
PostgreSQL is a powerful, open source object-relational database system that has bindings for many
programming languages such as C, C++, Python, Java, PHP, and Ruby. It runs on all major operating systems.
PostGIS adds support to store geographic objects in the PostgreSQL database.
In OpenGeo Suite, GeoServer is used to create the services of the GIS layers stored in the PostgreSQL
database, further the OpenGeo Suite SDK(Software Development Kit) tools are used to develop and customize the
GUI (Graphical User Interface) of the application.

2. OBJECTIVES: Objective of this study is to create a web based GIS application having basic functionalities like
Pan, Zoom, Identify, Measure, Legend, Query etc, using OpenGeo Suite which is a free and open source software.

3. TOOLS & METHODOLOGY:

TOOLS USED: Free edition of OpenGeo Suite 4.6, PostgreSQL 9.4 and JDK8-u5

3.1 PREREQUISITES AND INSTALLATION OF OPENGEO SUITE:

Install the Java Development Kit (JDK) downloaded from [1]. JDK is required to run and develop Java
application on the computer system.
Install the OpenGeo Suite package downloaded from [2].
Refer [3] for the installation process. While installation enable/check the Dev Tools component.

3.2 INSTALLATION AND CONFIGURATION OF DATABASE:

Download and Install PostgreSQL from [4]. Refer [5] for the installation process. Change the Port number to
5433 while installation. Also download the PostGIS extension using stack builder by checking „Spatial
Extension‟ option during the installation of PostgreSQL.
Taneja, et. al./Geospatial Science, Vol.2, No. 1 12

Loading Shape files into the PostgreSQL Database:

Before importing the shape file to the database, add postgis extension in the database. Open pgAdmin III,
Connect to Database Server in Object Explorer, Explore Database then Right Click on „Extensions‟ and
click on „New Extension‟, select the extension „postgis‟ from dropdown. Else, Run the following
command in SQL Editor:

CREATE EXTENSION postgis;

Open „Postgis Shape file Import/Export Manager‟ and establish a connection by clicking „View
connection details‟ and provide the connection parameters like Username, Password, Database, Server.
Usually the values will be, Host= „localhost‟ and Port=‟5433‟.
Browse Shape file using „Add File‟ button and click on Import button.

3.3 CONFIGURATION OF GEOSERVER:

Open any internet browser and type http://localhost:8080/dashboard/ to open the dashboard of OpenGeo Suite.
Login to the GeoServer using the address http://localhost:8080/geoserver/web/ or click on GeoServer Admin
icon on the dashboard. (Default username is „admin‟ and password is „geoserver‟).
Add a new Workspace in GeoServer using the link in the left panel. Workspaces Add new Workspace and
Type the „Workspace Name‟ in Name and Namespace URI text field and click „Submit‟.
Add a new store in GeoServer using the link in the left panel. StoresAdd new StorePostGIS - PostGIS
Database and fill the „Basic Store Info‟ and „Connection Parameters‟ and click on „Save‟ button.
Click on the „Publish‟ tab and select the GIS layer projection system in „Declared SRS‟ and then compute the
coordinates from „Bounding Boxes‟ and provide other details like styling (If required). Now layer can be
viewed in the „Layer Preview‟ option. Refer to [6] for more details regarding the layer publishing process.

3.4 APPLICATION DEVELOPMENT WITH SDK:Create a Web-GIS application using OpenGeo Suite SDK with
help of following commands in windows command prompt. These commands create a basic application (template)
and further plugins can be added to it.

suite-sdk create / C:\WebApp\WebGis gxp

suite-sdk debug / C:\WebApp\WebGis

Now run the basic start-up Web-GIS application (FIG.I) in browser using URL: http://localhost:9080.

Fig I: Start up Web-GIS Application

3.5 ADDING LAYERS: Open the file app.js (in the path /to/Myapp/src/app/) and edit the “map and layers” section.
Replace the layer „name: “usa:states”‟ with the desired layer source in GeoServer with workgroup name and layer
name like „name:”Workgroup_Name:Layer_Name”‟.
Preview the added layer in the application (in browser). To zoom at a particular location on the added layer by
default, change the „center‟ points in map section and zoom level can also be increased or decreased by editing the
„zoom‟ property in map component of the same section.
Taneja, et. al./Geospatial Science, Vol.2, No. 1 13

3.6 ADDING LEGEND TOOL:

First, add the legend dependency in app.js file by adding a line

* @require plugins/Legend.js .

Also, add the code snippet in the „tools‟ section of the app.js file.

{
ptype: "gxp_legend",
outputTarget: "legendpanel"
}
In the app.js file, replace the code of the westpanel block with the code given below:

Code before:
{
id: "westpanel",
xtype: "container",
layout: "fit",
region: "west",
width: 200
}
Code after:
{
id: "westcontainer",
xtype: "container",
layout: "vbox",
region: "west",
width: 200,
defaults: {
width: "100%",
layout: "fit"
},
items: [{
title: "Layers",
id: "westpanel",
border: false,
flex: 1
}, {
id: "legendpanel",
height: 250
}]
}
After adding any plug-in the application, stop the debug process using the command prompt (Ctrl-C). Now again
debug the application with the command: suite-sdk debug /path/to/myapp

3.7 ADDING A WMS GET FEATURE INFO TOOL

Get feature info tool provides information like attributes of a particular feature on clicking it.
[7] describe the methodology to add WMS Get Feature Info functionality to the viewer application.

3.8 ADDING A GOOGLE GEOCODER SEARCH FIELD

Google Geocoder search field is used to search a specific location.
[8] describes the methodology to add a Google Geocoder search field functionality to the viewer application.

3.9 SETTING UP A FEATURE MANAGER:

Feature manager is a plugin which is used as a backend tool to display the attribute data.
To setup Feature manager in the application, add the following dependency at the top of the app.js file.
* @require plugins/FeatureManager.js .
Add the following code snippet in the „tools‟ section of the app.js file.
{
ptype: "gxp_featuremanager",
id: "states_manager",
Taneja, et. al./Geospatial Science, Vol.2, No. 1 14

paging: true,
autoSetLayer: true
}

3.10 SETTING UP A FEATURE GRID:

Feature Grid Plugin helps to create the GUI to display the attribute data in the application.
[9] describes the methodology to add a Feature Grid search field functionality to the viewer application.

3.11 ADDING QUERY TOOL:

QueryForm Plugin helps to add the query functionality in the application.

Add the following Query Form dependency at the top of the app.js file

* @require plugins/QueryForm.js.

Add the code snippet in the „tools‟ section of the app.js file.

ptype: "gxp_queryform",

featureManager: "states_manager",

outputConfig:{width: 360},

actionTarget: "map.tbar"

3.12 ADDING MEASURE TOOL:

Measure Plugin helps to measure distance and area in the application.

Add the following Measure tool dependency at the top of the app.js file

* @require plugins/Measure.js.

Add the code snippet in the „tools‟ section of the app.js file.

ptype: "gxp_measure",

actionTarget: "map.tbar"

3.13 PACKAGING AND DEPLOYING OF APPLICATION: After the application development, application can
be deployed. Use the following procedure for packaging and deploying of the application.
Debug the application.

Create package of the application using the following command.

suite-sdk package /path/to/myapp /path/to/destination

Find the „.war‟ file at the destination location and then extract the .war file to the following path:

C:\Program Files\Boundless\OpenGeo\jetty\webapps\

4. RESULTS: The Web-GIS application created using the above methodology can be seen in Fig. II.
Run the application by using the following address in the browser.

http://localhost:9080/YourApplicationName
Taneja, et. al./Geospatial Science, Vol.2, No. 1 15

Fig.II Complete Web-GIS Application

5. CONCLUSION: From, this study we can conclude that powerful Web-GIS applications can be created within a
short period of time, using free and open source tools.

REFERENCES:
[1] http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
[2] http://boundlessgeo.com/solutions/opengeo-suite/download/
[3] http://suite.opengeo.org/4.1/installation/windows/install.html
[4] http://www.enterprisedb.com/products-services-training/pgdownload#windows
[5] http://www.postgresqltutorial.com/install-postgresql/
[6] http://docs.geoserver.org/stable/en/user/gettingstarted/postgis-quickstart/index.html
[7] http://suite.opengeo.org/opengeo-docs/webapps/gxp/viewer/featureinfo.html
[8] http://suite.opengeo.org/opengeodocs/webapps/gxp/viewer/geocoder.html
[9] http://suite.opengeo.org/opengeo-docs/webapps/gxp/editor/featuregrid.html

View publication stats