Developing an OpenLayers app from scratch in ES6 using Mocha, Webpack and Karma

It looks a bit like I’m trying some kind of SEO trick with this title. Believe me, I’m not! It’s just amazing how many technologies were necessary to get in-browser unit testing to work with modern JavaScript and OpenLayers; I just tried to summarise the point of this post in the title.

Enough of my up-front apologies, let’s get started. The ultimate goal of this post is to create a (reasonably) simple application using the OpenLayers mapping library, namely one that plots the current sea-ice concentration data for the Arctic as a PNG image. Surely it’s not that hard to create a simple OpenLayers application, you’d think–and it’s not–however, let’s imagine that we’re not just creating a toy application; we’re building an application that many people are going to develop and many more are going to use. We also want to build something that can be served via a normal web page or could potentially be extended to a progressive web app that a user can install and use locally on their device. We therefore need to bundle all of the packages the app needs in order to run in the user’s browser.

Once we start digging into the app requirements we’ll see that there’s much more involved than what one would expect from first glance. Hence we need to make things as maintainable as we can from the word go, and that means we should use modern JavaScript (e.g. ES6 or higher) and we should test our code (e.g. with unit tests) and preferably in the browser¹. Just requiring ES6 and unit tests in the browser means we have to juggle several technologies at one go. Therefore, we’ll start small and add things as we need them.

This post is split into parts to reduce the amount of material to consume in one go. Let’s dive in by creating the initial application.

Direct links to the individual post parts

• Creating the initial application
• Testing the application with mocha
• Projections: different ways of looking at the world
• Visualising Arctic sea-ice concentration data

1. actually, we should use unit, integration, acceptance and system tests, but that would make the post enormous and be more of a distraction than a help. ↩

Support

If you liked this post and want to see more like this, please buy me a coffee!