Skip to main content

Introduction

Lots of meteorological data web sites have a model where the data live on a central server, get plotted on the server, and then the server serves static images to the client. This creates a bottleneck where adding fields and view sectors takes exponentially more processing power for the server. One way around this is to offload the plotting to the client and to have the browser plot the data on a pan-and-zoomable map. Unfortunately, in the past, this has required developing low-level plotting code, and depending on the mapping library, the performance may be poor.

autumnplot-gl provides a solution to this problem by making hardware-accelerated data plotting in the browser easy. This was designed with meteorological data in mind, but anyone wanting to contour geospatial data on a map can use autumnplot-gl.

Installation from NPM​

autumnplot-gl is designed to be used with either Mapbox GL JS or MapLibre GL JS mapping libraries. If you're using webpack or another node-based build tool, you can install by running

npm i autumnplot-gl

You may have to modify your build tool configuration to include the WebAssembly binary. For webpack, I've found adding this to your webpack.config.js works:

{
    "module": {
        "rules": [
            {
                test: /\.wasm$/,
                type: "asset/resource",
                generator: {
                    filename: "[name].wasm"
                }
            }
        ]
    }
}

Pre-built Javascript source files​

If you'd rather use pre-built files and not mess with node.js or webpack or any bundlers (understandable!), you can grab these three files and include them in the same directory in your project.

Then include the main autumnplot-gl.js file in your html as a Javascript source.

<script src="path/to/autumnplot-gl.js"></script>

When you these in your project, everything will appear in the apgl namespace. So instead of new PlateCarreeGrid(), for example, you'll have to use new apgl.PlateCarreeGrid().