Web GIS application development step by step Part 1


Many people asked me about web GIS  development and from where to start. Some questions were basic like ‘how to show a shape file on Google maps’ to advance level as ’tiles are coming from local tile cache or GIS server’. Since I am into Open Source web GIS application development, thus, I decided to write a blog about it that can help the beginners and answer some medium to advance level questions.

First step is to setup a development environment. Keeping the development environment Open source and free from end to end (from Operating system to client side APIs), I selected Ubuntu as the operating system. I installed Ubuntu 12.04 and rest of the story is as follows

Package updates are required, thus, do the following.

sudo apt-get update
sudo apt-get upgrade

this will take some time, depends on your internet speed. I found synaptic package manager missing from my newly installed Ubuntu 12.04 (desktop), thus, I Installed synaptic package manager using commands

Note: Remember, answers to questions on console are case sensitive.

 sudo apt-get install synaptic

I like Google Chrome because it has an easy to use debugger, thus, installed Chrome using synaptic package installer. Keep in mind, chrome for Ubuntu 64 bit is only available for AMD by-default.

To keep a backup backup of some important files, I always use Dropbox. To install Dropbox, python-gpgme package needs to be installed (again using synaptic package installer) for verification of binary signature. Finally, I downloaded Dropbox installation package and installed it.

Behind every successful web application there is a database :). Not that we will be needing a database for spatial purposes (in this tutorial) but it is required for many other purposes in a web application e.g. keeping users details etc. Few choices from Open Source community are MySQL, SQLite and PostgreSQL. PostgreSQL is the best Open Source database especially when it comes to spatial functions. Again, I used synaptic package manager to install postgreSQL (as you can see in in the image below, I installed postgreSQL 9.1.x)



At this moment, postgreSQL is installed but One has to create a role, user and database, thus, I executed following commands through terminal

sudo -u postgres createuser

following questions required user response

Enter name of role to add: scriptNdebug
Shall the new role be a superuser? (y/n) y
Shall the new role be allowed to create databases? (y/n) y
Shall the new role be allowed to create more new roles? (y/n) y

The above command will create a user, now for database

sudo -u postgres createdb myDB

response will be


Now user scriptNdebug needs to have access to myDB database, thus, logged in to command line tool of PostgreSQL

i.e. psql using super user postgres

sudo -u postgres psql 
postgres=# alter user scriptNdebug with encrypted password 'password';

response is

postgres=# grant all privileges on database myDB to scriptNdebug;

response is


What if I want to stop PostgreSQL database server. Following are some useful commands (use them from terminal)


/etc/init.d/postgresql start


/etc/init.d/postgresql stop


/etc/init.d/postgresql restart

If you want server to listen on a specific IP, then change pg_hba_config file. If the file does not exists, then simply rename pg_hba_config.sample at location /usr/share/postgresql/9.1/ to pg_hba_config and make the following changes

host    all        all     @authmethod@

 the above change will make the server listen on IPs from to I want to list on all IPs for all users and ‘password’ as authentication method, thus, I made the following changes

 host    all       all     all     password 

Similarly, if you want to listen on localhost, then make the following changes in file postgresql.config. If the file does not exists, then simply rename postgresql.config.sample at location /usr/share/postgresql/9.1/ to postgresql.config and make the following changes

listen_addresses = 'localhost'

This file is to be changed if one wants to change port 5432. Do not forget to restart PostgreSQL server load the new settings.

Now web server needs to be installed, I selected apache, used synaptic package manager to install apache (version 2.2.22-1ubuntu1.4). This will create a folder ‘www’ in folder /var/. We will use the www folder when we will create a test web GIS application later in this tutorial. If you want to use php as server side development language, install php module for apache server. Just use synaptic to install libapache2-mod-php5. Also install (using synaptic) php5-pgsql module to use postgreSQL with php. Restart apache (use command below) to load these modules.

sudo /etc/init.d/apache2 restart

Finally it is time to install the most important component of Web GIS application i.e. GIS Server. It is important to know what a GIS Server Is? It is a software that listens for specific request (by clients). These requests could be for different services  (read OGC specification on GIS server for details) e.g. getMap request etc. A GIS server loads a dataset (e.g. a shape file or a Geo-Tiff) renders it, cut image into tiles and sends it back to the requesting client. Every time a client pans or zooms, GIS server receives requests and sends image tiles as response. Format of image tiles is specifically selected due to its size. In Free and Open Source Software for Geo  (FOSS4Geo) there are multiple choices for GIS Servers e.g. MapServer, GeoServer, mapnik. qGIS server, MapGuide etc. Some are written in C and some are in Java.

GeoServer has an edge over others because of its administration tool i.e. web based administration interface. With GeoServer, deploying a dataset (let say a shape file) as a WMS is very easy. Thus I decided to install GeoServer. Before installing GeoServer, Java needs to be installed as GeoServer require Java. I used  synaptic package manager to install openjdk-6-jre.  Then downloaded GeoServer from its web site. Unzipped the downloaded file into a folder. Moved to bin folder and edited startup.sh file to add JAVA_HOME variable as shown below (your path might be different).


All is set now, started GeoServer from terminal by using the following command

 sudo ./startup.sh

Note: Do not close this terminal this terminal window because it will shutdown GeoServer.

Started a web browser, and typed http://localhost/geoserver to open administration application and used admin as user name and geoserver as password. Application menu is on left side, clicked on Layer preview to view sample WMS layers. One can click on Open Layers link against any sample layer (as shown in figure below) to open it in a new tab.



Please read GeoServer user manual to know how to deploy your datasets as WMS layers (I will create a WMS in next part of this tutorial). In next part, I will also create a web GIS sample application using Open Layers and explain web GIS application functionality.


11 thoughts on “Web GIS application development step by step Part 1

  1. Pingback: Web GIS application development step by step Part 3 | Script & Debug

  2. Pingback: Web GIS application development step by step Part 1 | Geo-How-To News

  3. Thanks for post…I am new to web gis..and started making app by using dojo and free arcgis js api’s..

    Is this GUI…

    is developed in Dojo.. if not then in what technology we can achieve such GUI..


    • No, this GUI is developed using ExtJS, GeoExt. If you want, you can have a look at mapfish framework whihc also uses ExtJS and GeoExt (in future post I will write about mapfish).

  4. Pingback: GeoExt 3 is around the corner | Script & Debug

  5. I’m sorry, i really want to learn web gis, but i can’t follow your instruction because i don’t understand ubuntu. I’m using windows as my os. Can you help me with setup WebGIS in windows?

    • The code for examples will work on windows as well. You have to install GeoServer and a webserver, rest is almost the same. Let me know if you need help with installation.


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