JavaScript for Geospatial applications: An Overview

19

Javascript-geospatial

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 (Related: Deploying your own Slippy maps) 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:

Leaflet

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

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.

Node.js & Node Postgres

Great JavaScript libraries for building a web based PostGIS application. Here’s the guide that I found rather useful when getting started with Node.js.

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 🙂

  • Stefano

    OpenStreetMap doesn’t have the s at the end

    • Muthukumar Kumar

      Sorry about the typo. Changed it now. Thanks 🙂

    • Sorry about the typo. Changed it now. Thanks 🙂

  • Martin Isenburg

    Not to forget … on-the-fly geometry LiDAR point decompression and visualization like http://plas.io and http://potree.org … (-:

  • Lars I Nielsen

    Aren’t you overlooking GeoExt (geoext.org) ?

    • Well GeoExt seems to be a wrapper around OpenLayers, adding some more user interface building features

  • sajad hamid

    Hi, thanks for such a good article.. i need a piece of advice from you. I am a computer science Post Grad having very little experience with Programming, as of now i am working on WebGis Project using few Open Source Tools like pmapper. I want to equip and expertise myself in WebGis ( Geo Portal like). Please suggest,from where I should start, Which language should I use. Any Development Platform, tutorials, IDE…. thanks.

  • Steve Pepple

    Nice article. I’m working on some examples of Javascript for geospatial analysis, including Mapbox and Leaflet. Feedback is appreciated: http://codepen.io/stevepepple/blog/javascript-for-gis-and-advanced-maps

  • Pingback: Project update: Coding | Ranata's ITAP Experience()

  • Jason Thomas

    I would add Google Fusion Tables is a great base layer, especially for KML layers. I pull the fusion layer into my html pages and then do everything through the Google Maps Javascript API.

    • Well it’s sort of the opposite of a “base layer”. It’s a thing for arranging and presenting your data points *on top of a base layer*. It’s clever the way fusion tables will cope with lots of data points without overloading the browser, by secretly rendering your markers onto raster tiles. These are then still clickable in the presentation, so you’d never know! There’s lots of ways of rendering data to raster outside of the google stack, but for something which does it in such a seemless zero-development-effort way, the closest thing is CartoDB.

      • Jason Thomas

        Thanks for the clarification.

  • Luca Moiana

    Hi, any tutorial or guide on Node.js or Node Postgres ?
    thanks for the article

  • Some great software listed here, although it’s a bit of a confusing mix of higher level and lower level pieces of a puzzle. There’s quite of lot of different choices for what I would call a “web mapping library”. LeafletJS deserves to be higher on this list, if not the top. When you work with Mapbox.js you’re actually working with leaflet (extended to integrate with Mapbox API keys and other features editable in Mapbox studio) When you work with CartoDB you’re actually working with leaflet (by default, although CartoDB does lower level rendering which can be presented using various web map libraries) . For D3 you linked a tutorial which shows how to start with LeafletJS and add some D3 functionality, although you can also do some funky mapping with D3 without working with raster tiles at all e.g. rendering a spinning globe. Leaflet is a bit easier than OpenLayers to get started with I would say.

    We’ve got a list of web map display libraries on the OpenStreetMap wiki here: http://wiki.openstreetmap.org/wiki/Deploying_your_own_Slippy_Map

    • Thanks for your input. I agree with you regarding Leaflet’s importance in the “web mapping libraries” hierarchy. Moved Leaflet JS higher up the order.

      Added your OSM post to the post as well 🙂 Your inputs are really useful, thanks again!

  • Arash Madadi

    could you introduce an article, website or blog about “comparison between mentioned libraries for geo-spatial applications” ?

  • Pingback: Learning GIS programming: An overview « Something Different()

  • Shanmugavel Sugumar

    very nice and helpful sir. thank you but which one is good python or javascript for geospatial.