nitinchakravarthy/mapbox-gl


License: Other

Language: JavaScript


Build Status Coverage Status

Mapbox GL JS

Mapbox GL JS is a Javascript & WebGL library that renders interactive maps from vector tiles and Mapbox styles.

It is part of the Mapbox GL ecosystem which includes Mapbox GL Native, a suite of compatible SDKs for native desktop and mobile applications.

Mapbox GL JS gallery

Using Mapbox vector tiles and styles

To use the vector tiles and styles hosted on http://mapbox.com, you must create an account and then obtain an access token. You may learn more about access tokens here.

Using Mapbox GL JS with a <script> tag

<!DOCTYPE html>
<html>
<head>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.25.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.25.1/mapbox-gl.css' rel='stylesheet' />
</head>

<body>
    <div id='map' style='width: 400px; height: 300px;' />

    <script>
        mapboxgl.accessToken = '<your access token here>';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v9'
        });
    </script>
</body>
</html>

Using Mapbox GL JS with Browserify

Install the mapbox-gl npm package

npm install --save mapbox-gl

Instantiate mapboxgl.Map

var mapboxgl = require('mapbox-gl');
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
    container: '<your HTML element id>',
    style: 'mapbox://styles/mapbox/streets-v9'
});

Using Mapbox GL JS with other module systems

Since our build system depends on Browserify, to use Mapbox GL with any other module bundlers like Webpack, SystemJS, you have to require the distribution build instead of the package entry point:

var mapboxgl = require('mapbox-gl/dist/mapbox-gl.js');

If you're using the ES6 module system (e.g. with Rollup as a bundler), you can import mapboxgl like so:

import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js';

Third Party Projects

These projects are written and maintained by the GL JS community. Feel free to open a PR add your own projects to this list. We ❤️ third party projects!

Using Mapbox GL JS with CSP

You may use a Content Security Policy to restrict the resources your page has access to, as a way of guarding against Cross-Site Scripting and other types of attacks. If you do, Mapbox GL JS requires the following directives:

child-src blob: ;
img-src data: blob: ;
script-src 'unsafe-eval' ;

Requesting styles from Mapbox or other services will require additional directives. For Mapbox, you can use this connect-src setting:

connect-src https://*.tiles.mapbox.com https://api.mapbox.com

Contributing to Mapbox GL JS

See CONTRIBUTING.md.

Project Statistics

Sourcerank 0
Repository Size 0 Bytes
Stars 0
Forks 0
Watchers 1
Open issues 0
Dependencies 62
Contributors 95
Tags 74
Created
Last updated
Last pushed

Top Contributors See all

Ansis Brammanis Vladimir Agafonkin John Firebaugh Lucas Wojciechowski Konstantin Käfer Tom MacWright Young Hahn Tristen Brown Lauren Budorick Bryan Housel Dmitri G Mike Morris Tatiana Van Campenhout Molly Lloyd Anand Thakker Scott Andrews Katy DeCorah Eden Halperin Minh Nguyễn Justin R. Miller

Recent Tags See all

v0.25.1 September 30, 2016
v0.25.0 September 29, 2016
v0.24.0 September 19, 2016
v0.23.0 August 25, 2016
v0.22.1 August 18, 2016
v0.22.0 August 12, 2016
v0.22.0-dev August 12, 2016
v0.21.0 July 13, 2016
v0.20.1 June 21, 2016
v0.20.0 June 10, 2016
v0.19.1 June 02, 2016
v0.19.0 May 31, 2016
v0.18.0 April 28, 2016
v0.17.0 April 13, 2016
v0.16.0 March 24, 2016

Something wrong with this page? Make a suggestion

Last synced: 2016-10-10 13:06:56 UTC

Login to resync this repository