A WebGL JavaScript interactive maps library that can render Mapbox Vector Tiles.

Using mapbox-gl-js

Include the source via HTML tags:

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.9.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.9.0/mapbox-gl.css' rel='stylesheet' />

For more information, see the API documentation and examples.

Alternatively, you can npm install mapbox-gl and use it as a bundled dependency with browserify.

Developing mapbox-gl-js

The following tools are required on any platform to develop mapbox-gl-js. Mac users are advised to use Homebrew unless they want to build these packages manually. APT install steps are relevant to Ubuntu Linux users.

• git
  • OSX: brew install git
  • APT: sudo apt-get install git
• node.js
• GNU Make
• imagemagick
  • OSX: brew install imagemagick
  • APT: sudo apt-get install imagemagick

On Linux, libglew-dev is required in order to run rendering tests:

$ sudo apt-get install libglew-dev

To install dependencies and build the source files:

$ npm install

To serve the debug page:

$ npm start &
$ open "http://localhost:9966/debug/?access_token="`echo $MapboxAccessToken`

This assumes you have the MapboxAccessToken environment variable set to a Mapbox API token from https://www.mapbox.com/account/apps/. This command uses mattdesl/budo to watch source files, rebuild the browserify bundle, and trigger LiveReload updates.

Running Tests

There are two test suites associated with Mapbox GL JS

• npm test runs quick unit tests
• npm run test-suite runs slower rendering tests from the mapbox-gl-test-suite repository

Running Benchmarks

The FPS benchmarking page compares the performance of your local copy of GL JS against v0.7.0. Benchmarking configuration is within bench/fps/site.js.

To serve the FPS benchmark page:

$ npm start &
$ open "http://localhost:9966/bench/fps/?access_token="`echo $MapboxAccessToken`

API Documentation

API documentation is written as JSDoc comments and processed with documentationjs. We aim to document all classes and methods, public and private. Mark private classes and methods with @private.

To generate the HTML documentation from JSDoc, run npm run docs. To view the result, run jekyll serve (requires Jekyll).

Releasing

To prepare a release:

• Update CHANGELOG.md
• Update the version number in package.json, README.md, _config.yml, and _config.mb-pages.yml
• Publish the build to the CDN (see below)
• Publish the build to npm (npm publish)
• Merge the mb-pages branch to master

The CI server publishes builds to the Mapbox CDN automatically, but it does not currently support building tags. Therefore, to release a new version, push a branch with a name of the form vX.Y.Z, with version matching package.json. Once the build is successful, delete the branch and replace it with a tag.

Style Reference

Recommended Reading

Learning WebGL

• Greggman's WebGL articles
• WebGL reference card

GL performance

• Debugging and Optimizing WebGL applications
• Graphics Pipeline Performance

Misc

• drawing antialiased lines
• drawing text with signed distance fields
• label placement
• distance fields