JAVASCRIPT GIS TOOLS

There is a trend to handle as many as processing/calculations in client browser itself rather than sending and request and receiving response from the server, thereby avoiding eating up resourses of the server. Javascripts are the most widely used client-side script. This stands good even in the case of GIS javascripts.

There are a number of GIS javascripts libraries available online like openlayers, leaflet, proj4js, threejs etc. In this section I would emphasize on two very important javascripts which any GIS user would like to implement in his/her GIS web application in order to a avoid a round about server for processed data.

Every body in GIS field wants to calculate the distance between two points on earth, the coordinates he/she reaches when he heads x km in y direction or create buffers in the form of rectangle or circle. Just remember that creating buffer on earth is not a simple mathematics. This is little complicated than we expect. Adjacent image displays two buffers of 1000 Km on equator and 60° latitude respectively. Notice the bulginess in their shapes. You can remember that a similar example was shown in Earth Basics to show that same longitude difference at different latitude cover different distances.

GIS experts have to deal with a large number of coordinates received from non-GIS people generally in the form of excel sheets. They have to convert these excels to GIS forms like shapefiles or other formats to carryout geospatial analysis and calculations. Out of all the GIS vector formats shapefiles, KML, GML & geoJson proved to be very easily handled and flaxible.

Following are the two important javascript libraries we will see in this section:

point buffers

Two Buffers with 1000 km radius

GEOGRAPHICLIB

This geographiclib library is a vast library offering both client-side as well as server-side libraries. We will discuss only the client-side javascript. This library will solve two of our most common questions in GIS.

  • Distance between two coordinates
  • Coodinates of a point x distance from another point in y direction

1. Distance between two coordinates: This calculation requires the webpage to include the geographiclib.js. Then the following javascript will calculate the required distance between points.


var x = GeographicLib.Geodesic.WGS84, r;

// Find the distance from Wellington, NZ (25.5N, 100.24E) to
// Salamanca, Spain (27.56N, 105.332E)...
r = x.Inverse(25.5, 100.24, 27.56, 105.332);
alert("The distance is " + r.s12.toFixed(3) + " m.");
// This prints "The distance is 503116.080 m."

Check out the following working example:

Latitude 1:
Longitude 1:
Latitude 2:
Longitude 2:
 

2. Coodinates of a point x distance from another point in y direction: This calculation requires the inclusion of same geographiclib.js. Then the following javascript will calculate the required coodinates of a point at x distance from another point in y direction.

var x = GeographicLib.Geodesic.WGS84, r;

// Find the point 2000 km NE of Columbo (6.9271N, 79.8612E)
r = x.Direct(6.9271, 79.8612, 45, 2000e3);
alert("The position is (" + r.lat2.toFixed(8) + ", " + r.lon2.toFixed(8) + ").");
// This prints "The position is (19.42041951, 93.22745832)."

Check out the following working example

Latitude 1:
Longitude 1:
Distance (m):
Direction (°):
 

Remember that in Degree Decimal format of coordinate representation, -ve values are used for South latitude and E longitude. Use the same convention in the above javascript library also.

JS2SHAPEFILE

This is a very useful GIS javascript library which can create shapefiles in browser itself. You already know that at least three files are required in shapefiles i.e, shp, dbf and shx.

This javascript library has ability to convert points marked on map or provided from browser into point graphics. All line shapefiles are represented by an array of vertices of points and a polygon shapefiles are made by an array of points such that the first point and the last point in this array are same. This is required to complete the polygon.

This library is not just a javascript file rather it is a collection of many javascript files which help in creating all three files comprising of a shapefile and zipping and allowing it to download through the browser like BlobBuilder.js, FileSaveTools.js, jDataView_write.js, jszip.js, downloadify.js etc. These libraies works well in the Mozilla Firefox browser. You just need to have the Adobe Flash Player installed.

CSV2Shape is a working example of creating shapefiles in browser. This javascript application makes use of geographiclib.js files to create the buffer. Input needs to be a CSV (Comma seperated delimited text) file. It will display the CSV preview so that the user can verify the validity of its table structure. Ensure that the first row represents the column names. You need to select the latitude and longitude columns plus enter some values depending on the type of geometry being generated. Output will be either a KML or shapefile.

This CSV2Shape Javascript application can do the following tasks:

  • CSV to Point Shapefile / KML file
  • CSV to fixed sized Circle Buffer Shapefile / KML file
  • CSV to variable sized Circle Buffer Shapefile / KML file from a column of the CSV file
  • CSV to Rectangle Shapefile / KML file based on provided lenght and height in meters
  • CSV to Rectangle Shapefile / KML file based on provided upper left coordinates & lower right coordinates

Just remember that this application doest not take the first row into account while creating geometry graphics in shapefiles and the coordinates has to be in Degree Decimals only. You need to host this application in a webserver to download shapefiles (You can also use MS4W Apache web server). KML download does not require this condition.

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.