Web GIS application development step by step Part 2

As promised, here is the second part of web GIS development tutorial. What we have done till now

  1. Installed Ubuntu
  2. Installed synaptic package installer (to make installation job easy)
  3. Installed PostgreSQL
    1.  Created Role, user and database
    2. Changed config files to make server listen on localhost and other IPs
  4. Installed apache web server
    1. Installed php module
    2. Installed PostgreSQL driver for php
  5. Installed Java
  6. Installed GeoServer

Its time to create a web GIS application. When I installed apache web server, a folder was created in /var folder i.e. www. I created a new folder in /var/www folder named it myapp and inside my app I created an other folder known as lib (/var/www/myapp/lib). All libraries will go into this folder (keeping our code manageable).

The most important library required for a web GIS application is mapping library. For beginners, mapping library is the one which shows map (tiles to precise), allows zoom in/out, pan, adding overlayer and many other functionaries. For mapping libraries multiple options are available, some are based on JavaScript and some are based on Flash etc. I like the ones based on JavaScript and particularly like OpenLayers for its richness.

I downloaded OpenLayers from its web site. Unzipped it into my lib folder (/var/www/myapp/lib/openlayers). I wrote a small html web page (myapp.html) and added OpenLayers to it for demo web GIS application, following is an explanation of it.

We need to load OpenLayers library into our html page, for this we will use the following line in header section of our html page.


<script type="text/javascript" src="http://localhost/myapp/lib/openlayers/lib/OpenLayers.js"></script>
<link rel="stylesheet" type="text/css" href="http://localhost/myapp/lib/openlayers/theme/default/style.css" />

When this code will run on side browser, link element will set styles for zoom buttons etc. and script element will fetching OpenLayers JavaScript library.

Note: You can link OpenLayers library from their web site but I think serving it from your own local web server is better.

A DIV element is required to embed map into an html page. Why DIV because contents inside DIV can be updated without updating the host html page, thus, when we zoom in on a map only contents of DIV are updated. Following is html code for DIV element.


<div id="map"></div>

Now that DIV is created (named ‘map’),  we need to create a JavaScript function that can create map inside this DIV (basically link OpenLayers library to this DIV). I added following code in head section of my html page.

 function init()
 {
    // variables
    var map, layer;

    // connect OLs map object with DIV map
    map = new OpenLayers.Map('map');

    // create a layer object
    layer = new OpenLayers.Layer.O SM( "Simple OSM Map");

    // add layer object to map object
    map.addLayer(layer);

   // Zoom to level 2 and set 0,0 as map center
   map.setCenter(new OpenLayers.LonLat(0 ,0),2);

}

Wait we are not finished yet (please be patient 🙂 ). We need to call the JavaScript function (init()) when ever our myapp.html page loads. For this, I called init() function on page load (see below)

<body onload = "init()">

Now, when myapp.html will be loaded, init() function will be called and map will appear in web browser. Now every thing was set, I opened http://localhost/myapp/myapp.html in my web browser and got the following output.

Screenshot from 2014-06-01 15:49:13

I know that init() function needs explanation, thus, lets dissect it.

First are two variables map and layer. Both are simple JavaScript variables which will be used to pint to OpenLayers map and layer objects. Always use var keyword while defining variable inside a function otherwise they take global scope.

Second line creates an OpenLayer map object and pass our DIV map as argument. Now our DIV will be a canvas for drawing tiles and will also respond to mouse drag and double click (along with my more functionalities).

Third line creates a layer object and this layer object is specific to OpenStreetMap (OSM). What is happening at the backend is that code is requesting OSM mapping servers for maps (basically WMS). Don’t worry I will explain WMS in next tutorial.

Fourth line is adding the newly created layer to map (see reference to newly created layer is passed in the addLayer()).

Finally, in fifth line, map was centered at 0,0 and zoom level 2 was set.

For all OpenLayers functions, please have a look at OpenLayes API documentation. I wish they can add one liner examples to each function’s help. For JavaScript, have a look at codeadademy and w3schools  web sites.

In Next tutorial, I will talk about GeoServer’s role in a web GIS application (with example) and its further use. PostGIS installation, configuration and usage and some JS GUI libraries.

Full code for the demo myapp.html is below


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="content-type" content="text/html; charset=UTF8" />
 <meta name="content-language" content="en" />
 <title>Web Map Application</title>

 <script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>

 <script type="text/javascript" src="http://localhost/myapp/lib/openlayers/lib/OpenLayers.js"></script>
 <link rel="stylesheet" type="text/css" href="http://localhost/myapp/lib/openlayers/theme/default/style.css" />

		
<script type="text/javascript">

 function init()
 {

    var map, layer;

    // connect OLs map object with DIV map
    map = new OpenLayers.Map("map");

    // create a layer object
    layer = new OpenLayers.Layer.OSM( "Simple OSM Map");

    // add layer object to map object
    map.addLayer(layer);

     // setup tiled layer
    var tiled = new OpenLayers.Layer.WMS(
                    "cite:Africa_boundaries_3857 - Tiled", "http://localhost:8080/geoserver/cite/wms",
     {
            LAYERS: 'cite:Africa_boundaries_3857',
            STYLES: '',
            format: 'image/png',
            tiled: true,
            transparent: true,

      },
      {
           buffer: 0,
           displayOutsideMaxExtent: true,
           isBaseLayer: false,
           
       } 
   );

   // add new layer object to map object
   map.addLayer(tiled);

  // Zoom to level 2 and set 0,0 as map center 
  map.setCenter(new OpenLayers.LonLat(0 ,0),2); 

}

</script>
</head>
<body onload = "init()">


<div id="map" style="width:100%;height:95%; z-index: 0" > </div>


</body>
</html>


Advertisements

4 thoughts on “Web GIS application development step by step Part 2

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

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

    • Sorry, during an update some of tags were accidentally placed in the code section that broke the code. I have updated this blog.

      Thanks for pointing.

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