GIS WEB CLIENTS

There are a number of open source web clients available online which support WMS services to display geospatial images in browser. These applications make use of AJAX (Asychronous Javascript And XML) calls for WMS services. The image files received in response to these calls are then mosaiced on browser canvas and mouse position displays coordinates based on zoom and centre point/canvas coverage. Every zoom action (zoom in/out) results in a fresh WMS AJAX calls unless the current zoom level images are already available in cache.

The most popular amongest these WMS web clients are Openlayers and Leaflet

OPENLAYERS

Openlayers is a very famous javascript library web client for map services. It allows WMS to be loaded in its canvas, graphics like point, line or polygon can be created, map can be rotataed in any angle, its brightness, contrast & can be changed, KML, GPX, GeoJSON & GeoRSS (pre version 3) support available and so on.

As far as the javascript codes are concerned, this library has witnessed one major change in version 3. The codes are little different in version 3 as compared to older version. We will dig the version 3 first. Later on we will have glimse of version 2 just to have the usage of GeoRSS.

OPENLAYERS V3.X

OpenLayers v3.x is a comprehensive rewrite of v2.x javascript library, targeting the latest in HTML5 and CSS3 features. This library continues to have broad support for projections, standard protocols, editing functionality of graphics. The new version of the library focuses on performance improvements, lighter builds, prettier visual components, an improved API, use of WebGL technology like rotating the map canvas and changing the brightness and contrast of maps and many more.

In both the versions of Openlayers, the default position of the map in the web client needs to be defined first. These default parameters are

  • Center Coordinates of the map: This takes latitude & longitude values in number (decimal) format.
  • Zoom level: This takes zoom value in number (integer) format.
Openlayers has two types of layers to display on the canvas:
  • Baselayers: These layers form the background image of the map. Base layer(s) is mandatory.
  • Overlays: These layers always lie over the baselayers.
We will work only with WMS and OSM (Open Street Maps). There are many other map services which openlayers support. WMS layers in Openlayers requires the following mandatory parameters:
  • URL: WMS url is required.
  • LAYERS:The name of the layer. In case of multiple layers, seperate each layer name by comma.
  • MAP: This is required in case you are using MS4W
Rest all the parameters which were described in WMS will be set to their default values as mentioned in Openlayers Javascript library.

In case the WMS layers are used as Baselayer, then you need to mention which layer you want as default baselayer when the page starts by setting visible parameter to true or false.

The follwing code is the simplest Openlayers version 3.x code to load OSM. You need to include the follwing CSS file and Javascript file in you code.

<link rel="stylesheet" href="../css/ol.css" type="text/css">
<div id="map" class="map"></div>
<script src="../build/ol.js"></script>


After these files inclusion, add the following lines:

<script>
	var map = new ol.Map({
		layers: [new ol.layer.Tile({
			visible: true,
			source: new ol.source.OSM()
		})],
		target: "map",
		view: new ol.View({
		center: [20,20],
		zoom: 4,
		projection: 'EPSG:4326'
		})
	});
</script>


Now you are ready to run your first openlayers v3.x application. Click here to see it running.

Here is a beautiful example of CDM (Closest Distance Map) in Openlayers v3.x to find the closest point between mouse position and a Polygon. You can drag and drop any KML file from your system too and the mouse pointer will start calculating the closest distance from this KML. Panning the map with Shift pressed rotates the canvas. You can test it yourself. Click here to see the CDM in Openlayers version 3. The minimum distance is calculated using geographiclib.js javascript library. You can also notice the Layer Switcher which is not officially available with Openlayers v3.x.

You can Download CDM from here and run on your system.

OPENLAYERS v2.x

We already know that the javascript code of v2.x is little different from v3.x still the parameters required for the default position of the map and types of layers remain the same.

The following example displays a simple map in v2.

<script type="text/javascript" src="lib/openlayers.js" /> 
<div id="map"></div>
<script type="text/javascript">
    var map = new OpenLayers.Map({
        div: "map",
        theme: null,
        layers: [
            new OpenLayers.Layer.OSM("OpenStreetMap")
        ],
        center: new OpenLayers.LonLat(0, 0),
        zoom: 1
    });
  </script>

Click here to see the it running.

One of the main advantage I found with Openlayers v2.x is that it supports GeoRSS. This support is missing in v3.x. On example of GeoRSS is Geotagged photos on map. Click here to see the example. You can also download it run on your system from here.

THREEJS

Threejs JavaScript uses WebGL (Web Graphics Library) technology to render 2D and 3D graphics in Web Browser. This WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of physics and image processing and effects as part of the web page canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background. WebGL programs consist of control code written in JavaScript and shader code that is executed on a computer's Graphics Processing Unit (GPU).

Threejs makes use of clients GPU to create a great interective 3D graphics in browser.

A sample code looks like below:

<html>
<head>
<script src="three.min.js"></script>
</head>
<body>
<script>

    var camera, scene, renderer,
    geometry, material, mesh;

    init();
    animate();

    function init() {
        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;

        geometry = new THREE.SphereGeometry(400, 30, 30);
        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );
    }

    function animate() {
        requestAnimationFrame( animate );
        render();
    }

    function render() {
        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render( scene, camera );
    }

</script>
</body>
</html>
The following is the result.

You can see an example of Mount Everest in Terrain Viewer here. Try to notice the fighter jet flying past this region.

For detailed information on threejs, visit its official site.

QUICK LINKS
Coordinates

Earth Shape

Ellipsoid & Geoid

Datum

Projection

UTM

Rasters

Vectors
GDAL

GDAL Setup

GDAL Rasters

GDAL Vectors

GDAL Tools
WMS

MS4W

Spatial DB

Oracle Spatial

SDO_GEOMETRY

Geo-Crawler
Web Clients

Openlayers

OL3

Closest Distance Map

Openlayers v2.x

ThreeJS

Terrain Viewer

Bluemarble (250m tiff)

JS Tools

Geographiclib

JS2Shapefile

CSV2Shape


GeoSpatialEarth.in Copyright © All rights reserved.