Code Monkey home page Code Monkey logo

mapbox-gl-js's Introduction

Build Status

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.11.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.1/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 previously released versions. 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`

Writing Documentation

See docs/README.md.

Releasing

To prepare a release:

  • Merge mb-pages into master:
    • git checkout master && git merge origin/mb-pages
  • Update CHANGELOG.md
  • Update the version number in package.json, README.md, bench/fps/site.js, _config.yml, and _config.mb-pages.yml
  • Publish the build to the CDN (see below)
  • Publish the build to npm (npm publish)
  • Merge master into mb-pages and publish documentation:
    • git checkout mb-pages && git merge master && git push origin mb-pages

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.

Recommended Reading

Learning WebGL

GL performance

Misc

mapbox-gl-js's People

Contributors

1ec5 avatar anandthakker avatar ansis avatar bhousel avatar brunoabinader avatar danswick avatar danzel avatar dmitrig01 avatar edenh avatar friedbunny avatar halset avatar incanus avatar jfirebaugh avatar kapadia avatar katydecorah avatar kelvinabrokwa avatar kkaefer avatar lbud avatar lyzidiamond avatar michaelsteffen avatar mikemorris avatar mourner avatar samanpwbb avatar scothis avatar tatsvc avatar tmcw avatar tristen avatar vicapow avatar willwhite avatar yhahn avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.