halset/mapbox-gl-js

JavaScript library for WebGL-based client-side vector maps

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

Setup

To install dependencies and build the source files:

$ npm install

To serve the debug page:

$ npm start &
$ open http://localhost:3000/debug/?access_token=$MapboxAccessToken

This assumes you have the MapboxAccessToken environment variable set to a Mapbox API token from https://www.mapbox.com/account/apps/. It will watch the source files and automatically rebuild the browserify bundle whenever a change is detected.

Tests are written in tape. Most tests run within nodejs, but a few require a browser environment.

• npm test: local tests run in nodejs - excludes browser tests
• npm run cov: generate test coverage report - excludes browser tests
• npm run test-browser: run all tests locally in a browser

API Documentation

npm run docs: generate API docs

Style Reference

Sprite Generation

./bin/build-sprite.js [outname] [inputdirs]: generate an image sprite by running this script on one or more directories of PNG images.

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