JavaScript

While JavaScript has fewer applications in geography compared to other languages like Python and R, it remains a useful skill to develop, particularly for creating interactive web maps and web-based visualizations.

It’s important to note that JavaScript code can be executed in various and often quite different contexts with the most common being web browsers (front-end or client-side) and runtime engines (back-end or server-side), like Node.js and Deno. Most applications of JavaScript relevant to geographers occurs in the former with the use of libraries, like Leaflet, D3.js, and Observable.

The following resources will provide general introductions to JavaScript and its applications within the context of a web browser, so any of them can be useful for learning the basics of JavaScript.

Geospatial Libraries/Packages

A relatively comprehensive list of libraries that focus on using JavaScript in the web browser can be found below:

Additionally, you may find a few more libraries along with packages that run in Node.js through the following list:

Web Mapping

Developing interactive maps that can be shared via the web is one of the most commonly used applications of JavaScript in geography. A few resources and libraries used for developing web maps are listed in the link below, followed by resources associated with the four major web mapping libraries.

UBC Library Research Commons frequently provides workshops on web mapping using some of the tools listed below. You can find upcoming workshops here.

Leaflet

The smallest and most popular of the four major JavaScript web mapping libraries, Leaflet lacks some of the functionalities of comparable libraries, but provides the best options for quickly rendering small to medium datasets. For additional functionality, Leaflet can be extended using a wide array of plugins.

OpenLayers

While nearly twice as large as Leaflet, OpenLayers includes additional functionalities and often performs better than Leaflet when working with larger datasets1.

Mapbox GL

At a size significantly larger than both OpenLayers and Leaflet, Mapbox GL includes a wide range of features when rendering maps and is particularly powerful when rending 3D features. Unlike Leaflet and OpenLayers, Mapbox GL is not free and open-source meaning that it must be paired with Mapbox’s APIs.

MapLibre GL JS

MapLibre is a free and open-source fork of Mapbox GL that retains some of the unique functionalities of Mapbox GL while enabling the usage of alternative datasets and APIs.

Interactive Visualizations and Dashboards

JavaScript excels at creating interactive visualizations, and similar to web mapping, there is a massive number of libraries that can make development easier. Resources for a few of the most popular libraries are listed below.

Observable JS

Observable provides an interactive alternative to Jupyter with computational work completed within a user’s browser rather than on a server. Tools like Quarto integrate smoothly with Observable.

Code Quality Tools

Formatting

Sometimes writing code can get a bit messy. Formatters can automatically reformat your code to make it cleaner and easier to read while following a set of standards and best practices.

Linting

Using a static analysis tool, or linter, is a common best practice among programmers that helps in identifying and fixings mistakes when writing code by ensuring that you follow the correct syntax and a guiding set of best practices.

Type Checking

Like Python, JavaScript is inherently a dynamically typed language, meaning you the programmer don’t have to worry about the data types of each variable. Static types can be helpful for reducing bugs when writing complex scripts or programs. The primary way to add type checking to JavaScript is to actually write in another programming language, TypeScript, which is a superset of JavaScript. Another method is to use JSDoc, which enables you to annotate your JavaScript code with types. The TypeScript transpiler then uses those comments to check your types and return errors as it finds them.

Testing Framework

Similar to type checking, unit testing can be a helpful tool when writing large and complex scripts or programs. Jest enables you to define tests that can run over your functions and ensure they are following expected behavior in a range of practical scenarios.

Footnotes

  1. Zunino, A., Velázquez, G., Celemín, J., Mateos, C., Hirsch, M., & Rodriguez, J. (2020). Evaluating the performance of three popular web mapping libraries: A case study using Argentina’s life quality index. ISPRS International Journal of Geo-Information, 9(10), 563. https://doi.org/10.3390/ijgi9100563↩︎