JavaScript for Geospatial applications: An Overview

By Muthukumar Kumar

JavaScript has formed a strong relationship with the Geospatial world (WebGIS, et.al) in a manner that is reminiscent of the relationship between Python and Desktop GIS. JavaScript is often regarded as more of a scripting language than a full-fledged object oriented language but I must admit it has got a much wider functionality than one might imagine and for the record, JavaScript is officially termed as Object-Scripting language (read: Mozilla’s JS page). If you are looking for an overview of programming languages used in GIS, have a look at my previous post.

While the capabilities of Desktop GIS and their applications are undisputed, there has been a steady growth in the number of WebGIS applications and Apps. Majority of such applications utilize one JavaScript library or the other. Depending on whether you just want to use JavaScript for developing a simple map for your website or visualize tweets in real-time, one of the many JavaScript libraries and tools might be of interest to you. Here’s an overview of JavaScript for Geospatial applications:

OpenLayers

OpenLayers has great documentation, a new version (3.0), lots of examples to get you started and the best thing of them all – Open source! Certainly my favorite JavaScript library and is one of the easiest ways to get a map on the web.

ESRI API for JavaScript

ESRI does it and does it well. Not for nothing, is ESRI considered as the GIS pioneer. Some of the functionality that you see with ESRI’s API is not that easily achievable with the Open source solutions especially if you have limited programming skills. However ESRI is not alone in the JavaScript for Geospatial arena and it looks like this is going to be one interesting competition.

CartoDB

CartoDB impressed us with their living cities visualization partnering with HERE and then they “wowed” us with the real-time geo-tagged twitter maps. Guess those two examples are enough to understand why CartoDB.js is a great library for geospatial applications. Here’s a presentation (Jan 2013) about using CartoDB to develop maps for the web.

MapBox

MapBox.js is another cool library for building interactive maps. FourSquare, Pinterest, National Geographic are some of the companies that utilize MapBox’s JavaScript libraries for their web maps.

D3

Data-Driven Documents or D3 is general purpose data visualization library. D3 is certainly a hot topic of discussion and development among geospatial professionals. Considering that D3 supports a new format called TopoJSON for topology data, this is a given I guess! Our geo-geek blog partners at digital-geography do most certainly love this. Here’s a blog post regarding mapping using D3.

Leaflet

Leaflet is a great tool for making mobile-friendly interactive maps and it extremely light-weight at 33 KB. Leaflet has a lot going for it and was one of the fundamental driving forces behind the recent redevelopment of OpenLayers 3.0.

Node.js & Node Postgres

Great JavaScript libraries for building a web based PostGIS application.

Open Weather Map API

Get detailed weather information using this free JavaScript API.

Cesium

Really cool JavaScript library for rendering interactive 3D (0r 2D) graphic visualizations without any plug-ins on the browser, requires WebGL though.

HERE Maps API

If you want to make use of the HERE’s awesome expertise with traffic information, routing and more.

StoryMap.js

The Open source alternative to ESRI’s Story map application.

And of course, Yahoo Maps API, Bing Maps API and Google Maps API. If you dont want to use the data from the big players, there is always OpenStreetMap.

Learning JavaScript
There are lots of JavaScript books, resources and tutorials available and to each one his/her own but you might want to have a look at OpenGeo’s resource for learing to use JavaScript for Geospatial applications aka programming WebGIS applications – OpenGeo’s JS page.

I am sure that I am missing a lot of really nice JavaScript libraries and APIs. It would be wonderful to have your input in this regard. After all, that’s what the comments section is for.

Source