There are a number of open source web clients available online which support WMS services to display geospatial images and vector layers 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 mosaicked in 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 provided the current zoom level images are not already available in browser cache.

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


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 rotated in any angle, its brightness, contrast & can be changed, KML, GPX, GeoJSON & GeoRSS support are available and so on.

As far as the JavaScript codes are concerned, this library has witnessed a major change in version 3. The codes are different in version 3+ as compared to older versions. We will dig the version 3+ first. Later on we will have a glimpse of version 2 just to check the the usage of GeoRSS.


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.

One important change which was introduced was the compatibility with Cesium JavaScript.

The Cesium is an open-source platform which empowers developers to build flexible web-based apps for streaming and visualizing massive geospatial datasets in 3D in browser. This requires a Terrain provider service for the third dimension for which Geoserver (Open-source Java based GIS server) can be utilised.

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, separate 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 following code is the simplest Openlayers version 3.x code to load OSM. You need to include the following 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:

	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'

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.

As it was mentioned earlier that there exists a compatibility between openlayers and Cesiumjs. Thanks to ol-Cesium third party integration library. One restriction this compatibility imposes is that all interactions which are possible on Openlayers will be disabled on Cesium. Here is an working example showing all major airports of the world with search option. You can create annotations and use measurements tool which will be disabled when the map is converted to 3D.


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

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 Geo-tagged photos on map. Click here to see the example. You can also download it run on your system from here.


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 interactive 3D graphics in browser.

A sample code looks like below:

<script src="three.min.js"></script>

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


    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 );

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

        renderer.render( scene, camera );

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.


Earth Shape

Ellipsoid & Geoid






GDAL Setup

GDAL Rasters

GDAL Vectors

GDAL Tools


Spatial DB

Oracle Spatial


Web Clients


Closest Distance Map

Openlayers v2.x



Terrain Viewer

Bluemarble (250m tiff)

JS Tools



CSV2Shape Copyright © All rights reserved.