JavaScript and GIS

In this article we will discuss the use of JavaScript in GIS for building GIS APIs, web maps, and backend and frontend GIS web applications. Additionally, we will briefly look at JavaScript, and the features that make the language suitable for various use cases.

JavaScript

According to the official documentation, JavaScript is an interpreted, dynamically typed programming language that supports object-oriented, declarative, and imperative programming paradigms. For a long time, Javascript was confined to the browser as its primary applied environment, however, with the development of Node.js and other non-browser-based environments, it can now be used on backend servers, as well as in the development of desktop applications.

When running on the browser, JavaScript Engine converts JavaScript code into fast code that can be interpreted by the browser. Outside the browser, Node.js provides a runtime for JavaScript code. Node.js achieves this through the use of V8 JavaScript Engine used to compile JavaScript code to optimize machine code (more commonly known as binary) before execution, and LibUV for C++ support. Since V8 Engine directly converts JavaScript code to machine code without first converting it to intermediate code, the code runs faster. Additionally, the Just in Time (JIT) compilation of JS code to native machine code contributes to its speed as the code is analyzed and optimized during runtime.

JavaScript for GIS

With the advent of Modern GIS, most GIS workflows ranging from data collection, to analysis, to visualization, have been moved from stand-alone desktop applications to the internet and distributed systems. Since JavaScript is the undisputed scripting language for the web, this has led to an increase in its use among the geospatial community. 

Modern GIS is anchored in interoperable and scalable open technology. Since JavaScript performs well in these areas, it has been used in geovisualization on the front end, and geospatial APIs, and geospatial data management on the back end.

Web Maps and Geovisualization

Dynamic interactive maps can be embedded inside web applications using JavaScript code written alongside HTML tags. The user can interact with the maps using a mouse, keyboard, or voice to select areas of interest, enter coordinates, or toggle layers on and off. Without the use of JavaScript, we would only be able to view static maps without any functionalities on web pages. JavaScript makes writing code easier for developers as most modules can be reused, unlike using native HTML tags to display maps.

Providing dynamic interactive maps tends to require more computational resources, and this can slow down the user experience. This is where Asynchronous JavaScript comes in. Instead of executing the code from top to bottom in a linear manner, when execution reaches a block that takes time the rest of the code continues to execute while the block runs. Through asynchronous JavaScript, the user will not notice when a particular part of the process is taking some time, improving the overall user experience.

Static maps, on the other hand, are just JPGs or PDF files that are not interactive.

For more details on Web Mapping and how it can be monetized check out this podcast episode here.

GIS Web Application Development

Through AJAX and XML, JavaScript can build web applications that can update dynamically, without updating the entire page. The development of the Software as a Service (SaaS) software distribution model where applications are distributed throughout the web, and hosted in a central location has increased the use of JavaScript. 

Listen to this podcast episode on How to build your own SaaS to learn everything you need to get started on building SaaS applications.

GIS JavaScript Application Programming Interfaces (APIs)

GIS JavaScript APIs are a collection of libraries that provide GIS functionalities. Through GIS, APIs developers and users can access spatial and non-spatial data stored in a spatial database without having to worry about manually maintaining the data’s structure. APIs are used to design architectures such as REST, GraphQL, and SOAP, and to make CRUD (Create, Read, Update and Delete) operations on APIs seamless from both a developer and user;s perspective.

JavaScript GIS Stack

When developing solutions in any field, you do not have to reinvent the wheel. Instead, you can build on top of solutions that others have developed to solve various problems more quickly and effectively. GIS development using JavaScript is not any different. We can not talk about JavaScript libraries without mentioning the npm package manager, which enables open-source developers to share code. 

To use the libraries published on npm you only need to run a single command on your terminal. For instance, to install Leaflet you run the following command on your terminal.

If you want to use a specific version of the software you can specify it with the npm command, otherwise, it will install the latest stable version. If you have several libraries you want to use in your project, list them inside a package.json file inside your development environment. Upon running the npm install on the terminal, all the libraries will be installed along with their dependencies. 

Remember, to use npm you need to install Node.js on your machine which will come with npm.

The following is a summary of popular JavaScript libraries that provide different GIS functionalities: 

Leaflet

According to its Official Documentation, Leaflet is a lightweight open-source JavaScript library for mobile-friendly interactive maps designed with simplicity, performance, and usability in mind. It supports layer events, dynamic map states, and Geolocation among other functions needed to make a map interactive on the client side.

OpenLayers

Like Leaflet, OpenLayers is an open-source JavaScript library that supports the display of map tiles, vector data, and markers on the front end in a fast and mobile-friendly way.  Unlike Leaflet OpenLayers takes up more space. To try out OpenLayers check out its official documentation here.

Esri JavaScript API

Esri developed an API that allows users to build interactive web applications that support both 2D, and 3D displays of geospatial data. Using the API you can display maps, style layers, search for places, geocode addresses, find routes, or perform advanced operations such as data enrichment or spatial analysis. It is worth noting that, unlike the other two front-end APIs, Esri’s is a proprietary product, and you will need to purchase a license to use it.

Turf.js

Unlike the other libraries focused on displaying and interacting with spatial data on the client side, Turf.js offers spatial analysis both on the client side, as well as the server side. On the browser, it is run as a plugin, while on the server side, it runs with Node.js. Turf.js allows the user to carry out spatial operations such as measurements, coordinate system transformations, feature conversion, and classification, among other functionalities. It is a simple, modular, and fast plugin that can implement complex operations effectively. Check out the official documentation.

Some other JavaScript libraries used to handle geospatial data are

• Mapbox
• D3
• StoryMap
• GoogleMaps API

Recommended Podcast Episodes Related to GIS and JavaScript