mapbox-gl-js in nw.js

mapbox-gl-js in nw.js

Run mapbox-gl-js in nw.js and output a png image of mapbox map.

Running this thing

Setup

• install nw.js, see instructions here
• git clone this gist
• cd into it

Start the app

From this gist's directory:

$ /path/to/nw .

which outputs a png image of a mapbox map in output.png and session info in log.txt.

News

mapbox-gl versions greater than v0.22.0 don't work with nw.js v0.14.0 and less. I haven't tried all version combinations, but mapbox-gl@0.34.0 and nw.js@0.21.4 seem to get along well.

Observations

We can't require('mapbox-gl') in the app's main.js. This results in runtime errors tracking back to the mapbox-gl util/canvas.js source file.

Explantation: mapbox-gl relies on headless-gl to support node.js contexts. headless-gl (or just gl on npm) allow for the creation of WebGL contexts in node.js contexts. In turn, if we require('mapbox-gl') in the app's main.js, nw.js assumes that mapbox-gl is required in a node.js context, but the bindings in headless-gl are incompatible with nw.js which leads to runtime errors in headless-gl.

Solutions: Input the CDN version of mapbox-gl in the app's index.html file. For simplicity, this solution is used in this gist. Alternatively, we can require('mapbox-gl') in main.js, browserify it and use the resulting bundle file in the app's index.html file. This work because, browserify shims require('gl') calls with a browser-compatible wrapper as per the browser field in the headless-gl package.json.