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.16.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.16.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.

Style Reference

Developing mapbox-gl-js

Preparing your Development Environment

OSX

Install the Xcode Command Line Tools Package

xcode-select --install

Install node.js

brew install node

Clone the repository

git clone [email protected]:mapbox/mapbox-gl-js.git

Install node module dependencies

cd mapbox-gl-js &&
npm install

Linux

Install git, node.js, GNU Make, and libglew-dev

sudo apt-get update &&
sudo apt-get install build-essential git nodejs libglew-dev

Clone the repository

git clone [email protected]:mapbox/mapbox-gl-js.git

Install node module dependencies

cd mapbox-gl-js &&
npm install

Serving the Debug Page

Start the debug server

MAPBOX_ACCESS_TOKEN={YOUR MAPBOX ACCESS TOKEN} npm start

Open the debug page at http://localhost:9966

Creating a Standalone Build

A standalone build allows you to turn the contents of this repository into mapbox-gl.js and mapbox-gl.css files that can be included on an html page.

To create a standalone build, run

npm run production

Once that command finishes, you will have a standalone build at dist/mapbox-gl.js and dist/mapbox-gl.css

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

See bench/README.md.

Writing Documentation

See docs/README.md.

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